zen cart top menu and side box font and color change

mmcatt
mmcatt used Ask the Experts™
on
website: www.luisaviaroma
template - pureblack free from zen cart

1) i want to change the font color on the top menu bar of this website: from white to grey (#666666)

2) I want to change the side box:
header backgrou from dark blue to white
font color from white to grey #666666
no underline for sub-catergory, font color from blue to grey #666666

Thanks a lot!!

MMCATT


Thanks!

MM
stylesheet.css
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011

Commented:
What is the full URL?  looks like the extension got dropped off.

I can take a guess that the top menu is in navMain, but without seeing the site, I cannot begin to guess where the other changes would go.:
#navMain ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

Open in new window


If you only want to change "mainNav" and not "navCatTabs", you break that into two sections and update the color accordingly
#navMain ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #666666;
	white-space: nowrap;
	}
#navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

Open in new window

@mmcatt: i can't find it either, but i just thought i'd mention... if you don't already have it, i would highly recommend using the "Firebug" add-on for Firefox.  It makes identifying where to make changes in which CSS file a real breeze.  Along with TONS of other useful features.  Firecookie, and Fireflow are also really good development add-ons that you may find useful for debugging these little headaches.
 

Author

Commented:
The website works fine here with my computer...

http://www.luisaviaromacn.co.cc/

or I click on any page - because they are on all the pages:


http://www.luisaviaromacn.co.cc/index.php?main_page=products_new

I will try your suggestion now.

Thanks a million!!

=^.^=
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
thanks for the tutorial...but it doesn't work....Maybe you didnot see the site...

 
#navMain ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #666666;
	white-space: nowrap;
	}
.legalCopyright {
	float: left;
	font: 11px verdana !important;
}

#navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #666666;
	white-space: nowrap;
	}

Open in new window


here is the screen shot after i change the code.

 screen shot
I want to have both menu + sidebar fonts are grey, so I can remove the background.

Thanks a lot!!

MM
Top Expert 2011
Commented:
top men bar from white to grey:
change
#tab_nav a {
    color: #FFFFFF;
    text-decoration: none;
}

Open in new window


to
#tab_nav a {
    color: #666666;
    text-decoration: none;
}

Open in new window


There are two different types of 'sideboxes" on the left. Which one are you wanting changed?  The one with the light blue or the two with the dark blue background?

Also... I don't see anything "underlined" in the left boxes.  Are you referring to the underline that appears when you hover over a link?
Top Expert 2011

Commented:
Yes - you tried the changes I made based on a guess of which styles went with the elements based only on their names.  The post above was made after you posted a valid URL for the site and I could inspect it using the Firebug add-on for Firefox.
Top Expert 2011

Commented:
I found a page that has underlines in the left sideboxes...
change:
A.category-subs, A.category-products {
    color: #0075E2;
    text-decoration: underline;
}

Open in new window

to
A.category-subs, A.category-products {
    color: #0075E2;
    text-decoration: none;
}

Open in new window

Top Expert 2011
Commented:
for the left side-box - presuming you are talking about the one that has the underlined links:

you need to replace the background image with a white image... or remove the image altogether and just use "background-color: #FFFFFF;" instead.
.main-sidebox-header-left {
    background: url("../images/main_sidebox_left.gif") no-repeat scroll left top transparent !important;
    padding: 0 0 0 0.3em;
}

Open in new window


to make that text grey... so that you don't affect the right sideboxes, break this style into two:
h3.leftBoxHeading, h3.rightBoxHeading {
    background: url("../images/sidebox_right.gif") no-repeat scroll right top transparent;
    color: #FFFFFF;
}

Open in new window

change to
h3.leftBoxHeading {
    background: url("../images/sidebox_right.gif") no-repeat scroll right top transparent;
    color: #666666;
}
h3.rightBoxHeading {
    background: url("../images/sidebox_right.gif") no-repeat scroll right top transparent;
    color: #FFFFFF;
}

Open in new window

Author

Commented:
@Nap0leon, you are brillion!!

The top menu is change to grey color, and I clear the background color as you suggested!

Excellent!! But the underline problem remains, I search 'underline' and replace them all on my stylesheet, but still show (everywhere)......  screen shot

Author

Commented:
My first time to use this service and found it really excellent - solve my problem and save my time with the expert's answer. Thanks a lot for Nap0leon and eriksmtka!

Still need to work out the underline issue...

Author

Commented:
oh...sorry nep0leon, actually the underline issue is solved!! I refresh before it won't work but after I submit the comments, come back and find out all solved!! you are great!

=^.^=

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial