WordPress.com

1. cakenutrition
   Member
   Jan 31, 2012, 11:43 PM

   I am currently using the Vigilance theme. I am trying to:
   change the background color of the menu,
   add a border to it (and also in between each menu item),
   change the background color of the drop-down menu,
   change the hover color of all menu items (including drop down) and get ride of the hover overline

   I read through the CSS tutorial a couple times, but I can't seem to figure out where to put any alterations I want to make, nor do I know how to access drop-down menu alterations

   The blog I need help with is cakenutrition.com.

2. designsimply
   Staff
   Feb 1, 2012, 1:00 AM

   You should put CSS into the Appearance → Custom Design → CSS page inside your blog dashboard. Note that to make the changes visible on your blog to others, you would need to purchase the Custom Design upgrade.

3. designsimply
   Staff
   Feb 1, 2012, 1:01 AM

   change the background color of the menu

   To change the background color of the entire top navigation menu in Vigilance, use this CSS and adjust the color to what you'd like:

   #nav {
   background: #FE0611;
   }

   You can find more colors at http://www.w3.org/TR/css3-color/#svg-color

4. thesacredpath
   Member
   Feb 1, 2012, 1:03 AM

   Background color and border for nav items. Change colors as desired.

   #nav ul li {
   background-color: #59FF19;
   border: 1px solid #000000;
   margin: 0;
   padding: 3px 7px;
   position: relative;
   }

   Color for "current page" text in menu and also for the menu item text hover color.

   #nav ul li a:hover, #nav ul li:hover > a, #nav ul li.current_page_item > a, #nav ul li.current_page_parent > a, #nav ul li.current_page_ancestor > a, #nav ul li.current-cat > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent a {
   border-top: medium none;
   color: #2739FC;
   }

   Background color of sub menu items

   #nav .children li, #nav .sub-menu li {
   background: #FFFFFF;
   }

   Start with the above, and then on the hover, are you talking about changing the text color when hovered, or the background color?

5. designsimply
   Staff
   Feb 1, 2012, 1:09 AM

   add a border to it (and also in between each menu item)

   To add a border around the top navigation in Vigilance:

   #nav {
   border: 3px solid black;
   }

   To add a border to the left side of each menu item:

   #nav ul li {
   border-left: 1px dotted black;
   padding-left: 10px;
   }

   Then if you wanted to remove that left border from the submenu items and the very first list item, add this:

   #nav ul li:first-child, #nav ul ul li{
   border-left: none;
   padding-left: 0;
   }

6. designsimply
   Staff
   Feb 1, 2012, 1:11 AM

   Looks like thesacredpath has got ya covered for the submenu things. :)

7. cakenutrition
   Member
   Feb 1, 2012, 3:03 AM

   WOW ! Thanks for all the newbie help! I'm gunna go play around with it. Really appreciate the fast and descriptive replies.

8. cakenutrition
   Member
   Feb 1, 2012, 3:45 AM

   ok that was awesome thanks a lot! ... but is there any outline that describes Vigilance's (or any theme's) original stylesheet? like for example, I've been messing around with the original coding from here http://s1.wp.com/wp-content/themes/pub/vigilance/style.css?m=1327698403g&minify=false ... but is there anything that will describe line by line exactly what will be effected by changes other than me continuing to just make random changes and see what happens?

9. cakenutrition
   Member
   Feb 1, 2012, 3:55 AM

   For example - I now want to change the text color of the menu items and submenu texts. NOT when highlighted or selected, but just their base colors. to salmon.

   If I'm correct in understanding CSS it would look like

   color: #FA8072; ... but i dont know whether that would go within #nav {... or #nav ul li { etc ... and I use those two because I tried them (among others) and didnt see any change

10. thesacredpath
    Member
    Feb 1, 2012, 5:21 AM

    CSS is theme specific, so each theme would have to have a document done for it and that would be a good bit of work.

    There is the firebug add-on for Firefox which allows you to easily identify which classes and IDs in the CSS control the styling of which elements in the markup (XHTML). Chrome has its own inspector for CSS and such built in as does Safari and Internet Explorer 8 and 9. It would be worth your time to work with one of those and get used to it. The main thing is to get to where you understand the relationship between the element in the markup and the classes and IDs in the CSS. It isn't rocket science, and a little studying and playing with it will have you on your way.

    The color of the (non-hover) menu items is set here. Not the "a" at the end if the CSS ID? "a" is the main tag for textual links and since each bit of text in the menu system is a link to another page, then the color for those can be set with the below. Sometimes the color for the text links in the menu will be set in a parent class or ID (such as #nav a or even just "a", so you have to do some looking around. That is where Firebug and the inspectors in the other browsers come in handy.

    #nav li a {
    color: #FA8072;
    }

    The following will take the sub menu background colors to the same color as the top nav bar.

    #nav .children li, #nav .sub-menu li {
    background: #ADFF2F;
    }

Topic Closed

This topic has been closed to new replies.