WordPress.com

1. serioussatire
   Member
   May 12, 2011, 8:41 AM

   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. thesacredpath
   Member
   May 12, 2011, 6:17 PM

   The border declarations are here.

   #header {
   border-bottom: 1px solid #A6A6A6;
       height: 90px;
   }
   
   #navigation {
   border-bottom: 1px solid #A6A6A6;
   }

3. thesacredpath
   Member
   May 12, 2011, 6:20 PM

   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. serioussatire
   Member
   May 13, 2011, 6:48 AM

   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. thesacredpath
   Member
   May 13, 2011, 6:50 AM

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

6. serioussatire
   Member
   May 13, 2011, 6:56 AM

   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. thesacredpath
   Member
   May 13, 2011, 7:11 AM

   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. serioussatire
   Member
   May 13, 2011, 7:31 AM

   Life-saver! You are the best.

   The Daily Segway is indebted you.

9. thesacredpath
   Member
   May 13, 2011, 7:36 AM

   You are welcome.

10. thesacredpath
    Member
    May 13, 2011, 7:37 AM

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

Topic Closed

This topic has been closed to new replies.