How to Create Large Header in Opencart Template

Here is a Quick Guide to change the default opencart header to Large header & changes in the header area. More details on the elements for entire default template is explained in the previous section.

For Using the large header in the opencart,  In any image tool, just fill the blank rectangle area, height: 2.58 inch and width: 16.42 inch with black color. save the file as any image format & save in \catalog\view\theme\default\image\header.png

open \catalog\view\theme\default\stylesheet.css

Add the Header Image in Opencart Header Section:

Search for #header {

1. add background: url(“../image/header.png”) repeat-x scroll center bottom transparent;

2. change the  Height  from 90px to 190px;

By now the Large Header is placed in the Opencart Header Section. The elements in the header section can be repositioned.

To change the Opencart Logo position to Left centre of the header:

Search for #header #logo & change the Top from 25px to 75px.

To Place the Shopping cart to Right centre of the header:

Search for #header #cart & change  top from 0px to 80px and  right from 145px to -150px.

Search for #header #cart .heading & change the background color from #fff to #bbbbbb.

Search for #header #cart .heading a span & change the background color from #fff to #bbbbbb.

Search for #header #cart .heading a & change the background color from #38B0E3to #000000.

To Place the Currency to Right centre of the header:

Search for #currency & change left from 425px to 730px & top from 15px to 90px;

To Place the Welcome Text to Top Left of the header:

Search for  #header #welcome & change right from opx to 700px top from 47px to 7px;

To Place the Search to Top Right of the header:

Search for  #header #search & change right from 0px to 20px;

Search for  #header #search input & change background from #fff to #bbbbbb;

This will help to enhance the header look in default template.

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.