How to Add Some Style To Your Magento Store

Which File Should I Edit?

A new front-end developer could be overwhelmed with the amount of files Magento comes with. Just take a look at the /app/design/frontend/base/default/template or the /skin/frontend/entreprise/default/css. and you’ll know what I’m talking about (if you didn’t fall asleep reading that path).

Not only are there a lot of files, but the folder structure could also be confusing to an untrained eye. What if the client ask for a Responsive Site? Don’t be scared. In the end it’s most likely you’ll never end up modifying all the files.

Based on your clients needs, it is up to you to choose which files to modify. Without any doubt the file you will most certainly edit for every Magento installation is styles.css (located at /skin/frontend/entreprise/default/css). This file alone comes with 2,314 lines of code just for the default Magento look & feel.

Should I Edit styles.css or Create a client.css?

A decision you’ll have to make is whether to edit the styles.css file directly or to create a new CSS file for your client to overwrite the Magento default rules. There’s no good or bad / true or false answer to this. Whatever file you choose to create/modify is entirely up to you and your company’s best practices.

Most likely the designer will try to see if you made a good rendition to his design. The client will see if the business side is working properly and his functional needs were achieved with the design & Magento implementation. They won’t know / care what files you edited in the end. They will all love to have their sites look as good as the sites of the week.

You can edit styles.css directly. Look for the rule you need to make changes to and overwrite it. This is the easiest solution. You’ll keep less files on the system. Only one file needs modification. All your classes are there. However you’ll never know what rules came by default from Magento and what rules you added. They will all be mixed. Sometimes you’ll need to differentiate your modifications from the original CSS and this solution won’t work.

A simple way to solve this will be to add all your new rules at the end of the file to target your changes overwriting the previous rule. you’ll know from line 2,315 forward all changes were made by you. You can also add a Comment Block to denote your starting changes something like this:

/********* From here on, new CSS for client XXXX *****/

This will make your code easy to find and maintain in the future. But since you have gone to all this trouble why don’t go one step forward?

Create a new file (let’s call it client.css) that will only contain the rules you need to overwrite Magento defaults. You’ll now know easily the file that needs modifications and what are your changes against Magento defaults.

Don’t forget to add your new file on the /app/design/frontend/enterprise/client/layout/local.xml file


	 
		
			
				css/client.css
			
		
	 

Consider The Following

I personally choose the client.css solution.

It is up to you to decide which is your best solution. No matter what solution you choose, just take into consideration the following:

– What will happen when the client asks for a small change on the front-end that requires modifications to the CSS?
– Will it be easy to find? Will you or your fellow developers know easily how to locate your main CSS file?
– Will you all try to guess the rules on styles.css file?
– How much time will it take to make a simple CSS modification?

Related Articles