Featured Blog: The Kortum Technique
Blogging Best Practices: Photo Use and Attribution

Hide Banner Header & Description

Many of the new themes being released include the ability to upload a custom banner image. If you have a banner image which includes the blog name and description as part of the image, you may want to hide the default header which overlays the banner in the pre-made themes.

To hide the banner header and description, the Custom CSS feature available with the Unlimited and higher plans is needed. Alternatively, you can use the Theme Builder to upload a custom banner image without the banner header and description overlaying the image.

With the Clean, Metropolitan, and Mosaic Themes, the banner header and description can easily be hidden with a small line of CSS.

If you haven't already, you can select one of the themes at Design > Choose A Theme. Then, you can upload the custom banner image at Design > Banner. (more info)

Choose Banner

With your banner in place, you can now hide the banner header and description to make your banner show through. The CSS code required is below:

    #banner-inner { 
    overflow: visible; 
    padding: 0; 
    border: 0;
    }

    #banner-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    }

    #banner-header a {
    display: block;
    left: 0;
    top: 0;
    height: 330px;
    text-indent: -1000em;
    }

    #banner-description {
    overflow: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    text-indent: -1000em;
    }

Notice the height: 330px; section of the CSS is highlighted. The height needs to be altered to match the exact height of your banner.

Now, go to Design > Custom CSS, enter the CSS in the text field, and click Save Changes to update your blog.

The CSS Cookbook has a plethora of other quick tips which can be applied to the pre-made themes. If you are looking to make changes not covered in the CSS tips, ask the Typepad community in the forum where other bloggers and the Typepad support team can answer your questions.

comments powered by Disqus