Changing Your Page Banner with Custom CSS

Update 2020: The instructions provided below are for our older  themes. We recommend you check out our Design Lab themes. The Design Lab provides you with a graphical interface to make changes to dozens of design elements without the need to know any code! You can easily upload a banner image to customize your blog. 

The last few weeks we’ve been focusing on great design in Typepad. Today we will explain a bit about custom CSS. This post will give you some helpful insight and tips. Here is the first post in the two-part series:

A Quick CSS Intro

CSS is short for Cascading Style Sheet and is a feature that allows the customization of the look and feel, layout, and design of your weblog without the need to convert to advanced templates (which we’ll cover in future posts).

A CSS stylesheet is a small file that tells browsers how your blog should appear on the page. It defines the width of the columns, font styles, sizes and colors, margins, background images and other crucial formatting choices. So instead of your blog's code being weighed down with tags that say Make this post title bold and italic and in Arial font... oh and this one too... and this one too... and don't forget this one... all of that style information is centrally located in one file that is loaded once no matter how many pages of a blog a reader views.

Typepad's Custom CSS feature allows bloggers to customize their blog without having to code everything from scratch. You can continue to develop a distinctive blog style that is aligned to your blog's brand and personal taste without the aid of a design team. With Custom CSS, you can turn styles on and off and experiment with various styles and keep or reject changes easily.

Custom CSS is available to Typepad Pro, Premium and Business Class customers. To access Custom CSS, log into Typepad and click on the Blogs tab, then the name of your blog. Click on the Design tab, then Custom CSS. The Custom CSS page loads with a big text box for you to paste in and save your Custom CSS.

Learning by Example: Updating the BBQ Theme

One theme you can use the Custom CSS is the BBQ theme. This theme is a fun picnic and BBQ theme design to showcase cooking blogs. Here is a screenshot of the original BBQ theme applied to a blog.  

A custom banner will help your blog stand out from other bloggers and instantly let readers know they are at a trusted source. 

First, you need to upload your custom banner to your Typepad Library. Click on the Library tab, then File Manager. On the right, upload your banner image. You will see your image file name in a list of files. Click on the chain link to view the download code. You only need to copy the URL and store it where you can get to it again. Once you have the image URL, you can add it to the CSS below. 

To find your Custom CSS, click on the Blog tab, then the name of the blog. Click on the Design tab, then Custom CSS. Here you will paste in the code below. (look)

#banner { height: XXXXpx; background-image: url(http://link-to-your-graphic-goes-here.com/filename.gif); background-position: 0px 0px; background-repeat: no-repeat; }

 

#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }

This CSS #banner tells the browser to use image for the background, put it flush against the left and top sides of the blog and don't repeat it - just show it once. The CSS #banner-inner tells the browser to hide the Title and Description text so the banner shows through.

You do need to update this code with the height of the image and the image URL you saved from the File Library.

To update the image height, change the XX's to the height of the image. 

height: XXXXpx;

To update the image url, remove the url in the parathese and replace it with the URL from your File Library. 

url(http://link-to-your-graphic-goes-here.com/filename.gif)

Click on Save Changes, then view your blog to see your custom banner on your blog. 

But what if the width of your blog is greater than the width of the banner? You can center it.

Go into Custom CSS and enter:

#banner {background-position: center;}

Save and reload.

Alternately you can align the banner flush right with

#banner {background-position: right;}

To undo any of these tweaks, simply delete that portion of the Custom CSS code, save and reload your blog.

Stay Tuned for More Custom CSS
Tomorrow, we’ll take another look at other tweaks and changes you can make using TypePad’s Custom CSS feature.  In the meantime, you can read the Help article "Adding a Banner to a Pre-Defined Theme" and show off your use of Custom CSS by linking to your blog in the comments.

 

 

Comments

[Harold Check]

Very nice tutorial.

[Kevlvn]

You say that Plus users have access to this, but the option does not appear. Was this a mistake?

[Rick Stegall]

Thanks for the tips - I've always used the custom design feature, but now I'm enjoying being able to use and tweak the new pre-defined design templates. My blog: http://humaninterest.typepad.com/

[Krissy]

@Kevin Levin: Thanks so much for catching that typo - we meant to say "Pro, Premium and Business Class" and we just updated to fix it. I apologize for any confusion this might have caused!

[Isela]

Is the code already in there so the new image on the banner maintains it going to the "main" section of the blog? I went to the website provided and clicking on the banner returns us to the "main" page so I was just checking.

[Katie from EF]

Is it possible to change the title tag (the type in the top of the browser window) in Custom CSS? Right now, the TypePad default has BLOG NAME: POST TITLE.

For search engine optimization, I'd really like to be able to change it. At the very least, I'd like to reverse the order so it's POST TITLE | BLOG NAME.

Can this be done in Custom CSS?

[BDR]

Suppose I just wanted to use a larger font? No graphics, just the same font, larger?

I just want BLCKDGRD bigger, centered.

[Ginevra]

awesome post!

[TypePad Support]

@Eric Beato: You will need to use Advanced Templates to change the order of blog's title tag.

@Jeff Popovich: Using Custom CSS, you can increase the size of the font. However, the class you will edit depends on where the text is located in your blog. To change the banner-header font size, for example, you would use:

#banner-header { font-size: 40px; }

And adjust the 40px as needed. Please open a Help Ticket in your TypePad account, and we can help you determine which class needs to be edited.

- Jen

[Andrew]

My problem is in actually creating the banner itself. What cool tools (commericial and free) are out there that actually help people create GOOD banners for use in typepad.
I know there are some free banner creators out there - but they are only pretty basic. I want something that looks professional, like others I have seen in typepad.

Thanks

[Jane Doe]

Hi Andrew,

Most people use image editing software that they have on their computer. Any common image editing program will do for creating a banner. Which one is best for you will depend on your budget and needs. If you are looking for an online tool, SnipShot.com provides some basic image editing functionality.

I hope this helps!

Thanks,
Laura

[The Chemistry Group]

very helpful post - thanks alot!

[Tracy Datlen]

Hello, I have a question.
I think that using this code disables the navigation bar.
Correct me if I'm wrong.

Thank you.

[Andy]

It shouldn't interfere with the navigation bar - are you having this experience? Please let us know!

[Isela]

I am having troubles...I forgot how I did my first blog and I am currently creating a second one and the banner code is interfering with the navigation bar...if I take out the code that hides the description and title

#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }

The navigation bar works but if I put it in it doesn't. Help!

[Isela]

Found my answer. The problem is in the sample code given here. Look for the following in the code that hides the title and description:

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

Where it says height: 338px, replace the numbers with the height of your banner. The sample code has the height of the banner that they use for the sample.

Hope this helps.