Basics of stylesheet in opencart

In the previous section we saw how to launch shopping cart using opencart, After installing the Opencart the user might want to do some changes in the default or other templates installed.  Tried to explain the elements of stylesheet.css mapped with the default template.

The easier way to map stylesheet elements with template is by using the firebug tool which was explained in previous blogs.

Below is the Default template of the Opencart after installation.

Style sheet.css can be found in the theme folder. Example below using the default template provided by opencart.




Search for #header in stylesheet.

#header {  code..  }

#header can be used for making changes in the header section part.



Inside this Opencart Header, if changes to be only in Opencart Menu, then Search for #menu in stylesheet.

#menu  { code… }

The Menu color and shadow color can be changed using background and box-shadow.

background: #585858;
box-shadow: 0px 2px 2px #DDDDDD;


Header Links:

Search for header links for making changes in the header links.

#header .links { code.. }

Use “right” & “bottom” elements in #header.links to change the position of header link.


welcome text:

Search for header welcome to change text color in “color” and position the text using “right” & “top”

#header #welcome{ code..}



search for #header # search, you can change the color using “background” and change the length using “width”

#header #search { code.. }


shopping cart:

Related Elements for Shopping cart are

#header #cart { code.. }

#header #cart .heading{ code..}



#currency{ code..}

To reposition currency, search for currency in the template.



#header #logo { code..}

To Position the Logo in the template, Search for Header logo.


Categories & Featured box heading and content:

.box{ code.. } 
.box .box-heading { code..}  -> Changes in this affects all the boxes heading like category, featured, Latest..
.box .box-content { code..}  -> Changes in this affects all the boxes content like category, featured, Latest..


Featured Image & Add to Cart:

In Featured, the product, product name, product price, product add to cart button can be referred using.

.box-product .image
.box-product .name a
.box-product .price


Template Footer:

Search for #footer in stylesheet.

#footer{ code.. }

This can be used as a reference for any changes required in the template.

One thought on “Basics of stylesheet in opencart

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.