Customizing Default CSSMenu Horizontal

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
savageideas
Forum Members
Forum Members
Posts: 22
Joined: Wed Jun 21, 2006 3:16 pm

Customizing Default CSSMenu Horizontal

Post by savageideas »

I'm trying to customize the font color of the Default CSSMenu Horizontal. I've been able to customize all of the other colors (background, hover, active, etc.) but cannot find the appropriate CSS reference for the actual FONT COLOR. Does anyone know where this is located? Thanks.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Customizing Default CSSMenu Horizontal

Post by Dr.CSS »

default CSS called Colours...

/* Links */
a,
a:link
a:active, a:visited {
color: #385C72;
}

but you can add a call to just style the menu font using one of many calls eg.,

#menu_horiz, #wrapper, #menuwrapper, #primary_nav li,    add one of these to this
  a,
a:link
a:active, a:visited {
color: #your color;
}

and for hover...

  a:hover{
    color: #your color;
  }

and of course to either of these you can add...

    text-decoration: none; or underline

or you could goto the Default CSSMenu Horizontal stylesheet and add the color: #your color; in there...
savageideas
Forum Members
Forum Members
Posts: 22
Joined: Wed Jun 21, 2006 3:16 pm

Re: Customizing Default CSSMenu Horizontal

Post by savageideas »

This is the code I've added in the Default CSSMenu Horizontal style sheet:

#menuwrapper {
        overflow: hidden;
        color: white;
        background-color: #0033CC;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        width: 100%;
        }

But my links aren't showing up in white. Check it out at www.thebradleygrp.com. Thanks.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Customizing Default CSSMenu Horizontal

Post by Dr.CSS »

sorry got carried away menuwrapper is not one of them...

#primary-nav a {color:white;   you should use color numbers eg., #fff, technicaly #FFFFFF altho words do work  ;)
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}

good place to find color numbers....

http://www.colorschemer.com/online.html
savageideas
Forum Members
Forum Members
Posts: 22
Joined: Wed Jun 21, 2006 3:16 pm

Re: Customizing Default CSSMenu Horizontal

Post by savageideas »

That worked just great! Thanks.

One more question: Where can I change the HEIGHT of the menu?

Thanks again.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Customizing Default CSSMenu Horizontal

Post by Dr.CSS »

if you want to make the main menu taller you can increase the padding around the a's/text like so... but if you do all the a's/text below will inherit that size to so to keep them from getting to big you add a call in they're style... showing both...
PS. if you use Firefox it has an extention called Web Developer that will let you edit the CSS in real time to see immediate results...
that's how i help... goto your page clik edit CSS and make changes see how it looks and report back with the results, that's why it's nice to get a link to the page with problems...

#primary-nav a {
color: #fff;
            font-weight: bold;
            display: block;
margin: 0px;
padding: 15px 10px;  of course you can use other size to suit you
text-decoration: none;
}
#primary-nav li a {
border-right: 1px solid white;
border-left: 1px solid white;
}
#primary-nav li li a {padding: 5px 10px;   from the orginal size, can be changed also
border: 1px solid white;
}
savageideas
Forum Members
Forum Members
Posts: 22
Joined: Wed Jun 21, 2006 3:16 pm

Re: Customizing Default CSSMenu Horizontal

Post by savageideas »

Thank you so much for the tip...I'll check out the Firefox plug-in.
Post Reply

Return to “Layout and Design (CSS & HTML)”