Layout Structure in OpenCart: Setting basic style properties

We have reset browser style properties. Now, we will apply our style to our site. There are some basic styling concerns.

1.  Getting started

We are going to use the basic styling properties in this recipe. 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

We will have to do the following simple steps:

  1. We need to set border properties and letter spacing for our site For this, we use the following styling attributes. We will add it at the beginning of stylesheet. css.

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,

blockquote, pre, address, code, del, dfn, em, img, q, dl, dt, dd,

ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, br,

fieldset, textarea

{

border:0 none;

letter-spacing:0.5px;

}

  1. We can use any convenient value for these After setting the style, we will see the letters move slightly from each other.

  1. Here, the letters are moved slightly from each

  1. We can also add a value to our line height So, the code looks like the following:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,

blockquote, pre, address, code, del, dfn, em, img, q, dl, dt, dd, ol,

ul, li, table, caption, tbody, tfoot, thead, tr, th, td, br,

fieldset, textarea

{

border:0 none;

letter-spacing:0.5px;

line-height:15px;

}

  1. We have added 15px to the line height And this makes the following changes to our site:

  1. You can easily find the difference by changing the value of this Each row now has a greater height.
  1. Now, we can apply two other properties: vertical-align and word-spacing. See the following code block:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,

blockquote, pre, address, code, del, dfn, em, img, q, dl, dt, dd,

ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, br,

fieldset, textarea

{

border:0 none;

letter-spacing:0.5px;

line-height:20px;

vertical-align:baseline;

word-spacing:1px;

}

  1. By applying word-spacing, each word of our site will move away from each We have applied 1 pixel here. You can make an adjustment of this value. The following image shows the spacing between two consecutive words:

  1. We will format the heading text styles We will set font size, font weight, and colours of these properties. We will use the following code block for this purpose:

h1{

font-size:20px;

}

h2{

font-size:19px; padding: 4px;

}

h3{

font-size:16px;

}

h4{

font-size:15px;

}

h5{

font-size:14px;

}

h6{

font-size:13px;

}

  1. Here, we set the font size of some heading styling properties. We can adjust the font size according to our need. We set it for the overall site. But, it will not affect the styling of the main container as there is also a styling property available under the content We will see how to change it. We need to change the heading text colours and the font weight now:

h1,h2,h3,h4,h5,h6{

color:#3f3f3f;

font-weight: normal;

}

  1. Our heading styles are Now, we will change the font colour for our site. Also, we’ll set some other attributes for all over the site.
  2. We first set our font colour to #666666.

body {

color:#666666;

}

  1. We can find the changes by visiting the site:

  1. We also apply our font size for the So, the code block changes to this:

body {

color:#666666;

font-size:13px;

}

  1. Our changes will not be available into the site as there is also some styling in the default CSS that sets the font

body, td, th, input, textarea, select, a {

font-size: 12px;

}

  1. We remove this code from the So, the fonts get bigger now.

  1. You have to add a style for the font family also:

body {

color: #666666;

font-size: 13px;

font-family: Arial, Helvetica, sans-serif;

}

  1. There is also another font styling for the overall site in the default CSS file:

* {

font-family: Arial, Helvetica, sans-serif;

}

  1. We will remove this
  2. We add another property to the body We set the text decoration property to none. So, the code block becomes like the following:

body {

color: #666666;

font-size: 13px;

font-family: Arial, Helvetica, sans-serif;

text-decoration: none;

}

  1. We set a colour attribute to the anchor tag for our

a {

color: #0066CC;

}

  1. But the default style comes up with another styling for anchor

a, a:visited {

color: #1B57A3;

text-decoration: underline;

cursor: pointer;

}

  1. We remove this So, the style becomes like this:

  1. We will add the following style to our anchor tag:

a {

color: #0066CC;

text-decoration: none; outline: none;

}

  1. In the browser, we can see the changes like this:

  1. For anchor-related styling, we will apply the pointer property to our See the following code:

a {

color: #0066CC;

text-decoration:

none; outline:none;

cursor: pointer;

}

  1. And now, we add a hover effect to our anchor style:

a:hover{

color: #CC6600;

}

  1. On hovering, the text color There is a CSS styling property on the default CSS file.

a:hover {

text-decoration: none;

}

  1. We will remove
  1. Now, we need to add some margin to some HTML elements:

h1, h3, h5, h6, dl, ol, ul, pre, table, address, fieldset {

margin-bottom: 10px;

}

  1. There will be a wide space after applying this style:

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.

Leave a Reply

Your email address will not be published. Required fields are marked *