Page 1 of 1
Change background color of dhtmlmenu
Posted: Wed Sep 29, 2004 6:14 pm
by BamaRob
Another simple question... How do I change the background color of dhtmlmenu? I've got:
Code: Select all
div.leftsidebar {
float: left;
width: 120px;
background-color: #FFAA22;
font-size: 12px;
padding: 7px;
border: 1px solid #CC5511;
color: #444444;
}
in my stylesheet section of one of my templates. This gives me an ugly orange background in my leftsidebar, but the dhtmlmenu is still the light blue/grey color. Where can I change this?
Thanks,
Robert
Change background color of dhtmlmenu
Posted: Wed Sep 29, 2004 6:33 pm
by calexico
which version of the cms are you running ?
and please give me also the url of your page, so that i can take a look at the CSS
Change background color of dhtmlmenu
Posted: Wed Sep 29, 2004 6:59 pm
by BamaRob
I'm running 0.6.3, and, unfortunately, I'm just running it locally at the moment. It's not on a public server (yet).
I can post my CSS if you'd like do you just need the "stylesheet" section from my template? Or, do you also need the "content" section?
Thanks,
BamaRob
Change background color of dhtmlmenu
Posted: Wed Sep 29, 2004 7:25 pm
by Bewbs
i beleive you must scroll further down the css and look for a section */ MENU /* and in there ther are background color options. if you find a way to change the font color let me know please/
Change background color of dhtmlmenu
Posted: Wed Sep 29, 2004 7:35 pm
by BamaRob
Here's my entire Stylesheet section from my template. Notice in the /* Menu */ section that I do have "background-color: #FFAA22;" everywhere that background-color appears. Still, I get a light blue/grey menu background.
BTW, what is the ".good" and ".bad" entries for?
Code: Select all
body { color: #000000;
background-color: #fff;
font-size: 10pt;
font-family: Tahoma;
margin: 10; }
td.nav { color: #000000;
background-color: #fff;
font-size: 10pt;
text-align: center;
font-family: Tahoma }
td.header { color: #000000;
font-size: 10pt;
font-family: Tahoma }
td.label { color: #000000;
background-color: #ccccff;
font-size: 10pt;
font-family: Tahoma }
td.body { color: #000000;
background-color: #ffffff;
font-size: 10pt;
font-family: Tahoma }
td.bodyalt { color: #000000;
background-color: #e9e9e9;
font-size: 10pt;
font-family: Tahoma }
td.footer { color: #000000;
font-size: 10pt;
font-family: Tahoma }
a:link { color: #002060;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
a:visited { color: #333333;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
a:active { color: #606060;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
a:hover { color: #700000;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
.good { color: #0033FF;
font-weight: bold }
.bad { color: #CC3300;
font-weight: bold }
div.heading {
background-color: #FFAA22;
color: #334422;
padding: 9px;
text-align: left;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
div.leftsidebar {
float: left;
width: 120px;
background-color: #FFAA22;
font-size: 12px;
padding: 7px;
border: 1px solid #CC5511;
color: #444444;
}
div.thebody {
padding: 5px;
margin-left: 150px;
font-size: 10pt;
font-family: Tahoma;
}
div.bottom {
background-color: #FFAA22;
border: 1px solid #CC5511;
padding: 3px;
text-align: center;
font-size: 11;
}
p.title {
font-size: 14pt;
font-weight: bold;
margin: 0;
}
p.smalltitle {
font-size: 12pt;
font-weight: bold;
margin: 0;
padding: 4px;
background-color: #CCCCCC;
text-transform: uppercase;
}
p.sectionname {
font-weight: bold;
margin: 0;
}
.leftsidebar p.sectionname {
padding-left: 15px;
}
.icons {
text-align: center;
}
/* Menu */
.verbar {
color: black;
background-color: #FFAA22;
}
.submenu {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
background-color: #FFAA22;
}
.subframe {
position: relative;
display: block;
background-color: #FFAA22;
border: 1px solid #CC5511;
}
.item {
padding: 3px;
text-align: left;
white-space: nowrap;
}
.separator {
background-color: #FFAA22;
border-top: 1px solid #9e9a91;
border-bottom: 1px solid #ffffff;
margin: 2px 1px 2px 1px; /* top right bottom left */
height: 0;
font-size: 1px;
line-height: 0
}
.item a {
position: relative;
display: block;
text-decoration: none;
}
.item a:link {
color: #000000;
text-decoration: none;
}
.item a:visited {
color: #000000;
text-decoration: none;
}
.item a:hover {
color: #ffffff;
background-color: #FFAA22;
text-decoration: none;
}
.item a:active {
color: #ff0000;
text-decoration: none;
}
.item .fwdarr {
position: absolute;
top: 5px;
right: 7px;
}
Change background color of dhtmlmenu
Posted: Wed Sep 29, 2004 7:50 pm
by BamaRob
Got it! I needed to add a 'background-color: #FFAA22' entry for .item:
Code: Select all
.item {
background-color: #FFAA22;
padding: 3px;
text-align: left;
white-space: nowrap;
}
Thanks for pointing me in the right direction.
Change background color of dhtmlmenu
Posted: Thu Sep 30, 2004 6:46 pm
by Anonymous
The css for dhtmlmenu is in the follwing file:
phplayers/layersmenu-cms.css
to change the text color add
color: #ff000;
to the various sections such as the .item class
Change background color of dhtmlmenu
Posted: Thu Sep 30, 2004 6:52 pm
by Greg
That last post was the one I started. I also added css for the horizontal menu in my phplayers/layersmenu-cms.css file
Code: Select all
.horbar {
color: black;
background-color: #FFFFE4;
/*border: 2px outset #cecac1;*/
}
.horbaritem {
float: left;
white-space: nowrap;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
.horbaritem a {
display: block;
text-decoration: none;
}
.horbaritem a:link {
color: #000000;
text-decoration: none;
}
.horbaritem a:visited {
color: #000000;
text-decoration: none;
}
.horbaritem a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}
.horbaritem a:active {
color: #ff0000;
text-decoration: none;
}
.verbar {
color: black;
background-color: #FFFFE4;
}
.submenu {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
.subframe {
position: relative;
display: block;
background-color: #FFFFE4;
border: 1px solid #64879d;
}
.item {
padding: 3px;
text-align: left;
white-space: nowrap;
font-size: 12px;
background-color: #FFFFE4;
font-weight: bold;
}
.separator {
background-color: #ff0000;
border-top: 1px solid #9e9a91;
border-bottom: 1px solid #ffffff;
margin: 2px 1px 2px 1px; /* top right bottom left */
height: 0;
font-size: 1px;
line-height: 0
}
.item a {
position: relative;
display: block;
text-decoration: none;
}
.item a:link {
color: #000000;
text-decoration: none;
}
.item a:visited {
color: #000000;
text-decoration: none;
}
.item a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}
.item a:active {
color: #ff0000;
text-decoration: none;
}
.item .fwdarr {
position: absolute;
top: 5px;
right: 7px;
}