So far, the changes to your Magento theme have been fairly simple and largely limited to configuration within Magento itself. This chapter looks more deeply at customizing templates within your Magento theme to start making more complex changes to your Magento store's look and feel. In this chapter, we will cover the following topics:
- Providing some simple layout styles for your Magento theme
- Customizing your store's header
- Customizing the search box
- Adding a static block to a template
- Customizing your store's footer
- Customizing your store's checkout and cart
The first thing you can provide for your Magento theme is some basic CSS to define the column's width and layout. Before you do this, you can use a simple CSS reset to remove unnecessary margins and padding from the elements:
* {
margin:0;
padding:0;
}
img {
border:0;
vertical-align:top;
}
a {
color:#1e7ec8;
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
:focus {
outline:0;
}Tip
An alternative to CSS resets is normalize.css, which you can download from http://necolas.github.io/normalize.css/.
To do this, you can make use of what is provided in Magento's Default theme. Open the styles.css file in the /skin/frontend/default/default/css/ directory and you will see a block of CSS that begins:
/* Layout ================================================================================ */
.wrapper {
min-width:954px;
}
.page-print {
background:#fff;
padding:25px 30px;
text-align:left;
}
.page-empty {
background:#fff;
padding:20px;
text-align:left;
}
.page-popup {
background:#fff;
padding:25px 30px;
text-align:left;
}
.main-container {
background:#fbfaf6 url(../images/bkg_main1.gif) 50% 0 no-repeat;
}
.main {
background:#fffffe url(../images/bkg_main2.gif) 0 0 no-repeat;
margin:0 auto;
min-height:400px;
padding:25px 25px 80px;
text-align:left;
width:900px;
}Copy this into your own theme's styles.css file, in the /skin/frontend/default/m18/css/ directory you previously created, and adapt it to remove any mention of the default theme's color and images:
.wrapper {
min-width:954px;
}
.page-print {
background:#fff;
padding:25px 30px;
text-align:left;
}
.page-empty {
background:#fff;
padding:20px;
text-align:left;
}
.page-popup {
background:#fff;
padding:25px 30px;
text-align:left;
}
.main-container {
background:#f6f6f6;
}
.main {
background:#fff;
color: #333;
margin:0 auto;
min-height:400px;
padding:25px 25px 80px;
text-align:left;
width:900px;
}Magento themes typically provide three different page layouts to be used: one-column, two-column, and three-column templates. The next block of CSS you can copy from the /skin/frontend/default/default/css/styles.css file is the CSS that defines the width and position for each of these layouts:
.col-left {
float:left;
padding:0 0 1px;
width:195px
}
.col-main {
float:left;
padding:0 0 1px;
width:685px
}
.col-right {
float:right;
padding:0 0 1px;
width:195px
}
.col1-layout .col-main {
float:none;
width:auto
}
.col3-layout .col-main {
margin-left:17px;
width:475px
}
.col3-layout .col-wrapper {
float:left;
width:687px
}
.col2-set .col-1 {
float:left;
width:48.5%
}
.col2-set .col-2 {
float:right;
width:48.5%
}
.col2-set .col-narrow {
width:32%
}
.col2-set .col-wide {
width:65%
}
.col3-set .col-1 {
float:left;
width:32%
}
.col3-set .col-2 {
float:left;
margin-left:2%;
width:32%
}
.col3-set .col-3 {
float:right;
width:32%
}
.col4-set .col-2 {
float:left;
margin:0 2%;
width:23.5%
}
.col4-set .col-4 {
float:right;
width:23.5%
}
.col2-left-layout .col-main,.col3-layout .col-wrapper .col-main {
float:right;
}
.col4-set .col-1,.col4-set .col-3 {
float:left;
width:23.5%
}The preceding CSS alters the width of the columns based on which particular layout is in use, for example, if a page is using a three-column layout, the column widths are adapted so that all three columns can be contained within one row of your page, rather than displaying them above and below each other.
Next, you will need to specify an additional layout for the header and footer areas of your theme:
.header-container, .footer-container {
background: #f6f6f6;
}
.header, .footer {
margin: 0 auto;
width: 930px
}Finally, to complete the layout, you will need to include CSS to clear the floating elements used in your layout, again taken from the bottom of the styles.css file in the /skin/frontend/default/default/css/ folder and copied into the bottom of your styles.css file in the /skin/frontend/default/m18/css/ folder.
If you now refresh your Magento store's frontend, you will see the effect this CSS has had, overwriting the default theme's previous styling, but retaining the column layout of the store as you can see in the following screenshot:
As you can see, this provides a basic starting point for your custom Magento theme, but there's still much work to be done!