Change menu background color, link color
BarbYoung says:
Hi Matt,
HR want to see a little more color in our retiree site. They suggested changing the menu's background color to a light blue, but I can't figure out how to change the stylesheet to only change the menu background, not the background on every page. Of course, I'll also need to change the link colors in the menu, and can't see how to target only links in the menu. Do I need to work in the include: TreeNav root=Menu? Where do I find that?
I tried using a span tag around the menu page code, but this only colored the background where there was text, not the entire menu cell background:
<span style="background-color:#99C0E6">
<p>[[include:_TreeNav root=Menu]]</p>
<p><span>Contact&nbsp;<a href="mailto:retirees@nicor.com">retirees@nicor.com</a> if you have any questions about this site.</span></p>
</span>
I read your help page on CSS Tips and Techniques, but didn't find a way to change only the menu background. Can you point me in the right direction?
Thanks,
Barbara
nicor-retirees.editme.com
Posted at 3:43 AM on October 6, 2009
Barbara,
I apologize for the late response on this - missed it somehow.
If you look at the source code of your page, you'll see that the Menu area is contained within a table cell with the class of "menu". So CSS targeting td.menu should style it.
Setting background on a SPAN element will only set text background, as SPAN is not a block element. That's just how CSS/HTML works. The table cell is a block element, so that should work.
So you can target the menu cell like this in your style sheet:
td.menu { background-color:yellow; }
td.menu a { color: black; }
And so on.
If you haven't checked it out, I highly recommend installing Firefox and the popular Firebug plugin - it is an invaluable tool to identify HTML and CSS structures in an existing page. I'd be lost without it.
MW
Posted at 9:17 AM on October 16, 2009
Hi Matt,
I've heard of Firebug but hadn't used it. I installed it and am playing around with inspecting things.
I added the following code to our Brighton Blue stylesheet. The link color change worked but the background color change did not.
td.menu {
background-color:#d6edfb;
}
td.menu a {
color: #333333;
}
Thanks for the handholding. I'm learning a lot.
Barbara
Posted at 10:40 AM on October 16, 2009
Barbara,
I've moved this to the public Questions forum for the benefit of other customers.
You added your change before the default setting for td.menu. Put your change at the bottom of the style sheet so that it over-rides the default setting. Firebug will show you this by placing the default setting at the top with your setting beneath it, over-ridden.
MW
Posted at 11:49 AM on October 16, 2009
