Change header and text colour

Quote

Post by allybruce » Sun Dec 18, 2011 8:21 pm

How do i go about changing the text and main categories header color in my stylesheet.

Thanks
allybruce
Newbie
Posts
9
Joined
Sat Dec 17, 2011 7:44 pm
Top

Re: Change header and text colour

Quote

Post by billyggla » Sun Dec 18, 2011 8:26 pm

It is in the #menu section of stylesheet.css
billyggla
Active Member
Posts
170
Joined
Mon Sep 20, 2010 7:05 am
Top

Re: Change header and text colour

Quote

Post by allybruce » Sun Dec 18, 2011 8:30 pm

Yes it is. is the header where the main categorizes is listed? it has a black background with Text
allybruce
Newbie
Posts
9
Joined
Sat Dec 17, 2011 7:44 pm
Top

Re: Change header and text colour

Quote

Post by billyggla » Sun Dec 18, 2011 8:34 pm

they are listed in header.tpl
billyggla
Active Member
Posts
170
Joined
Mon Sep 20, 2010 7:05 am
Top

Re: Change header and text colour

Quote

Post by allybruce » Sun Dec 18, 2011 8:40 pm

i am in the Header tpi. where do make the changes. also how do i change the main text colour on the website. thanks
allybruce
Newbie
Posts
9
Joined
Sat Dec 17, 2011 7:44 pm
Top

Re: Change header and text colour

Quote

Post by billyggla » Sun Dec 18, 2011 9:12 pm

The changes need to be made in:
/catalog/view/theme/default/stylesheet/stylesheet.css

NOT in header.tpl

in /catalog/view/theme/default/stylesheet/stylesheet.css

Look for:

Code: Select all

/* menu */
#menu {
	background: #585858;
	border-bottom: 1px solid #000000;
	height: 37px;
	margin-bottom: 15px;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;
	padding: 0px 5px;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu > ul > li {
	position: relative;
	float: left;
	z-index: 20;	
}
#menu > ul > li:hover {
	background: #000;
}
#menu > ul > li > a {
	font-size: 13px;
	color: #FFF;
	line-height: 14px;
	text-decoration: none;
	display: block;
	padding: 12px 15px 11px 15px;
	z-index: 6;
	position: relative;
}
#menu > ul > li > div {
	display: none;
	background: #FFFFFF;
	position: absolute;
	z-index: 5;
	padding: 5px;
	border: 1px solid #000000;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-khtml-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul {
	display: table-cell;
}
#menu > ul > li ul + ul {
	padding-left: 20px;
}
#menu > ul > li ul > li > a {
	text-decoration: none;
	padding: 4px;
	color: #FFFFFF;
	display: block;
	white-space: nowrap;
	min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
	background: #000000;
}
#menu > ul > li > div > ul > li > a {
	color: #FFFFFF;
}
Make changes to that..

To change the text color for the rest of the site, search stylesheet.css for the areas you want to change.
billyggla
Active Member
Posts
170
Joined
Mon Sep 20, 2010 7:05 am
Top

Re: Change header and text colour

Quote

Post by allybruce » Sun Dec 18, 2011 9:40 pm

I have made changes please check that is correct. Thanks



ul > li > div {
display: none;
background: #0AE4F4;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #0AE4F4;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #0AE4F4;
allybruce
Newbie
Posts
9
Joined
Sat Dec 17, 2011 7:44 pm
Top

Re: Change header and text colour

Quote

Post by billyggla » Sun Dec 18, 2011 11:45 pm

The top part of the code is missing, and you have made a background color the same as a text color..

In the #menu code change all references of background: to the background color
and all references of color: to the text color

Remember to save a copy of your original file...
billyggla
Active Member
Posts
170
Joined
Mon Sep 20, 2010 7:05 am
Top

Re: Change header and text colour

Quote

Post by BasheeraDesigns » Mon Nov 19, 2012 10:33 am

How do I extend the color background of the header? I want to make a color block in header section that looks like the black background header like this: http://livedemo00.template-help.com/opencart_38888/
Posts
18
Joined
Thu Aug 23, 2012 1:58 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 1 guest