Magento: How to modify a theme and stay sane.
“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.
- Make a file called child.css (or whatever name makes sense to you.)
- Put a comment at the top between /* and */ that explains what this file is modifying.
- put a line like this: @import url(“styles.css”);
- 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.
Subscribe to "The Integration Engineer" by Email
Find out about the tools and services available at The Integration Engineer's Consulting site.
