Two New Themes From HP
Changing Your Blog’s Background with Custom CSS

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. 

Divider

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.

Custom CSSTypepad'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.  

Original BBQ Banner

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. 

Download code

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 powered by Disqus