Alter Tabouli to Include Large Image Headers

May 15, 2007

I’ve been working with a guy who runs a fan site for an old TV show that was popular in the 80’s. He has a very large graphical image he uses in his header and was wondering how he could alter Tabouli’s header area to accommodate this image. The image is about 970×176. Here’s how to do that. Please note this is for the current public release of Tabouli and NOT the upcoming release of Tabouli for RapidWeaver 3.6.

  1. Open RapidWeaver and open the site you want to alter.
  2. Disable the site title and tagline using the Site Inspector.
  3. Disable the header logo using the Theme Inspector (Logo options). Your header should not contain a logo or any text now.
  4. Right click on the theme thumbnail in RapidWeaver.
  5. Select Show Contents from the pop-up menu. This will display a Finder window with all the theme files.
  6. Do you see the folder named images? Copy your header image into the images folder.
  7. Now open styles.css with TextEdit or a code editor if you have one.
  8. Search for and find this entry:

    #pageHeader {
      color: #e1ff98;
      text-align: left;
      height: 50px;
      line-height: 50px;
    }
  9. Change the entry in these ways, where headerimage.jpg is the name of your image and height and line height are equal to the height of your image:

    #pageHeader {
      background-image: url(images/headerimage.jpg);
      background-position: top center;
      color: #e1ff98;
      text-align: left;
      height: 176px;
      line-height: 176px;
    }
  10. If you do NOT want the image to repeat itself, then add the line in blue:

    #pageHeader {
      background-image: url(images/miami.jpg);
      background-position: top center;
      background-repeat: no-repeat;
      color: #e1ff98;
      text-align: left;
      height: 176px;
      line-height: 176px;
    }
  11. Save your file and close it. Close the Finder window for the theme. You should now have a nice image header for Tabouli theme :)

About This Entry

Solutions

Tabouli Updates
Tabouli Update 1.2


 

  • or get rwmultitool or thememiner they work great!

    Ryan Fugate

  • Well those only work if there’s an image in the theme for you to edit. In this case there isn’t so neither of those applications would work.

    In the upcoming version of Tabouli for RW3.6, there will be an option to enable large image headers and there will be an image within the theme you can edit using those tools. But until then, you can’t.

    Suzanne

  • What about the little circular thingamabob? is that not a pic

    Ryan Fugate