This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

What's a Configurable Style?

Success on the web has always been powered by a Do-It-Yourself mentality. 

52071238171792Picture1.png

While some groups are well served by a locked down theme that keeps design decisions out of the site owner's hands, others may be better served by the ability to do some design on the fly. There's a number of places in concrete5 where a site owner might change CSS for a site on the fly, including the "Customize" button from Dashboard > Pages and Themes. 

If you want your theme to include some configurable CSS choices, you can define which styles can be tweaked through the dashboard in your theme's stylesheets. 

 

Make sure your templates include your stylesheet properly

getStyleSheet('your_stylesheet.css')?>

Previous versions of concrete5 recommended that themes be included with View::getThemePath(). This will still work - but it will not allow your theme's stylesheet to be customized.

 

Insert CSS comments into your theme's stylesheets

Now, all you have to do is add properly formatted CSS comments into your stylesheets. All CSS files in the root of a theme directory will be parsed when customizing that theme. This includes typography.css.
Surround the actual CSS declarations themselves with a CSS comment prefixed by customize_, and then suffixed by a handle that describes what it is they're surrounding. So, in our plain yogurt theme we have

customize_background
customize_body
customize_link_hover
customize_link
customize_header_logo

These CSS comments look like this in the stylesheets themselves:

body {/* customize_background */ background-color: #ffffff; /*
customize_background */ text-align: center; padding: 0px; margin: 0px;
}

body {
       /* customize_body */ font: normal normal 13px Arial; /* customize_body */
       /* customize_body */ color: #777777; /* customize_body */
}

a:hover {
       /* customize_link_hover */ color: #66CC00; /* customize_link_hover */
}
Currently, we have two types of selectors, and they are automatically
chosen based on the content of the comments:

Color Selector
Font Selector

Fonts that are contained within our special CSS comments have to be
formatted exactly like in the above examples, with the full font: tag
(including line-height.) Failure to do this will result in the file
not reading into our editor properly (although once you edit the file
and save it, it should work from there on out.)

Style tags can stack up on a particular item (notice that we have two
customize_body tags above, with one on color and one on font.)

Finally, you can add

/* customize_miscellaneous */ /* customize_miscellaneous */

(basically an empty style comment) at any point in your styles, and that
will allow your theme to incorporate the free-form
enter-any-kind-of-css-you-want text field (for even greater control.)

Styles are cached so as not to make the entire process too
performance-intensive, which means that if ever there is a time when
CSS does not appear to update after saving, refreshing the site's
cache might help.
Loading Conversation