Post by leatherbaz » Mon Mar 02, 2015 1:09 am

Hey guys,

I'm using the default theme and starting to make some progress :) I'm a complete technophobic and can't do coding or HTML but I'd like to change the colour of the category bar at the top and another couple of buttons so it's the same greys as they website uses.

Would there be anyone able to help me do it? It would be much appropriated!

Thank you!
Ben

New member

Posts

Joined
Wed Feb 25, 2015 8:04 am

Post by gedielson » Mon Mar 02, 2015 9:34 am

You need some CSS knowledge to do this. Open public_html/catalog/view/theme/default/stylesheet/stylesheet.css and find (line 180 in OC 2.0 or line 191 in OC 2.0.1.1):

Code: Select all

#menu {
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	min-height: 40px;
}
Remeber that here the linear-gradient overrides the background-color. If you want a solid color, just remove "background-image" and "background-repeat" lines, and change the "background-color" by the desired color.

http://gepeixoto.com.br


User avatar
New member

Posts

Joined
Wed Oct 01, 2014 7:37 am
Location - Brazil

Post by viethemes » Mon Mar 02, 2015 9:46 pm

You may like my own extension Live Theme Editor to customize your theme completely. You will don't need to know about coding.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by gedielson » Tue Mar 03, 2015 4:37 am

The extension works like a charm! But if you still want to change only the header, the code above is the original css. So, find it and just remove the following:

Code: Select all

background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
   background-repeat: repeat-x;
Now, in background-color:, replace the #229ac8 by your desired color code. Here is a free online tool where you can choose a color and get the code:
http://www.colorpicker.com/

http://gepeixoto.com.br


User avatar
New member

Posts

Joined
Wed Oct 01, 2014 7:37 am
Location - Brazil
Who is online

Users browsing this forum: No registered users and 7 guests