Basic Theme Development: Part Four

Troubleshooting, view template, and typography

At this point in the theming process, we have run into a minor margin issue. The three stories are overlapping the featured area, so we can't click on the area to add blocks. Negative margins in the theme seem to be the culprit, but we can't take those out of the template proper because we need them throughout. Luckily, we can put in some php code that checks if we are in edit mode, like so, and adds a separating div that will give us the space we need to access that area:

<?php if ($c->isEditMode()) { ?><div style="height: 30px;">&nbsp;</div><?php } ?>

This adds a div while in edit mode that spaces things out properly while in edit mode, which allows us to access that area. This is very useful for ensuring that themes play nicely with the concrete5 controls. We can then proceed to convert the html containers into areas below this section of 3 columns, making sure to append all these area names with "Home" so that they are specific to the home page, though this isn't explicitly required, just good practice. Additionally, for some areas, it is more prudent to make a custom block when things are very layout intensive than trying to do it in the content block. 

The view template

There is another required file for your theme, and it is called view.php. Certain elements in concrete5 aren't done with page types, they are done with single pages. They create their html and inject the html into a theme. View.php is the file that they inject into. This is useful for when you want to have a custom login page (which is a bit beyond the scope of this tutorial, but covered here). 

Process

  • Almost always, the easiest way to create this template is to take the simplest page type in your theme, one with one or two areas, and make a copy of it. 
  • Rename it view.php. Then, find your main content area, delete it, and add the following php:

<?php print $innerContent; ?>

That's it! Now these special single pages will be able to inject their content into this area. 

Typography.css

Optionally, you can create a file called typography.css which is used in your rich text editor to make it appear more like the live site. You create the typography.css file in the root of your theme directory. Basically copy the styles relevant to your typography, all styles related to color, font, background color, spacing, etc. into this file. This will help TinyMCE, the content editor, look closer to the site presentation, though there will be places in the site with custom styles applied to it that might not quite match. You can look in the dashboard to find the Rich Text Editor settings and switch on different TinyMCE modes with different editing options. 

General notes on area names:

Generally speaking, the simpler the area name, the better. "Main" and "Sidebar", "Footer Nav", and "Footer Copyright" are very frequently used area names, so probably good to use. Looking at themes in the marketplace might be a good place to start looking for area name standards. 


Recent Discussions on this Topic

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…

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…

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() { $…

Problem with the nav bar with bootstrap

Hey guys, finishing up my site here. The one issue I'm having is having the navigation load normal. The original code is: Toggle navigation Ambrosia …

Package attribute

For a new theme I want to have a pagelist install with it which shows up thumbnails of pages, I have this all sorted but I have no idea how to install the 'thumbnail' attribute with my theme, I have looked at other packages but cant find any examples wher…