Basic Theme Development: Part Two

We can now change the title of our site and pages dynamically, as we included the header_required element into our theme. Now we will start making certain elements of this theme dynamic by adding areas and global areas to them.


First we will add some areas that are visible throughout the entire site, called "global areas". Let's add a global area inside the #header div. 

$a = new GlobalArea('Site Logo');

Keep in mind, since this is a global area, adding content to this area will be used throughout the site where this area is included in the page type template. For standard areas, the content in the area would only appear on that particular page instance, and not on other pages of the same page type. Moving along: 

Let's create a global area where the unordrered list for the header navigation appears called 'Header Nav'. Before we add the autonav block to the newly created area, let's add some sub pages so that it's actually populated with something. Prior to doing that, we'll need to create some page types. We will do this through the CMS, and create actual template files for the page types later. Keep in mind that, with page types, you cannot delete a page type if there is a page or pages still using that page type. We will create full, right sidebar, and left sidebar page types. For the handles, be sure to use underscores in the place of spaces. 

Now we'll create 3 different placeholder pages to demonstrate the autonav. The autonav block will automatically populate with pages we have created, and each page will have all the header material we added to the global area. 

With the autonav, there might be "active" state styles for navigation items when you are on the page displayed in the navigation. These may not jive with the classes the autonav block automatically applies to the navigation entries if they are active. The autonav applies the class "nav-path-selected" to the active page AND all the parent pages. This is useful for when you want to highlight all the parent pages in a pages path. If you just want to target the page that the user is currently on, you can use the class "nav-selected." In the case of this theme, we'll change the class "active" to "nav-path-selected'.  

Now we will find where the main content container is in the current theme. We will delete all the content in there and add a concrete5 area instead. Note: This is not a global area, just a standard area, as it will vary from page to page. 

<?php $a = new Area('Main');
$a->display($c); ?>

This is the standard c5 main area name, and it's good to standardize that, because if you activate a theme without a main area, the content will not appear. Now that you can add content, grab some lorem ipsum placeholder text and paste that in there. You can add headers and links through the content block, and they will assume the styles of the site automatically. 

Onto the footer: We want to make the footer a global area just like we did with the header. Let's find the footer div in the theme and cut out all the content, but let's set that code aside so we can remember the sub containers within the footer. We will light up each of these containers into global areas. In this instance we will copy the newsletter container's text. The form block will require some special css to make the form block match the theme, but that is a little beyond the scope of this tutorial. In brief, we can override general styles in the theme to target elements specifically, in this case modifying the width of the forms and the border. 

From here, make editable global areas for the other containers of the footer, i.e. Footbox 1, Footbox 2, and Footbox 3. The code for all of these containers will look similar to the other global areas we've already made. Here is a specific example: 

$a = new GlobalArea('Footerbox 1');

Again, all these footer areas will appear throughout the site. 

Recent Discussions on this Topic

how to call the controller from theme header

Hi, I am developing web application by using the concrete5, First i try to implement multilingual in single pages, its work sample i attached my screen shots image. pfa. Now i want to this in my theme, how to do this. experts help me. than…

Keep Theme Styles from Interfering with concrete5

Can someone please explain this to me, as I have a few sites that I have built where the theme does interfere with the Concrete5 Interface. ----------------------- From C5 Documentation: Keep Theme Styles from Interfering with concrete5 When c…

Link to files theme

Hello. I am building a theme and the C5 doesn't detect any file. I think I am doing it correctly. Here is my code: [code]

Where is the active theme data stored in database?

Hey there! I am trying to figure out how doeas theme switching actually work in C5. I could not even find the actual database entry, which stores the currently active theme. Does anyone know how to find it? I tried searching the database for "theme" and …

Render page without theme

Hi Is it possible render page without theme? I'm building my own package for concrete5 and I want to render basic html-view. So I don't want any theme files there. Is it possible? Now I'm trying in controller.php public function view() { $…