Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

Function of typography.css


Reply

5 Posts   2879 Views

Avatar
Leslie

27 March 2010 at 5:13am Community Member, 6 Posts

Hi,

Silverstripe v2.3.6

When I change .typography h1 in typography.css, the result is visible in the CMS editor. Great ! However I see no change on my actual website.
In order to make the same change also appear on my website, I have to add an extra line with h1 without the .typography class in typography.css

Is this correct or should the .typography class change both the CMS editor and the website? Or is it better practise to use a seperate css to style my website? If so, how do I make sure that that specific css is loaded?

Hope you can help me understand the function of the typography.css? (I have really spend time reading about this subject but its just not clear to me)

Leslie

Avatar
Hamish

27 March 2010 at 9:05am Community Member, 712 Posts

hard to say without knowing what theme you are using or what your html looks like. if you are using something like the default theme, don't forget that changing .tyopgraphy h1 will only change styles within the main content area, so if you want to modify they main page heading you will have to use a h1 selector without the .tyography bit.

note also that a tool like firebug for firefox and ie8/chrome developer consoles can show you what css styles are applied or overwridden for a particular element, and what stylesheet they came from.

Avatar
Leslie

27 March 2010 at 10:34am Community Member, 6 Posts

The theme I use is a theme with just a header for a loge, a navigator with a menu and a main container for content. I will take the content from another website which is not really much more than headers and paragraphs, so nothing advanced.

I can see that changing .typography selectors is changing styles in the main container in TinyMce but not on my actual site itself. In order to change styles on the site itself I use the h1 selector without the .typography bit. (Like you mentioned). This way the style of my content in TinyMce starts looking a bit like the actual website. I think that brings TinyMce closer to a WYSIWYG editor, something I prefer.

I have no doubt that I can make it work but I would like to know if that is the right approach? On some sites it is said that using the plain selectors (h1 for instance) without defining a class like .typography is not really the right way?

I haven't found any documentation on this subject that explains the ins and outs really well without getting to technical.

Avatar
Willr

27 March 2010 at 3:53pm Forum Moderator, 5511 Posts

I little bit of documentation about it on http://doc.silverstripe.org/doku.php?id=css#wysiwyg_editor_stylesheet_typography.css_editor.css.

Basically the purpose of the file is to 'share' styles between cms and the front end. The editor in the CMS is wrapped with a .typography class and your main section in your theme should be wrapped with a .typography class as well. Your theme may not be changing because another stylesheet has a more specific styling applied to do it.

Avatar
Leslie

27 March 2010 at 7:43pm Community Member, 6 Posts

I checked with the developer tools in IE8 what CSS applied the style. Then I read the article and made a change in my page.ss file.

ContainerWide is the container that I was worried about.

<div id="ContainerWide">
<div id="Content" class="typography">
   $Content
   $Form
</div>
</div>

Now I've got the result that I want. When making a change in Typography.css it now reflects in the editor and in the container on my web page.

Thanks,

Leslie