Understanding Magento CSS

Last modified by NE Computer on Sat, January 10, 2009 19:54
Source|Old Revisions  |  Back To Group

This document can be used and referenced with the Wiki Article Titled "Understanding Magento PHTML"

The Magento CSS Frontend Files

In the default interface under the default theme located by going to website/path/skin/frontend/default/default there is a css folder.

Inside this folder there are seven css files by default.

  • boxes.css
  • clears.css
  • ie7minus.css
  • iestyles.css
  • menu.css
  • print.css
  • reset.css

Some are self explanitory while others you may need more information about. One of the important files listed is the boxes.css file.

This file controls the style of items such as:

  • Columns [1-Column, 2-Column, 3-Column, etc page views]
  • Form Styles
  • Message Styles
  • Buttons
  • Header and Footer
  • Backgrounds
  • And more of the main design styles for your store’s front end


As stated above the boxes.css file is one of the more important files within the Magento frontend design. We are going to drill down in the file and explain some of the parts of the files and how to make adjustments. Note you will want to build a new theme folder and copy any of the files that you are going to change before making actual changes. This will guarantee that you have a working theme to fall back on.

body {}

The body control in the css file controls the area where the content goes. This is the white area in the center of the page that adjusts for the height of the page. (if you don’t limit the height) By default this is set as:

background:url(../images/main_container_bg2.gif) repeat-y 50% 0 #58645a;

if you follow the link by going to skinfrontenddefaultdefaultimagesmain_container_bg2.gif you will see what the image looks like.

A user can create a new or modify the existing image with an application like Photoshop to change the look and color of the image.

Page Heading

Default Location [file:boxes.css line:211]

The Page Heading area of the boxes.css style sheet is where Magento controls the head components of the site. This is not to be mistaken as the controlling css for the header of the site, where the logo, menu, and such are located.

Page Structure

Default Location [file:boxes.css line:347]

This is where the general structure of the page’s style is controlled.

.wrapper {}

Default Location [~line:350]

The .wrapper is where the size of which the pages in the site will fit in. By default this is set to min-width:954px;, this means that the minimal size the width the store pages will fit to is 954 pixels. You can change this to increase the minimum with size or you can set a static size wrapper of which all the pages will be forced to fit to.

.header {}

Default Location [line:351]

info needed

.header-top {}

Default Location [line:352]

This class controls approximately the first inche or two (in the default store) along the top portion of the website. In the default store this is the entire area where the Magento Demo Store logo is and the search box along with links are located. This does not includes the navigation menu. Remember this class is to control the structure of the page header and is not meant for styling the header with backgrounds and such. This is done to create an organized method of logic for controlling the design. This will be done later in another area of the boxes.css style sheet.

.header-nav {}

Default Location [line:353]

This class controls the navigation menu that runs just underneath the header where the logo and search box are located. Remember this only controls the structure of the navigation portion of the header and should not be used to stylize the navigation menu.

.middle {}

Default Location [line:354]

This class controls the structure for the middle portion of the site. I like the call this the body portion of the website. Remeber this only controls the structure and not the stylizing of the middle area.

By default the middle portion is set with a width of 900 pixels. This is what actually creates the nice alignment of the page. The header-top is at a 930px width the header-nav is at a 950px width and the body is at a 900px width. The way the styling is done and the images are placed the different sizing actually create a clean look.

Also the min-height is set to 400px which means that the height of the middle will always display at least 400px high or more. If your page grows longer the height will adjust appropriatly. This is needed to allow for standardization among all of the pages in the default theme. Users should not set the height to a static size (ie: height:400px;) because this will not allow for adjustment as the page grows in length.


NOTE: Insert more detailed information about clears.css


NOTE: Insert more detailed information about menu.css


Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs