Documentation
One page theme provides a fluid interface for both users and designers to extend and modify. This document will show you some of the ins and outs of this package, and how to build a terrific looking theme around it.
User Docs
One page theme is a revolutionary concrete5 package that allows you to add your own areas to a page in compatible themes. You can add these areas on a per page basis, and then add any content you want to them. Heres how
1)Install it
Go to the Dashboard and then to Add functionality. You'll see one page in the right sidebar. Install it, and then go to Pages and themes. Activate the One Page theme.
2) Use it
Go to your homepage and put it in edit mode. Select design, and choose the One Page page type. No go to properties, and click on custom attributes. Add all the Areas that you want to be editable areas on the homepage and press save, and then refresh the page. You should now have your own editable areas that you can add content too. You then want to add the One Page Autonav Block to your header. In it you can choose whether or not you want to have navigation links for the area that your visitor is on appear differently. The One Page Autonav also allows users to click on an area and automatically they are scrolled down smoothly, encasing their enjoyment of the site.
3) Customize it
If you go to dashboard/one page you have more options to customize the One Page package to truly make it unique to you. There are also themes released by independent theme developers that are in the concrete5 marketplace, so you can change the style of your site while still maintaining a strong and durable framework. Enjoy!
Designer Docs
If you are a designer who has purchased a package license and wish to receive a free basic theme to see a simple example, please email jack.lightbody@gmail.com and I will send you a modified plain yogurt theme that is compatible with the package. Here is how to make a theme include features of One Page page.
1) Make the page type
One page theme framework automatically assigns the area name attribute to pages of the type single_page. This page type should be installed with the one page package, so you do not need to install it.
2) Grab the area names
The way one page works is it grabs names that a user inputs in page attributes and outputs them as editable areas. So to get the names, we need to get the data from the attribute. This can be accomplished with the following.
Loader::model('attribute/categories/collection');//load the model
$ak = CollectionAttributeKey::getByHandle('area_name_select');//get the attribute
$areaNames = $c->getAttribute($ak->getAttributeKeyHandle());//get the data stored in the attribute
3) Make the editable areas
In this example, all that we want to do is to make editable areas in the code. Heres the code to make it happen.
if(is_object($areaNames)&& $areaNames->count() > 0) {// check the the attribute has data in it
foreach($areaNames as $r) {//get all the area names
echo '<div class="section" id="section-'.$r.'">';//output a containing div for one area name. Note that the class of section and that the id of section-[area name] is required to make the autonav work correctly
$a = new Area("Main " .$r. " ");// make a new area with the name of Main [area name]
$a->display($c);//standard stuff
echo '</div><div id="end-'.$r.'"></div>';//this is now required so we can capture the user scrolling on the way back up.
}
}
4) Extend
One page areas also contains some additional options that you can leverage as a theme maker.
a) To top links-
If you want to have links to the start of the page, say at the top of each entry, heres how
$toTop = Config::get('toTop');// load the toTop config attribute from the dashboard page
if($toTop==0){//if its enabled
echo t('<a href="#page" rel="nofollow" class="toTopLink">Top</a>');// make the links to the top
}
note that all a links with a class of smoothLink or toTopLink will have smooth scrolling implemented, if smooth scrolling is enabled in the dashboard
b) Smooth scrolling
$smooth = Config::get('smooth');// load the smooth config attribute from the dashboard page
if($smooth==0){//if its enabled
//do your stuff here, links with class of smoothLink or toTopLink will be smooth
}
note that this is just if you only want the links to appear with smooth scrolling enabled
c) independent classes
numbering
if you want to style each area differently, heres how.
if(is_object($areaNames)&& $areaNames->count() > 0) {
$i=0;
foreach($areaNames as $r) {
$i++;
echo '<div class="section section-'.$i.'" id="section-'.$r.'">';//now all divs will have classes in the format of section-1. Note that the counting starts at one
$a = new Area("Main " .$r. " ");
$a->display($c);
echo '</div><div id="end-'.$r.'"></div>';
}
}
d)odd/even
if you want to style odd and even areas differently, heres how.
if(is_object($areaNames)&& $areaNames->count() > 0) {
foreach($areaNames as $r) {
$i++;
if($i&1) { $class= 'odd';} else {$class= 'even';}
echo '<div class="section section-'.$class.'" id="section-'.$r.'">';//section-odd and section-even classes are now applied. The first area is 1.
$a = new Area("Main " .$r. " ");
$a->display($c);
echo '</div><div id="end-'.$r.'"></div>';
}
}
e) Styling the Nav
When a user is on a certain element the class nav-active is applied to the relative a tag. The parent ul has a class of singleAreaNav, with its nested output as li and a.