Only dpapt colors in new stylesheet (without changing any default stylesheet)?

[Moto]

If I understand it right, every stylesheet in the folder "css" will be used / executed to style the template / shop. So could I just create a new stylesheet and do all the color changes this single stylesheet instead of modifying each or many of the default stylesheets (without changing any default css)?

How would I have to do it?

[schoolboy]

The fundamental "rule" for css is that it loads, and is obeyed (by the browser) chronologically. The browser will always take the very last css "command" for any given style element, and apply that.

So... if you have the following in a stylesheet:

#headerBox {background-color:#000000;}


... and in another stylesheet you have:

#headerBox {background-color:#ffffff;}

The browser has a "choice" of whether to show BLACK (#000000) or WHITE (#ffffff). ... and it will not allow such a conflict, so will apply the LAST instance of the declaration that it reads.

So it all depends on the ORDER in which the stylesheets are loaded into the browser, and if my (fading) memory serves me correctly, they are loaded in the order specified in html_header.php - or could it be alphabetically - I can't remember.

BUT there is a penalty to pay if you work like this. Essentially you are DUPLICATING declarations, creating more work for the DOM and slowing down your page speed - and with speed now being a MAJOR seo criteria, your laziness may result in poor Search Engine rankings.


Picaflor templates have well-organised stylesheets so make life a little easier, but what I do is do all my css configs on a LOCAL server, then when I am happy with the results, I MINIFY the css file(s) that I load on the web server. So I don't work on editing the web server copy. If I need changes, I do these on my local machine where the css is "bloated" - ie: not minified. Then, before loading an edited css file again to the web server, I minify it again, thus ensuring that the css files on the web server are as efficient as possible.

What you are proposing is indeed possible - but I would not do it like this... Search engines hate it.

[dbltoe]

The responsive stylesheets for 1.5.5* have the colors spread out through several stylesheets. You might want to take a look at https://www.zen-cart.com/downloads.php?do=file&id=2088 and see if that will help. Also recommend lat9's clone a template mod to "make it your own".

[Moto]

Thank you very much.

BUT there is a penalty to pay if you work like this. Essentially you are DUPLICATING declarations, creating more work for the DOM and slowing down your page speed - and with speed now being a MAJOR seo criteria, your laziness may result in poor Search Engine rankings.

Alright, so one should not do it in that manner, in no case.

If I need changes, I do these on my local machine where the css is "bloated" - ie: not minified.

But, why is that css bloated? Why not slim / minified?

Then, before loading an edited css file again to the web server, I minify it again

Is there a special manner how you are minifying it?

What you are proposing is indeed possible - but I would not do it like this... Search engines hate it.

Yes, yes, I won't do it.

You might want to take a look at https://www.zen-cart.com/downloads.php?do=file&id=2088 and see if that will help.

Many thanks for the link. Yes, so I simply can try to modify those css files.

Also recommend lat9's clone a template mod to "make it your own".

OK, so copy a template completely and use the copy instead of the original. I am not sure, what is the advantage of using a copy instead of just copy the (back up of the) modified css files to the server (after an update)?

Many thanks again

[lat9]

... OK, so copy a template completely and use the copy instead of the original. I am not sure, what is the advantage of using a copy instead of just copy the (back up of the) modified css files to the server (after an update)? ...

The reason that you'll clone a built-in Zen Cart template is to keep the changes that you're making separate. That way, when the next version of Zen Cart is released, you will have an easier time merging any changes you've made with the built-in updates.

It's kind of like having a record of what changes you've made.

[Moto]

So cloning appears to be easier than just copying the back up css files back after an update.

Many thanks

[lat9]

So cloning appears to be easier than just copying the back up css files back after an update.

Many thanks

Right, cloning the template helps to prevent those accidental file-overwrites on a Zen Cart upgrade and also makes it easier to "remember" which files were touched for your customized template.

[Moto]

OK, thank you very much!

[schoolboy]

Right, cloning the template helps to prevent those accidental file-overwrites on a Zen Cart upgrade and also makes it easier to "remember" which files were touched for your customized template.

To answer some of your earlier questions...

1. CSS minify.
The "bloated" file (on my local machine) is easier to work with and edit, because it is laid out to be visually logical. So, when making changes or additions, I can see better what's going on.

Minifying CSS is actually quite simple - and there are some online tools that will do it for you. Basically, it removes all unnecessary spaces, line-breaks and comment areas (eg: */ comment here /*). In some CSS files, all this unnecessary space and comments adds up to 40% more file data. Browsers don't need this stuff - it's for people. So, removing it brings the file size down quite a bit.

So what I do is (on my local machine), do all changes to a "bloated" (not-minified) copy. Then, when I have made my changes, I then run it through a minify program. Then, I take this minified copy and FTP it to the server. In this way, the Data in the bloated version (on my computer) and the minified version (on the web server) is always identical. ... That data being what is needed for the BROWSER to recognise.

GENERAL UPDATING AND EDITING
I never edit the server copies of files... I always FTP a copy to my local machine, keeping the folder/file structure identical to that on the server.

Then, if there is a file to edit, I do so on the LOCAL copy.

Then, I go back to the server's file and I change its name to XXXXXX.bak

Then, I FTP the edited copy from my local machine back to the server. This does not OVER-WRITE the server file - because that original file is now re-named with a .bak extension.

If I have messed up somewhere I just remove that copy I sent to the server, and rename the .bak copy to its original file extension.

Editing of files is always on my local machine's copy - never on a active file on the server.

I achieve several things doing it this way:

A. I don't risk overwriting a server file with one I have edited that may have mistakes.
B. The entire site's folder/file system is "mirrored" on my local machine, so is a real-time "backup".
C. Using the FTP program to track modified-date parameters, I can see WHEN I made changes to a file.
D. I also keep hand-written notes in a dedicated notebook/diary of all edit events.

[Moto]

Many thanks.

OK, the bloated css easier to handle.

Up to 40 %, I would not have thought it could be that much. So (even) comments, spaces, line breaks can noticeable slow down opening a page, obviously.

In this way, the Data in the bloated version (on my computer) and the minified version (on the web server) is always identical.

Besides of the chars / spaces / line breaks / comments, etc. deleted by that minifying program.

I never edit the server copies of files... I always FTP a copy to my local machine, keeping the folder/file structure identical to that on the server.

I assume, including the database(s).

Then, if there is a file to edit, I do so on the LOCAL copy.

Then, I go back to the server's file and I change its name to XXXXXX.bak

Then, I FTP the edited copy from my local machine back to the server. This does not OVER-WRITE the server file - because that original file is now re-named with a .bak extension.

If I have messed up somewhere I just remove that copy I sent to the server, and rename the .bak copy to its original file extension.

Editing of files is always on my local machine's copy - never on a active file on the server.

Yes, a good way, I will do it like this on XAMPP on my local system.

B. The entire site's folder/file system is "mirrored" on my local machine, so is a real-time "backup".

So you mirror the entire system from the server to your local drive shortly before you edit the files on your local system.

C. Using the FTP program to track modified-date parameters, I can see WHEN I made changes to a file.

So when you synchronize the next time you can see which files you have changed the last time.

D. I also keep hand-written notes in a dedicated notebook/diary of all edit events.

I tried that as well but it tunred out it is very complex.

Many thanks again