about styles.css & styles.base.css...

I am probably missing something obvious here but can someone please explain why the stylesheet is split into 2 like this - styles.css and styles.base.css?



The same selectors generally appear in both stylesheets with some styles in one and some in the other - why is this?



And sometimes the same styles are repeated in both stylesheets which seems strange - in this scenario, if I make a change to one of the styles, which stylesheet takes priority?.



Is there any reason why I should not be editing styles in both?



thanks

This is done to allow for some basic adjustments like “theme color” or button styles in various skins. Think of it like:

styles.base.css is the class definitions for the ‘basic’ skin.

each skin has it’s own unique styles.css which overlays the cascade from styles.base.css where desired.



Then when a new skin is installed, it only uses modifications of the styles.base.css instead of having its own separate css file. This should greatly reduce maintenance in the long run.



Note also that you can add your own stylesheet by implementing a hook and using customer/addons//hooks/index/styles.post.tpl file which should contain an html tag including your custom stylesheet.

Thanks Tony - I am still a little confused - please could you clarify for me?


[quote name=‘tbirnseth’]This is done to allow for some basic adjustments like “theme color” or button styles in various skins. Think of it like:

styles.base.css is the class definitions for the ‘basic’ skin.

each skin has it’s own unique styles.css which overlays the cascade from styles.base.css where desired. [/QUOTE]



If I understand you correctly, you are saying that all skins share a common styles.base.css and then each individual skin has it’s own unique styles.css (which make them different from each other while sharing the common “base” (Allowing for the fact that styles in the styles.css may overide the same styles in the styles.base.css) - right?



I have some confusion here because you said that “Think of it like:

styles.base.css is the class definitions for the ‘basic’ skin.” but the basic skin uses both the styles.base.css and the styles.css stylesheet.


[quote name=‘tbirnseth’]Then when a new skin is installed, it only uses modifications of the styles.base.css instead of having its own separate css file. This should greatly reduce maintenance in the long run. [/QUOTE]



This is where I get really confused as (the way I am reading it) your second statement seems to contradict the first. I would have thought that based on what you said first, when a new skin is installed, it only needs its own unique styles.css file and it can share the same styles.base.css as the other skins.



Also, please can you clarify why development time is saved using this method?



I have no doubt that your statements are not contradictory and it is my understanding which is at fault…Thanks for your help and patience.

Let me try to briefly clarify…

It’s like an object oriented approach.

All skins share some common styling (styles.base.css).

Each skin has its own unique colors, layouts, fonts, etc. These are applied in styles.css. This is like an inheritance.



styles.base.css is linked in first. Then comes styles.css which effectively replaces any differences in the class properties by overlaying them.



So to add your own css, you should link in your own stylesheet via the index:styles hook (for example styles.local.css).



You can either create your own classes, redefine existing ones completely or simply replace certain properties.



Hope this helps clarify…

Ah - now that I completely understand - thank you!

Hello,



I would like insert my CSS style in fckeditor… to select with “format” and “style” list button.



I tried to insert my code in :

classes/fckeditor/editor/css/fck_editorarea.css



but i don’t see in “Style” or “Format” my style, when I’m writing an article?

Do you know why?



I insert this style in style.css of my skin, and If write html code, it’s ok… But I would like select all my style with list button…



Thanks for your help.



gg