Enforcing a look and feel, but allowing for exceptions


I’m new to ContentBlocks, and need to set it up to help enforce a consistent look and feel across the site. For example, we want to have specific CSS styling applied as a default to each element (including p, h1, h2, ul, li, margins, font attributes, line heights, etc) - but also allow for exceptions.

Also, I noticed that selecting font color is not an option when editing using rich text. There will be non-programmers creating and editing these documents, and I want to make it as easy as possible, while still allowing for defaults to be overridden.

Do you have a ‘best practices’ document that maps out the setup required for this?

Thank you!

Karl Forsyth

Hi Karl,

When you create fields, you can add additional settings to it. Those settings are available to the editor, and you can turn those values into inline styles to suit your needs.

Generally speaking, I’d try to not get too granular when it comes to overrides though. Giving users the ability to set different fonts, line heights, text colors etc per block is going to result in a lot of different styles, losing the consistency.

What I tend to do instead, is adding a “type” dropdown. If you have a heading, its standard type is just a straight up <h2>, but you can also add a type that displays it with a line in the background, which may have slightly different markup and a class on an element that you can target from your CSS.

The same can be done with other types of content where the user will need to have different visual styles, without needing them to remember exactly what combination of font attributes/margins/sizes/colors to use to achieve the effect.

The demo site at demo.modmore.com also has a similar setup that you could look at for inspiration.

Depending on the editor you’re using, you may need to enable font colors. Redactor has a plugin for it, which I believe is off by default.

Just what I needed. Thank you!

Followup question: I’m in the Demo site manager, [Extras-Content Blocks], editing a “Full Width” layout. I see in the layout settings tab, the “Background Image” setting has “Image” selected as the Field Type.

In the version of Content Blocks I installed on my system, there is not an “Image” option in the Field Type drop-down list. How / where do I add the “Image” Field Type, so it appears on the drop-down list?

Thank in advance,

Karl Forsyth

The image setting type is new in 1.7, which you can install as a pre-release at the moment. See the announcement and the notice at the top: https://www.modmore.com/blog/2017/contentblocks-1.7/