WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Ruud on May 28, 2013, 02:06:11 PM

Title: OnePage demo template
Post by: Ruud on May 28, 2013, 02:06:11 PM
In Another thread (http://www.WebsiteBaker.org/forum/index.php/topic,25882.0.html) there was a question about how to create a one-page template for WebsiteBaker.

Since I had done this before I thought I would share it with the community. :-)

The template is a modification for WB of the free responsive template called OnePager (http://www.egrappler.com/free-responsive-html5-single-page-portfoliowebsite-template-onepager/), where I added an extra php file with a new class to build the pagedata and menu's.
The class could be improved in the future, but for this template it is functional.

Have fun with it.
Ruud


Title: Re: OnePage demo template
Post by: dbs on May 28, 2013, 03:41:53 PM
Cool, thx for that.
Can need it in this moment.  :wink:
Title: Re: OnePage demo template
Post by: Boudi on June 10, 2013, 05:08:38 PM
This is another extension of how to build clean, responsive and simple websites. Great stuff!  :-)
Title: Re: OnePage demo template
Post by: Argos on June 17, 2013, 05:04:48 PM
Doesn't work on my test site... Error 500.
Title: Re: OnePage demo template
Post by: Re-Mi on June 17, 2013, 09:40:13 PM
I also had the error after manual installing the theme. After installing it trough the admin it worked fine for me on my MAMP setup.

I really like this onepage template, i can see a lot of potential in it (a month ago i was trying to make it myself)

Thnx Ruud

Kr,

Michel
Title: Re: OnePage demo template
Post by: Argos on June 18, 2013, 03:29:52 PM
I installed it through the admin, just like any other template. Installtion was succesfull, the template itself was not  :|
Title: Re: OnePage demo template
Post by: Ruud on June 18, 2013, 04:53:32 PM
I installed it through the admin, just like any other template. Installtion was succesfull, the template itself was not  :|
Many modules are not built to be loaded twice (or more).
Since the template loads all pages at once, problems with these modules can happen.
Try disabling pages with "special" (non standard) modules to find what is causing the problem.
Title: Re: OnePage demo template
Post by: Argos on June 19, 2013, 12:11:15 AM
I set all pages on my test site to ""visibility: none", except for 1 test page with the one page template. then I saw the template, but it had lots of static content from the original template file, and it showed all pages regardless of the stsutsu that I set to none.

So, this template is not ready for use yet


The template works fine. I had tested it on a rather complex site with many levels and all kinds of modules, droplets, etc. But then you will get all kinds of unwanted output. This template is not suited for such sites.

It works fine on simple, one-level sites.

Great template for landing pages, very simple sites, and clients with very tight budgets! Thanks, Ruud  :-D
Title: Re: OnePage demo template
Post by: Boudi on July 30, 2013, 09:44:09 AM
Before users start to use this template, there are a few restrictions that I came across:

Hidden pages are not visible (eg: thank you pages after sending form)
Guestbook mod is not working

Test the template with your desired mods and configuration before considering editing it by yourself.


Regards,

Boudi
Title: Re: OnePage demo template
Post by: Re-Mi on September 05, 2013, 09:53:22 AM
Ruud,

Is there also a way to make it scroll horizontal ? I looked at the jquery waypoints and it should be there but i'm missing something.

(rooms still doesn't scroll fluid for me, so this one will be my only option)

Greetz,

Michel
Title: Re: OnePage demo template
Post by: Ruud on September 05, 2013, 11:02:00 AM
I don't think this laout is suitable for horizontal scrolling, but there are many (non WB) templates out there that could be adapted using the content-loading technique in this template.
Title: Re: OnePage demo template
Post by: wendydej on July 24, 2015, 05:05:36 PM
Is this file available anywhere else? I keep getting an error when I try to unzip the ZIP-file.
Title: Re: OnePage demo template
Post by: crnogorac081 on July 27, 2015, 04:16:15 PM
same here
Title: Re: OnePage demo template
Post by: Ruud on August 04, 2015, 11:07:25 AM
Found it :-)
Title: Re: OnePage demo template
Post by: crnogorac081 on August 05, 2015, 09:44:49 AM
awesome code, gives me a lot of ideas !! tnx ruud!
Title: Re: OnePage demo template
Post by: Roych on October 10, 2015, 06:46:27 PM
Great code, is it possible to add another content <?php page_content(2); ?> which is not used by onepage code and would behave different as <?php $op->page_content(1) ?>


I tried with numbers 1 and 2 but it doesnt make any difference.


The problem is I would use two sections on a site, the first would be the onepage code, it would actualy be full width image, and the second would be normal content.
So that when you click on a menu link it would take you to image.


Here is the template I would like to use.
http://www.gt3themes.com/website-templates/timber/ (http://www.gt3themes.com/website-templates/timber/)


Thank you


R
Title: Re: OnePage demo template
Post by: Gast on October 10, 2015, 06:55:15 PM
do you activate the wb general option  "blocks enabled"?

your templates info.php needs also entrys like this

Quote
$block[1] =    'Main';
$block[2] =    'Right';

and a second section with the setting "right" in the Block select field

Title: Re: OnePage demo template
Post by: Roych on October 10, 2015, 07:07:19 PM
do you activate the wb general option  "blocks enabled"?

your templates info.php needs also entrys like this

Quote
$block[1] =    'Main';
$block[2] =    'Right';

and a second section with the setting "right" in the Block select field


I have all those inserted, the blocks works, but the content is the same in both codes 1 and 2, no matter which block is selected in the backend.


G
Title: Re: OnePage demo template
Post by: Gast on October 10, 2015, 07:16:51 PM
this or Entrys like this is needed in the info.php of the frontend template

