Stop Your Themes CSS Styles Interfering with the concrete5 Interface

Stop Your Themes CSS Styles Interfering with the concrete5 Interface

Use Sass to quickly and automatically append your custom class to all of your CSS style sheets


Article by admin / / Comments / Difficulty 
Stop Your Themes CSS Styles Interfering with the concrete5 Interface

You may have noticed that often when developing themes for concrete5, the styles can ‘leak’ into the concrete5 block interfaces and dashboard. Apart from this being most undesirable in terms of styling, it is also a big issue if you are thinking of submitting your themes to the PRB.

Starting From Scratch

If you have not yet started the development of your theme, then you are in good shape and this section is for you. If you have already written your CSS style sheet then don’t despair please just skip to ‘Fixing the Problem’.

The key to success here is to make sure that all of your styles within your ‘main.css’ & ‘typography.css’ files are ‘wrapped’ with a unique ‘class’ or ‘id’.

For example you may write:

h1 {
font: arial;
font-size:32px;
text-transform:uppercase;
color:#666666;
}

Instead you should consider writing this:

.your-wrapper-class h1 {
font: arial;
font-size:32px;
text-transform:uppercase;
color:#666666;
}

Where .your-wrapper-class is relevant to your project or site. This can technically be anything you like but keeping this quite personal and specific helps stop conflicts.

By wrapping all of your CSS in this way, the styles will only apply to elements that sit within that class - which brings us to the second thing you need to do; add a ‘Wrapping Div’ to your markup.

Adding the Div

Open up the file within your theme that contains the <body> tag. Just inside this you will need to open a new div matching you naming convention; so for example <div class="your-wrapper-class">. Don’t forget to also close this with </div> just before the </body> tag.

Fixing the Problem

If you are reading this then the chances are you have already laboured over your CSS for hours on end only to find out that to avoid any ‘CSS Leak’ into the concrete5 system you should have wrapped every declaration in a ‘Wrapping Div’.

Don’t worry, we’ve got your back.

Since the invention of a little thing called Sass, you no longer have to manually go through thousands of lines of code appending class names - Sass can do this for you, what’s more you don’t even need to install Sass or even know how to use it.

The answer to your impending problem is http://sassmeister.com/.

Simply copy and paste your entire CSS (one file at a time) in to the window on the left over at http://sassmeister.com/ wrapped in your ‘Wrapping Div’, like so:

.your-wrapper-class h1 {
All your CSS goes here...
}

Sass Meister will run its magic and append your class name to everything in the CSS - magic! Simply copy and paste the code from the right window back into your stylesheet and you are done.

Join the conversation

comments powered by Disqus