Change background color of dhtmlmenu

BamaRob · Post by **BamaRob** » Wed Sep 29, 2004 6:14 pm

Another simple question... How do I change the background color of dhtmlmenu? I've got:

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

calexico · Post by **calexico** » Wed Sep 29, 2004 6:33 pm

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

BamaRob · Post by **BamaRob** » Wed Sep 29, 2004 6:59 pm

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

Bewbs · Post by **Bewbs** » Wed Sep 29, 2004 7:25 pm

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/

BamaRob · Post by **BamaRob** » Wed Sep 29, 2004 7:35 pm

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;
}

BamaRob · Post by **BamaRob** » Wed Sep 29, 2004 7:50 pm

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.

Anonymous · Post by **Anonymous** » Thu Sep 30, 2004 6:46 pm

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

Greg · Post by **Greg** » Thu Sep 30, 2004 6:52 pm

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;
}