Need help customizing menu bar

  • Resolved demelzastudios

    (@demelzastudios)


    15 years, 3 months ago

    Please take a look at my blog:

    http://www.demelzastudios.com

    I’ve customized a theme to a different color scheme, but can’t figure out where to change the color of the green ‘floater’ that highlights the ‘Home’ and ‘About’ links.

    Can someone tell me where I can find this in the code so I can change it? I’ve tried changing all sorts of colors in the code on various pages, but can’t find it. I just don’t know what I’m looking for.

    Thanks,
    Demelza

Viewing 9 replies - 1 through 9 (of 9 total)
  • debraw

    (@debraw)

    15 years, 3 months ago

    Hi Demelza,

    Below is the code you’re looking for. You should find it in your stylesheet in the editor. It should be style.css or something like that. Bear in mind your code may not look exactly like this but it should be similar. 🙂 

    #top-menu a:hover{
	text-decoration: none;
	color:#fff;
	background: url(images/nav_hover.gif) repeat-x;

    See the background: url line? That is what you change. You can simply add a color like this background:#45443 or edit the current gif. I hope this helps. Post more questions if you need to. 🙂

    Debbie

    Thread Starter demelzastudios

    (@demelzastudios)

    15 years, 3 months ago

    Thanks for the reply. I changed all the hover colors and colors that might possibly be connected, but none of them worked. Is it possible that the code is in a css file called ‘glide’? I’m totally new to blogging and not familiar with css, although I do know html, which is why I’ve been able to customize everything else, but this has me stumped!

    debraw

    (@debraw)

    15 years, 3 months ago

    It could possibly be in Glide. Why don’t you post the Glide code and I’ll take a look at it. 🙂

    Debbie

    Thread Starter demelzastudios

    (@demelzastudios)

    15 years, 3 months ago

    Here is the Glide code… Thanks!

    #glidercontent{
    margin:5px 0 0px 5px;

    }

    .glidecontentwrapper{
    position: relative;
    width: 990px;
    height:340px;
    overflow: hidden;
    margin:0px 0px 0px 0px;
    padding:0px 0px;
    background:url(images/gcontent.jpg) repeat-y;
    }

    .glidecontent{
    position:absolute;
    padding:0px 5px 0px 5px;
    width:940px;
    color:#555;
    margin:0px 20px;
    height:100%;
    overflow:hidden;
    float:left;
    background:#663333;

    }

    .glidim{
    float:left;

    }

    .glidim img{
    margin:0px 5px 5px 0px;
    padding:7px 7px;

    }
    .glidecontent h2{
    margin:0px 0px 0px 0px;
    padding:5px 0px;
    font-size:24px;
    line-height:24px;
    font-weight:bold;
    overflow:hidden;
    font-family: Trebuchet ms,Century gothic,Arial,Tahoma,sans-serif;
    }
    .glidecontent h2 a:link, .glidecontent h2 a:visited{
    color:#303843;
    }

    .glidecontent p{
    margin:0px 0px 0px 0px;
    padding:5px 0px;
    font-size:14px;
    line-height:22px;

    overflow:hidden;
    font-family: Trebuchet ms,Century gothic,Arial,Tahoma,sans-serif;
    color:#696d70;
    }

    .glidebot{
    width:1000px;
    height:12px;
    background:url(images/glidbot.jpg) center no-repeat;
    margin:0px 0px ;
    padding:0px 0px;
    float:left;

    }
    .gnav{ /*style for DIV used to contain toggler links. */
    width: 100px;
    height:50px;
    z-index:150;
    float:right;
    padding-right:25px;
    }

    .glidecontenttoggler{ /*style for DIV used to contain toggler links. */

    height:45px;
    z-index:150;
    width: 990px;
    background: url(images/ftit.jpg) no-repeat;

    }
    .glidecontenttoggler a{ /*style for every navigational link within toggler */
    display: -moz-inline-box;
    display: inline-block;
    color: #2e6ab1;
    font-weight: bold;
    text-decoration: none;
    }

    .glidecontenttoggler a.selected{ /*style for selected page’s toggler link. “.selected” class auto generated! */
    background: #E4EFFA;
    color: black;
    }

    .glidecontenttoggler a:hover{
    background: #E4EFFA;
    color: black;
    }

    .glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). “.toc” class auto generated! */
    }

    .glidecontenttoggler a.prev{ /*style for “prev” and “next” toggler links. “.prev” and “.next” classes auto generated! */
    top:10px;
    right:75px;
    position:absolute;
    display:block;
    background:url(images/left.jpg) left;
    width:50px;
    height:29px;
    }
    .glidecontenttoggler a.next {
    float:right;
    display:block;
    background:url(images/right.jpg) right;
    width:50px;
    height:29px;
    position:absolute;
    top:10px;
    right:25px;
    }

    #miniblock{

    float:left;
    height:100%;
    width:1000px;
    margin-bottom:10px;
    margin-top:15px;
    }

    .minipost{

    width:309px;
    overflow:hidden;
    float:left;
    height:100%;
    margin-left:17px;

    }

    .hentry h2{

    margin:0px 0px;
    padding:3px 0px;
    font-family:Trebuchet ms,Century gothic,Arial,Tahoma,sans-serif;
    font-size:18px;
    font-weight:bold;

    }
    .hentry h2 a:link, .hentry h2 a:visited {
    color:#18202b;

    }
    .hentry p{

    margin:5px 0px;
    padding:0px 0px;
    font-size:12px;
    font-family: Trebuchet ms,Century gothic,Arial,Tahoma,sans-serif;
    color:#696d77;
    line-height:18px;
    text-align:justify;
    }
    .hentry p a:link, .hentry p a:visited {
    color:#d00000;
    font-weight:normal;
    }
    .hentry img{
    margin:5px 0px;
    background:#fff;
    padding:6px 6px;
    border:1px solid #d2d8de;
    }

    esmi

    (@esmi)

    15 years, 3 months ago

    style.css (line 821)

    .lavaLampBottomStyle li.back {
background-color:#006000;
height:32px;
margin-left:0;
position:absolute;
width:9px;
z-index:8;
}

    Change background-color to the color you want.

    Thread Starter demelzastudios

    (@demelzastudios)

    15 years, 3 months ago

    That does change the color of the bar which is in the background, but the ‘floater’ part is still green :o/

    Anything else?

    liamg1987

    (@liamg1987)

    15 years, 3 months ago

    .lavaLampBottomStyle li.back {
    background-color: CHANGE THIS TO YOUR COLOUR;
    height:32px;
    margin-left:0;
    position:absolute;
    width:9px;
    z-index:8;
    }

    If your ever stuck on things involving css its a good idea to install firefox and download the firebug php with it, theres tutorials all over the web and it helps tremendously

    Thread Starter demelzastudios

    (@demelzastudios)

    15 years, 3 months ago

    I did change that section to my color – twice. If you look at my site, you’ll see the background bar load to the color I want, but the floater over the links is still green.

    I’m not following how installing the firebug php will help :o/

    Thread Starter demelzastudios

    (@demelzastudios)

    15 years, 2 months ago

    Just to let you all know that I deleted and re-installed the theme and changed the bkgd color where you suggested and it worked this time. I don’t know why it wasn’t working before, but it has been sorted now. Thanks for your help and patience!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Need help customizing menu bar’ is closed to new replies.