"Impossible!" You may say. "All of the good web designers I have known are certifiable." Well this may be true, but you don't have to go crazy just to modify a theme. ÂThe basic plan is that we take all the css changes and we put them in a "child" css that imports the original.

Here is how that works. The settings in the child over ride the original css. Thus settings in the child CSS override the same element setting in the original CSS file. ÂAnd changes can be grouped logically for manipulation of like changes, or whatever makes sense to you.

How to find all of something

The first thing we need to do is to find all of the settings that we are going to want to apply our change to. ÂLets use a color change as our example. ÂGrep is your pal here. ÂLets say we wanted to find all of the places where the color #D7E2C4 was used. ÂWe could issue the following command at the command line, (yes this is Linux or Unix only. ÂSorry windows users, but did you really install Magento on a Windows server?), while you are in the directory with your CSS files. Â(this are found in [Magento Root]/skin/frontend/default/default/css/ if you are using the default theme. ÂOtherwise you will need to replace the "default/default" with your theme's path.)

grep D7E2C4 *

This will return all of the lines where D7E2C4 occurs. Â(Grep is not fool proof, but it will work here 99% of the time.)

Next we take these lines that are returned, and we drop them into our child.CSS file and remove all of the non-color properties. ÂSo if one of your grep lines returns this:

.product-view .short-description { color:#B7AD85; font-size:12px; line-height:14px; font-family:Arial, Helvetica, sans-serif; padding:10px 0 0 0;}

You would change this in this manner:

.product-view .short-description { color:#B7AD85; }

Do this for all of the lines in the child CSS and you now have a block of lines that you can modify to over ride this color only.

(One thing to watch for is lines that your grep returns with only "color:#B7AD85;" ÂThese are not errors, some CSS files will have lines that have line feeds in them. ÂHopefully this will be a minority. ÂYou will have to go into the fine and dig out their attributes in order to make the override line.)

Most likely you will have more than one color that you want to change. ÂWhen that is the case, you will need to keep your child CSS lines in some order.

Make a blank CSS file for your child CSS

This is pretty straight forward.

  1. Make a file called child.css Â(or whatever name makes sense to you.)
  2. Put a comment at the top between /* Âand  */ that explains what this file is modifying.
  3. put a line like this: Â@import url("styles.css");
  4. goto the layout section of your theme and edit the page.xml and change the "styles.css" to "child.css"

As long as the file you are modifying is styles.css then you are good to go. ÂIf the CSS you are modifying is not style.css, then you will need to make the necessary changes to these steps.

How I organize my child CSS

For me, I organize my child CSS in a functional manner. ÂAnd to me, this means that all of the B7AD85 changes will be in a block. ÂAnd I lead them with comments. ÂSo if I have color changes, I start that section with /* This is a Color Change Section */ or something equally as obvious. ÂThen each color change in this section is in a block with another comment /* Color B7AD85 changed to 7C765B */ or something to that effect. ÂThis helps me know what the original color in the CSS file was, and what it is now.

Changing your color or other values

Some changes won't be this simple. ÂBut if you are just changing a color or a font style, then here is a quick way to get it done. ÂI use VI to edit my CSS. ÂIn VI, using a search and replace works like this.

:%s/[value to change]/[value to change to]/gc

This works like this.

  • :%s lets VI know you are doing a substitution.
  • /[value to change] is the current value.
  • /[value to change to] is the value that you want
  • /gc are flags, "g" makes it global, or executed on each line, and "c" lets you confirm Âor reject each replacement.

(I recommend the confirm flag so that you will notice if your substitution jumps out of the block you were intending to edit. ÂAnd so you can say no to the comments from being edited too.)

What about modifying other parts of a theme?

Alas, we will have to get to that later.

There are many other parts of a theme that can be edited. ÂPart of the power of Magento is the fact that it is open source and you are able to edit all of the files that make up Magento. ÂI hope to post some layout and phtml modifying posts soon.