Quote
$block[1] =    'Main';
$block[2] =    'Right';

after writing this in the info.php, its needed to reload the template infos
Go to Addons -> advanced
activate the control box for templates and click reload

after that go to page (administration) and there to manage sections like this here

(https://i.gyazo.com/2fceaea191a8eb1ad405c0d939b4c3bc.png)

see the select field in the row "block"

in my example main is Block 1 and <?php page_content(1); ?>

right is Block 2 and <?php page_content(2); ?>
Title: Re: OnePage demo template
Post by: Roych on October 10, 2015, 07:31:02 PM
I have the right blocks selected It should work, but somehow the content from all blocks is shown in <?php $op->page_content(1) ?> no matter how many I create and change in the BA



I guess it is the class.onePagerData.php that needs to be changed somehow it shuld work only with content (1) so I can add some other content blocks that are not affected by it.




Thank you




R
Title: Re: OnePage demo template
Post by: Ruud on October 10, 2015, 10:49:22 PM
This template - created as "proof of concept" - does not respect blocks or multiple menu's. It does not make much sense.

The problem is I would use two sections on a site, the first would be the onepage code, it would actualy be full width image, and the second would be normal content.
So that when you click on a menu link it would take you to image.
The way the example template works can be used here too. It sets a background image on the start of a "page".

The generated output of class.onePagerData. php has a <div id="{menu_title}">...</div> around all "pages".
Just use a css background image for such div.

I.e. for the page "about" you could use something like:
Code: [Select]
#about {
  background: url("/media/about-background.jpg") no-repeat scroll center center / cover
}

Title: Re: OnePage demo template
Post by: Gast on October 11, 2015, 11:14:13 AM
at Roych: Sorry for my answers. I read only your question, but not, that you talk about the special template :oops: :oops: :oops: :oops:
Title: Re: OnePage demo template
Post by: Roych on October 11, 2015, 05:31:51 PM
#Ruud thank you for helping, I tried your suggestion, it works but not really what I wan't here, this gives me the background image through entire content. I need to put fullwidth image above every content, so all I can think of is with another section but this would have to be somehow done in class.onePagerData. php. The normal text content is not fullwidth.


#jacobi22 no problem, thank you. ;)


Thank you


R
Title: Re: OnePage demo template
Post by: Ruud on October 11, 2015, 10:30:13 PM
it works but not really what I wan't here, this gives me the background image through entire content. I need to put fullwidth image above every content..
To do that is just playing with css and maybe the template/index.php.

You would need another approach for the menu (to get an horizontal menu) and remove the width settings of .wrap and .container.
Within the <div id="{menu_title}">...</div> there will be a <div class="page_content">...</div> that can be used as the container width with the background solution on the parent div.
Title: Re: OnePage demo template
Post by: Roych on October 12, 2015, 01:37:36 PM
I have horizontal menu
Here is the testing site:
http://gregor-design.com (http://gregor-design.com)


as you will see the image should be fullwidth and the text below should not. Image above has some content in it, so my thinking is that this can only be done with diferent section, I used html module for it. I tried with css, cant get it working it can only show the image without content in it. If you look at ABOUT you will see what I'm talking about.


Bellow you will se another section which is not fullwidth (so this would only be the normal content)
this is how my html looks like in index.php but all < ?php $op->page_content(); ?> shows all sections.
Code: [Select]
   <?php $op->page_content(1); ?> <!-- fullwidth html module with image, the link goes to this-->


<div class="container">
   
   <?php $op->page_content(2?>   <!-- text section NOT fullwidth-->   
     
<>

And image of my BA:
(https://i.gyazo.com/a908757a0ea42a2b1314ab6c7ee01ca5.png)

if the script would alow multiple sections it would open a whole new aproach for making onePage sites with WB.


Hope u understand


R.
Title: Re: OnePage demo template
Post by: Ruud on October 12, 2015, 02:03:15 PM
What you are suggesting is just not possible..

The call $op->page_content() gives all content for all pages into a one-pager template.
If the class would generate separate sections you would get a full website section(2) output in that call.

Doing it the way you are suggesting you should use something like globalBlocks (http://www.dev4me.nl/modules-snippets/opensource/globalblocks/) for all blocks/sections in your template and create the menu hardcoded.

You are making a mistake in thinking you need a content section for the full screen images.
In this template these images are backgrounds, set by CSS, not set as content.
The output of the onepager class does generate a perfect output to do exactly what you want.
You just need to remove the .wrap and .container from the template/index.php and understand the CSS included in your template and modify it with the correct id and class selectors.
Title: Re: OnePage demo template
Post by: Roych on October 12, 2015, 02:56:33 PM
Thank you Ruud, I guess I understand what you mean, but I don't realy know how to achieve this with css I tried what you said and gave all my pages it's own css id so that the image is shown but it is shown as a background to a whole content. And when I do that I lose the content that should be in those three columns.


Oh, ..I guess I will have to pass on that one, just can't figure it out. ;)




Thank you


R


Title: Re: OnePage demo template
Post by: Roych on October 12, 2015, 03:14:38 PM
Ok, I actualy did it with a simple, not realy good but working method. I put the html from the template into the wysiwyg section and I can now do exactly what I wan't and it's working as I need. I just have to be careful not to delete the divs out of the wysiwyg area, hehe ;)




Thank you


R
Title: Re: OnePage demo template
Post by: quinto on December 07, 2015, 02:39:48 PM
thanks a lot Ruud it's a very elegant way to make a "new design" one page site without changing anything in the content, WB is a very very flexible CMS, one time again WB amazed me :)