Considering re-organizing my custom CSS styles

[earmsby]

Hi,

I'm in the process of upgrading a client's store from 1.5.5e to 1.5.6. His store has been around for a while and uses a customized template. Re-doing the stylesheet changes is becoming a pain in the you know what so I was thinking revamping the way the stylesheet is set up.

Will I have problems if I simply copy the stylesheet from template-default/css to MY_CUSTOM_TEMPLATE/css and just put all the custom styles at the bottom? I'm assuming that the nature of CSS means that anything I add to the bottom will override css rules earlier in the stylesheet. Doing it this way seems to me like it will make future upgrades a bit easier to re-do.

Thoughts?

[DrByte]

Stylesheet files in your template's css folder are automatically loaded, alphabetically.

The simplest way to separate your customizations is to create an added file (I've seen people call it stylesheet_custom.css), instead of touching the original. Then, when it loads after the main one, yours will override, like you were anticipating.
Then, for future upgrades, you can compare the main stylesheet.css file for changes made between versions, and if none of those are related to any of your customizations in your custom file, you can just copy that stylesheet.css file over from the new. And if any are related to your custom stuff, update your custom stuff accordingly if necessary.

But, unless your template was actually built from template_default, I don't recommend pulling that stylesheet.css file. Instead, pull the one from whatever your template came from. So, if it was originally built from responsive_classic, that's the main stylesheet.css you want to use. You'll need to find whatever your template was built upon. If that can't be determined (such as a totally custom template), then use the original that you got with that template, and manually maintain your own custom css file for your customizations.

Lots of words there, but the concept is simple.

[earmsby]

Ah, ok. Sounds simpler.

So, do I just put this additional stylesheet in my template css folder or in the main one? And do I still copy the stylesheet from template_default to my custom template css folder? Or does the css from template default load when there is no main stylesheet in the custom folder? Not sure if my question is clear - basically just trying to figure out where these stylesheets belong.

[DrByte]

You started with a template, let's call it "fred".
(Maybe it was originally "responsive_classic", or "downloaded_from_a_designer", whether bought or free)

That template had:
/includes/templates/fred/css/stylesheet.css
Ideally you want to keep it as-is, unchanged. If you've put your own custom stuff into it, move those sections/changes to a custom file, like in the next sentence:

Put your custom styles, whether to add to or override those, into:
/includes/templates/fred/css/stylesheet_custom.css


I SPECIFICALLY didn't tell you to copy css files from "template_default" because the template_default/css/stylesheet.css is intentionally ugly (used to give visual cues for designers), and not designed for live sites. You want the stylesheet.css that came from the template you originally built your current template from.

[earmsby]

Ah, I see. Thanks for explaining.