Replacing tabs with images using CSS

by Michael Zeltner — last modified Mar 31, 2009 04:34 PM
The Section tabs in Plone can be replaced with images using CSS if you need that for your site customization. Also includes rollover images.

Put this in your (customised) ploneCustom.css: 

  ul#portal-globalnav {
      height: 30px;
  }

  ul#portal-globalnav li {
      display: block;
      float: left;
      padding: 0;
      margin: 0;
      overflow: hidden;
      background-repeat: no-repeat;
      height: 30px;
  }

  ul#portal-globalnav li a,
  ul#portal-globalnav li a:hover,
  ul#portal-globalnav li.selected a {
      display: block;
      padding: 30px 0 0 0;
      border: 0;
      background: none;
      height: 0px !important;
      height /**/:30px;
  }

  li#portaltab-index_html {
      background-image: url("/bibiplone/globalnav/home.png");
      width: 150px;
  }

  li#portaltab-news {
      background-image: url("/bibiplone/globalnav/news.png");
      width: 200px;
  }

  li#portaltab-Members {
      background-image: url("/bibiplone/globalnav/members.png");
      width: 100px; 
  }

If you need roll-over images that are different on hover (ie: when user has pointer over the image), try this: 

  ul#portal-globalnav {
      height: 30px;
  }

  ul#portal-globalnav li {
      display: block;
      float: left;
      padding: 0;
      margin: 0;
      overflow: hidden;
      background-repeat: no-repeat;
      height: 30px;
  }

  ul#portal-globalnav li a,
  ul#portal-globalnav li a:hover,
  ul#portal-globalnav li.selected a {
      display: block;
      padding: 30px 0 0 0;
      border: 0;
      height: 0px !important;
      height /**/:30px;
  }

  li#portaltab-index_html a {
      background-image: url("/bibiplone/globalnav/home.png");
      background-position: 0px 0px;
      width: 150px;
  }

  li.selected#portaltab-index_html a:hover,
  li#portaltab-index_html a:hover {
      background-image: url("bibiplone/globalnav/home.png");
      background-position: 0px 60px;
      width: 150px;
  }

  li.selected#portaltab-index_html a {
      background-image: url("bibiplone/globalnav/home.png");
      background-position: 0px 30px;
      width: 150px;
  }