Advanced Theme Development: Part Four

One last note on view.php: If you want to use view.php as something that only holds the content for built-in concrete5 forms like register or login, you will want to make sure you have templates for all your other pages. 

Attribute Types: 

We’ve worked with some attributes, but how do you make your own custom attribute type? There is some pretty extensive documentation in the developer section of concrete5 that you can check out here.  

Attribute types work a lot like blocks, in that they have a view layer, and they also have a form for where they’re being filled in in the page properties dialog. The color picker attribute, for example, is just a controller and some custom css. However, there’s a good chance you won’t really need a custom attribute type primarily because the core concrete5 attribute types cover most use cases. 

Customizable Theme Styles:

One of the downsides to using attributes to control the background color of elements in your themes is that you have to move functionality into the theme itself to add a style to the element. But one thing that concrete5 supports is theme color customization from the dashboard. 

Let’s create a css file in our theme directory called “colors.css”. Then, let’s go through our other stylesheets and find the styles applying the background colors to the body, header, and footer, and take those specific styles out of those style sheets put them into our colors.css file instead. In our case that would look like so:

body { 
	background-color: #131313;

#header {
	background-color: #232323;

#footer {
	background-color: #232323;

Now in the header of our theme, let’s make sure we include our color.css: 

<link rel=”stylesheet” href=”<?php echo $this->getStyleSheet()?>/colors.css” type=”text/css” />

It’s important to note that we used the getStyleSheet function and not the getThemePath function. Why? Because when concrete5 loads a stylesheet with this function, it runs the css file through a customization script that checks for customizable styles. When the stylesheet loads, you’ll notice that it doesn’t load at it’s actual location, but at index.php/tools/css/themes/darkness/colors.css (Or whatever your theme is named). This tool looks in the CSS file for customization tags. You can build in customizable styles by including comments in your CSS. When you wrap something in the following comments, it will become customizable. So in our case: 

body {
/* customize_body_background */ background-color: #131313; /* customize_body_background */

#header {
/* customize_header */ background-color: #232323; /* customize_header */

#footer {
	/* customize_footer*/ background-color: #232323; /* customize_footer*/

Alternatively, you could double up these selectors if you wanted them all to be tethered to one common custom color, like so:

#header, #footer {
 /* customize_accents*/ background-color: #232323; /* customize_accents*/

You can see that we have a unique comment identifier for each of these styles. 

The dashboard customization screen automatically loads the current colors, and now we can modify those different colors. We can also see a preview in real time down below of the colors being applied on our site. If we like the way our current color scheme looks, we can save it and our site colors will reflect our changes. You can reset your styles as well, which will revert to what you originally had defined CSS-wise for these customizable styles. 

Mobile Theme Switching

In this video demonstration, the Mobile Theme Switcher is used for adding theme switching capability for mobile users, but as of, this functionality is built into the core. But if you are using or below, you would want to download the Mobile Theme Switcher. Both the addon and the core theme option will allow you to specify a mobile theme to use when users arrive at your site using a mobile device. 

Other commonly used theming addons

The Document Library is often used, as well as the Login block (which allows you to add the login form anywhere on the site.)The Spacer addon is sometimes used to add space to your site. Social icon addons are also fairly widely used, along with Expand / Collapse blocks. 

Cleaning up excess page types

There is an automated job called “Remove Old Page Versions”. This will remove all but the ten latest page versions for every page. You could also customize the job itself to leave more or less page versions, depending on your preference. Running this job regularly is a good maintenance practice, as things like the Page List will perform joins on the versions table, and having millions of versions can slow this process down. 

Hope you guys enjoyed this training! There are many different ways to tackle problems when building sites with concrete5, and hopefully this has given you some ideas on how can get the most out of your themes. 

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…

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…

Location of Installed Themes

I have been searching for an answer to where installed themes get placed after being downloaded and installed from the dashboard. What is the directory? I am trying to design a theme from the skeleton theme: "Stripped" by Steven Braun at …

Custom Maintenance Mode in v5.7

Another day another C5 question.. I have followed 5.7 guidance on customising system single pages (link below) and have had no issues... that is until I got to the maintenance page. The article kind if implies this should follow the same process but I …