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]
Change the background color of CSS Vert 1col menu?
Re: Change the background color of CSS Vert 1col menu?
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.
#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.
Re: Change the background color of CSS Vert 1col menu?
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;
}
#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;
}
Re: Change the background color of CSS Vert 1col menu?
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
#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
Re: Change the background color of CSS Vert 1col menu?
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;
}
#menu_vert ul {
width: 100%; /* Width of Menu Items */
border-top: 1px solid #006699;
border-right: 1px solid #006699;
background: #ececec;
}
Re: Change the background color of CSS Vert 1col menu?
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%; }
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%; }
Re: Change the background color of CSS Vert 1col menu?
NICE!!
Thats what i needed.
Thank you!
MJD
Thats what i needed.
Thank you!
MJD