Blog about concrete5 cms

concrete5 recommends using additional typography.css stylesheet within a theme. I noticed that sometimes people don’t understand the purpose of the file and put there much trash, which shouldn’t be there. So what is typography.css and where it is used?

If you search the concrete5 source code, you’ll find only one case when typography.css is used: it is plugged by TinyMCE WYSIWYG editor in the default "Content" concrete5 block. In other words, this is the stylesheet being used in an editable content area when WYSIWYG is open. So if you place there something like

body {
  text-align: center;
}

It will completely mess your WYSIWYG area making all the text go centered. The final result might be ok (most probably you use some blocks with classes to align the content properly), but editing is a little confusive when you see centered text in edit mode and aligned to left in the final.

So, the first advice is to think twice before moving anything from general stylesheet to typography.css.

By the way, if you are just playing with typography.css, you might be confused by the stylesheet being cached. There is a workaround: open ‘concrete/blocks/content/editor_config.php’ and find the following line:

	content_css : "<?php echo $theme->getThemeEditorCSS(); ?>",

and change it in the next way:

	content_css : "<?php echo $theme->getThemeEditorCSS() . "?" . time(); ?>",

This will add timestamp to the stylesheet URI every time, so it won’t be cached. Don’t forget to remove this workaround once you are ready.

So, what should finally go to typography.css? Consider this:

If you have some global style defined through body and it is not changed in subsequent classes, use it. For example: font colors and font families are often defined globally for the whole content:

body {
    font-family: Arial;
    color: #393939;
}

If you have some style that is applied to ALL links, use it as well:

a {
    color: #393999;
    text-decoration: none;
}
a:hover {
    color: #3939c9;
    text-decoration: underline;
}

And if you have global styles for headings of any level, move it to typography.css as well:

h1 {
   font-size: 30px;
}
h2 {
   font-size: 22px;
}
h3 {
   font-size: 16px;
}

We hope this tutorial helps some developers build better concrete5 themes.