CMS Made Simple Forums

I am trying to change the background color of the menu in my CSS vert1col template. I want the background color of the menu to be white form the default grey. I have located the grey in the nav-menu style sheet and change to white, but nothin happens:

#menu_vert, #menu_vert ul {
  margin: 0;
  padding: 0;
  }

#menu_vert ul {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #ececec;
  }

[attachment deleted by admin]

There is also a call to the menus a.

#menu_vert ul  a{
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #ececec;
  }

or

#menu_vert li {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #ececec;
  }

or

#menu_vert li a {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #ececec;
  }

Basically look through the Menu CSS, where you found this information, for any other calls for that grey color.

I tried that with the code below and no luck, also the code below from the nav-vert stylesheet didnt have everything you listed above (itried to add it, but no changes) http://pages.sparcc.org:16080/test/index.php/home

#menu_vert, #menu_vert ul {
  margin: 0;
  padding: 0;
  }

#menu_vert ul {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #ececec;
  }
#menu_vert li {

  list-style: none;
  }

#menu_vert li a {
  display: block;
  text-decoration: none;
  padding: 5px 5px 5px 10px;
  border-bottom: 1px solid #006699;
  color: #18507C;
  }

/* Fix IE. Hide from IE Mac \*/
* html #menu_vert li { float: left; height: 1%; }
* html #menu_vert li a { height: 1%; }
/* End */

    div#menu_vert ul ul li a,
    div#menu_vert ul ul li a:link,
    div#menu_vert ul ul li a:visited  {
        display: block;
        padding: 3px 5px 3px 25px;
        border-bottom: none;
        font-size: 90%;
    }
    div#menu_vert ul ul  {
      border-right: none;
      border-top: none;
      border-bottom: 1px solid #006699;
      padding-bottom: 5px;
    }

    div#menu_vert ul ul ul li a,
    div#menu_vert ul ul ul li a:link,
    div#menu_vert ul ul ul li a:visited  {
        padding-left: 40px;
    }
    div#menu_vert ul ul ul  {
      border-bottom: none;
    }
#menu_vert li ul li a { padding: 5px 5px; } /* Sub Menu Styles */

/* fixed image flicker by adding .cssmenu-vertical ul */

#menu_vert li a:hover {
background-color: #abb0b6;
}

.current
{
list-style-type: square;
display: inline;
background-color: #abb0b6;
}

#menu_vert li.activeparent {
  background-color: #abb0b6;
}

#menu_vert li.active01 h3 {
  display: block;
  text-decoration: none;
  padding: 5px 5px 5px 10px;
  border-bottom: 1px solid #006699;
  color: #18507C;
  margin: 0;
  font-size: 1em;
  line-height: 1em;
  background-color: #abb0b6;
  }

#menu_vert li.active02 h3
{
  display: block;
  padding: 3px 5px 3px 25px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #18507C;
  margin: 0;
}

#menu_vert li.active03 h3
{
  display: block;
  padding: 3px 5px 3px 40px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #18507C;
  margin: 0;
}

li.sectionheader {
  margin: 0;
  margin-right: -1px;
}
li.sectionheader h3 {
  margin: 0;
  padding: 1em 10px 0.5em 10px;
  border: none;
  background-color: #fff;
  border-bottom: 1px solid #006699;
  z-index: 90;
}

li.separator {
  height: 1px;
  padding: 0.5em 0;
  margin: 0;
  width: 100%;
  border-bottom: 1px dotted black;
}

OK then try and change this, but if you will notice other colors in the CSS can be changed also, anything with the color: #somenumber, not many colors can be the word eg,. white, which is one of the ones you can use but it is generally better to use a number.

#menu_vert ul {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #ececec;
  }

to

#menu_vert ul {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #FFFFFF;                  That is the number for the color white, a good place to find color numbers is at the bottom.
  }

http://www.colorschemer.com/online.html

This looks to be the only call with the grey background color: (When I change it to another color, nothing changes)


#menu_vert ul {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
  background: #ececec;
  }

Sorry I didn't go to the page in question, was just working off of what you had posted.

We were working with the wrong style sheet.

/* end accessibility *//* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */

#menuwrapper {
width: 100%;
}


/* Unless you know what you do, do not touch this */

#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
    margin-left: -1px;
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
    margin-bottom: -1px;
position: relative;
}


/* Styling the basic apperance of the menu elements */

#primary-nav a {
border: 1px solid #006699;
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #FFFFFF;  This is it.
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
background-color: #C7C7C7;  This is why the Home is still greyish.
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #E7AB0B;  This is the yellow hover color
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }

NICE!!

Thats what i needed.

Thank you!

MJD