Before beginning our theme styling work, we must first reset all the styles. This will help us with cross-browser problems.
1. Getting started
We need to modify the stylesheet.css file of our new theme first. We will go to catalog\ view\theme\shop\stylesheet. And open up stylesheet.css in our favourite editor.
2. How to do it
- Now, we will add reset styles to our stylesheet.css file. First, we need to change the browser’s margin, padding, and border properties. We will set styles for several different HTML tags. We can add extra style properties into it:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
- We will see the effect of our code in our The product images will come closer now.
- We adjust the line height of body So, put the following code in the CSS file .
body {
line-height: 1;
}
- This also squeezes the lines in the body The following image depicts this:
- By applying the above style, the line height of these tabs becomes
- We need to reset the style for ordered/unordered list Hence, we use the following reset value:
ol, ul {
list-style: none;
}
- It shows all the ul, ol tags without the default bullet
- Now, we will reset the blockquote element We will find the changes if we use
blockquotes in our HTML code:
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
- For all the elements, we are going to change the focus-styling We change the outline properties to 0. We set the styles like the following:
:focus {
outline: 0;
}
- There could be some styling for insert and deletion in some So, we will use this styling for the purpose:
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
- We will control the styling of our tables We set the border and spacing qualities like the following:
table {
border-collapse: collapse;
border-spacing: 0;
}
- We still need to set the attribute cell-spacing to
- So, our reset styling becomes the following:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”; content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
We can place it at the start of our site’s style file stylesheet.css, or we can create a new file and put the content there also. To do that, just create a new CSS file within the catalog\ view\theme\shop\stylesheet folder. For example, we can name the new style file as reset.css. If we use a new style file, then we need to add the style file in the controller.
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.