I'd like to change the Panel Menu color from black to a nice bright blue. Did I see in the code that the panel menu is an image? I'm hoping that I'll be able to change it by just replacing the appropriate color hex code.

Hi Scott,

Do you have a link so as I can see ur site???

or the panel menu that you are referring to is the drop down menu or the panel menu in the Grid template ???

Let me know and I can point ya in the right direction

Cheers
Craig

Hi Scott,

If you are using the Elevate2 template then the css for the colour of the panel menu can be found in the menus.css file. Look towards the bottom to the group starting with this text:

/* @group Sidebar Menus and Lists */

and you will see where to change the colour:

eg #leftCol ul li a.

Cheers Anthony

www.spiritsdawn.com I'm referring to the menu that drops down where you click on "Register" located in the top right hand corner of the site. (I'll also look at what Anthony directed me to.) Thank you.

Hi Scott

Ah its the top panel...... from memory I think that one is a transparent image

/images/blackOverlay.png

Unless that image is being used somewhere else you should be able to edit the colour and opacity on that image blackOverlay.png

Cheers
Craig

Thanks, Craig.

I'm looking at this before I go off to work and in the layout.css file there's a bunch of code that seems to reference this:


/* @group Sliding Panel */
.tab ul.login { position: absolute; width: auto;font-weight: bold;line-height: 24px;margin: 0;right: 10px; color: white;font-size: 80%;text-align: center; background: url(../images/blackOverlay.png);}
.tab ul.login li { text-align: left;padding: 0 6px;list-style: none;float: left;margin: 0;}
.tab ul.login li a:hover {background: none;}
.tab a.open, .tab a.close { cursor: pointer;position: relative; color: #fff;text-decoration: none;}

#toppanel {position: absolute; width: 100%; z-index: 999; float: left; color: #ccc;}
#toppanel h3 {color: #ddd;border-bottom: 1px solid #333;}
#toppanel a {color: #fff;}
#toppanel #form-login ul {margin: 20px 0;}
#toppanel ul li {list-style-type: none;margin: 0;padding: 0;}
#toppanel ul li a {display: block;text-decoration: none;border-bottom: 1px solid #333}
#toppanel ul li a:hover {background: #111;}
#panelInner {float: left; background: url(../images/blackOverlay.png);width: 100%;}
#panel {padding-top: 20px;margin: 0 auto;overflow: hidden;position: relative;z-index: 3;display: none;padding-bottom: 30px;}
#panelLeft,#panelMid {width: 30%;float: left}
#panelMid {margin-left: 3%;}
#panelRight {float: right;width: 30%;}


#panelLeft_one, #panelMidLeft_one, #panelMidRight_one, #panelRight_one {width: 100%;}
#panelLeft_two, #panelMidLeft_two, #panelMidRight_two, #panelRight_two {width: 45%;float: left;margin-right: 2.5%;}
#panelLeft_three, #panelMidLeft_three, #panelMidRight_three, #panelRight_three{width: 30%;float: left;margin-left: 3%;}
#panelLeft_four, #panelMidLeft_four, #panelMidRight_four, #panelRight_four{width: 22%;float: left;margin-left: 2.5%;}
/* @end */

I just wanted to confirm my suspicions before I took the time to muck about. I'll have to wade out to the deep end of the pool and see how well I can keep my head above water on this one.

Thanks again.

Hi Scott,

Yeh thats him, the one you have highlighted in bold type. I think it is only about 10px x 10px

I'm a little rusty as I have been away for a while, however I'm pretty sure that image isnt used anywhere else in the template..... to be safe just save a copy of that image before editing....

And also if you like the see through look apply some opacity.

Hope that helps ya sort it out, and have a good one at work mines just about done for the day

Cheers
Craig