How do I replace the 'Home' menu link with a picture.

I can find lots of ways to do it in D6, but can't find anything for D7.

Thanks

Glenn

Comments

Deepika.chavan’s picture

Deepika.chavan CreditAttribution: Deepika.chavan commented

Hi,
I tried the same thing on my local site.
- Create custom css file in /css dir say 'local.css' .
- Add following line of code in 'genesis.info' file.
stylesheets[all][] = css/local.css
- Add following css code in local.css file to replace the home link with image. 

ul#main-menu li.menu-198 a {
    background: #FFFFFF url(../images/home-link.png) no-repeat scroll 0 0;  
    height: 45px;                        
    width:  100px;
    white-space: nowrap; 
    text-indent: -999px;
    overflow: hidden;  
    display: block;
}

Placed the 'home-link.png' image in '/images' dir.

- You can add following code if you want rollover effect. just change the background image in following code. 

ul#main-menu li.menu-198 a:hover {
    background: #FFFFFF url(../images/home-link-1.png) no-repeat scroll 0 0;  
    height: 45px;                        
    width:  100px;
    white-space: nowrap; 
    text-indent: -999px;
    overflow: hidden;  
    display: block;
}

- Please clear cached data.
HTH!!

Rgrds,

Deepika Chavan.

glennnz’s picture

glennnz CreditAttribution: glennnz commented

OK, getting there. Now I'm trying to get the menu to display inline. I've put the menus in as blocks, rather than through the theme, and I have:

#block-system-main-menu ul.menu ul {
  display: inline;
}

#block-system-main-menu ul.menu li {
  display: inline;
}

#block-system-main-menu ul.menu li.first a {
  background: #FFFFFF url(../images/error.png) no-repeat scroll 0 0; 
  height: 45px;                       
  width:  100px;
  white-space: nowrap;
  text-indent: -999px;
  overflow: hidden; 
}

I can get them to either be not inline, with the background image, or inline with both background image AND the link text.