Need help? Check out our Support site, then


Changing navigation border colours on menu's for Inove theme

  1. Hi,

    I was recently trying to change the border colours on the main menus on the Inove theme. To make it clearer I was hoping to change the grey line immediately below my banner.

    The colours of the borders are grey at the moment and I wanted to either remove them or make them white.

    I have the CSS upgrade so I'm just looking for any coding pointers.

    Here is the link to my blog:
    http://www.thedailysegway.wordpress.com

    Any help would be thoroughly appreciated.

    P.S. I have also been wondering for quite a while if it is possible to hyperlink my banner image to the home page of my blog. Please advise.

    The blog I need help with is thedailysegway.wordpress.com.

  2. The border declarations are here.

    #header {
    border-bottom: 1px solid #A6A6A6;
        height: 90px;
    }
    
    #navigation {
    border-bottom: 1px solid #A6A6A6;
    }
  3. Linking the header image is involved. You have to make a transparent PNG image the exact size of the header image and insert and link it to your main site page in a text widget. You have to then size that specific widget by ID# to the exact dimensions of the header image and the transparent PNG. You then have to set #container to position:relative; then you have to set the text widget to position:absolute; and use top and left declarations to move it up and over the header image.

  4. Thank you so much "thesacredpath". You really helped us out. Nice to know there are helpful people like you out there.

    and if you enjoy humour and satire remember to come by the blog and check us out.

    Thanks again.

  5. @serious, you are welcome and thank you and I will stop by.

  6. Sorry but one last thing I wanted to ask.

    On a previous post on another thread you addressed how to change the menu.gif using an image that can be created on a picture editing software.

    http://en.forums.wordpress.com/topic/change-menu-colors-of-inove-1?replies=7#post-513678

    As I was trying to do this I could not find where in the CSS code this image is referenced. Can you identify this for me?

    Thanks so much.

  7. It is here, and it is an image sprite (a number of images in a single image).

    #menus li a {
    background: url("img/menu.gif") no-repeat scroll 0 0 transparent;
    }

    And here is the image.

    http://s2.wp.com/wp-content/themes/pub/inove/img/menu.gif

    What happens in iNove is that the top image in the image sprite is displayed when the tab is not the current page tab and a mouse is not hovering over it.

    The second image down in the image sprite is then shown when the tab is in hover or current page state by setting a background position on hover/current of -31px as shown below.

    #menus li a:hover, #menus li a.current {
        background-position: 0 -31px;
    }
  8. Life-saver! You are the best.

    The Daily Segway is indebted you.

  9. You are welcome.

  10. BTW, you have some funny stuff there. I'm reading some of it now.

Topic Closed

This topic has been closed to new replies.

About this Topic