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

Changing Your Page Banner with Custom CSS

The last few weeks we’ve been focusing on great design in TypePad. Today our new TypePad team member Andy Wibbels explains a bit about Custom CSS. Andy’s posts won’t make you a Custom CSS expert, but hopefully they’ll give you some helpful insight or tips. Here is the first post in his 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.

EditcustomcssCustom CSS is available to TypePad Pro, Premium and Business Class customers. To access Custom CSS, log in to TypePad and go to Weblogs > (Your Weblog) > Design. Scroll down and click on Edit 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: Colin Beavan's No Impact Man

One TypePad blog that takes full advantage of Custom CSS is Colin Beavan’s blog about sustainable living, No Impact Man. (Congratulations, Colin, on having your blog and your cause featured in the April issue of Glamour Magazine!) Here’s a screenshot of Colin’s blog:

Stylesafter_2

Nice clean distinctive design, right?  This stunning design was created by Mary K. Elkins.  There are actually a handful of tweaks Colin uses to make his blog design personalized and memorable. Let's break it apart.

Before applying Custom CSS, it is good to select one of the pre-defined themes as your base theme. For No Impact Man, Colin chose the Hills Green pre-defined theme. Here is how the blog looks, with Hills Green, but before any Custom CSS is applied:

Defaultstyles


The most visible change Colin made was to take the existing page banner and flip in his own custom designed banner. He uploaded the new banner and added Custom CSS so browsers would know to use his banner instead of the wintry hills setting. Here's the Custom CSS:

#banner { height: 338px; background-image: url(http://noimpactman.typepad.com/impactheader.jpg);
background-position: 0px 0px; background-repeat: no-repeat; }

This CSS tells the browser to Use this 338 pixel tall 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.

He also did some fancy code to hide the text of his blog's title so it wouldn't appear over the new banner.

#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 tells the browser, Hide the Title and Description text so the banner shows through.

Your turn: Upload your super-fancy custom banner and be sure you know the height of the image as well as what URL it is at. Then add to your Custom CSS:

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

Save and reload your blog. You'll notice that the text of your blog title and description is still on top of the banner. Let's hide it with that code from above:

#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; }

Save and reload and you should now see your custom banner at the top of 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