Changing Your Blog’s Background with Custom CSS
March 28, 2008
This is the second post in a two-part series about Custom CSS by TypePad team member Andy Wibbels:
In our previous lesson, we looked at Colin Beavan’s blog No Impact Man and how he used TypePad’s Custom CSS feature to tweak a pre-defined theme with a spankin’ new page banner. In this quick lesson, we’ll see how he changed the background of his blog to add some visual texture.
Reminder: Custom CSS is available to TypePad Pro, Premium and Business Class customers. To access Custom CSS, login to TypePad and go to Weblogs > (Your Weblog) > Design then scroll down and click on Edit Custom CSS.
Taking a look at Colin’s blog you’ll see that the background is a diagonal cross-hatch pattern.
As mentioned last time, we recommend you use a pre-defined theme as the foundation for your Custom CSS tweaks. For No Impact Man, Colin chose the Hills Green pre-defined theme. Here is how the blog looks, with Hills Green, before any Custom CSS is applied:
Notice the light-blue to white gradient that the whole blog sits on top of:
Here’s the Custom CSS that Colin used to change from the gradient to the diagonal
cross-hatch:
body { background-image:
url(http://www.missmaryk.com/nimbg3.gif); background-repeat: repeat; }
This tells the browser, Take the graphic nimbg3.gif and use it for the background, repeat it as much as needed to fill up the background. (You’ll often hear this called ‘tiling’ because it is like using the graphic to ‘tile’ across all the available space.)
Your turn: Upload a graphic for your background and then add to your Custom CSS:
body { background-image:
url(http://link-to-your-graphic-goes-here.com/filename.gif); background-repeat:
repeat; }
If you have a graphic you don't want to have repeated - or tiled - across the screen, simply tell the browser not to repeat it and it will appear just one time, in the upper left:
body { background-image:
url("http://link-to-your-graphic-goes-here.com/filename.gif");
background-repeat: no-repeat; }
Save and reload.
Removing Your Custom CSS Styles
To undo any of these tweaks, simply delete that portion of the Custom CSS code, save and reload your blog.
More About CSS
If you want to delve a bit deeper into CSS and TypePad here are a few resources:
- View the top-requested CSS tips in the TypePad Knowledge Base: adding background images, changing column widths, and creating a banner.
- To get familiar with the structure of the pages TypePad outputs, reference the TypePad Weblog Page Structure documentation and graphic.
For more tutorials on learning CSS:
- The W3 Schools CSS site
- HTML Dog's CSS Beginner Tutorial
- West Civ's Complete CSS Guide
I liked the two articles about Custom CSS. More of that. Very well done :-)
Posted by: Hans-Joerg (ME) | March 29, 2008 at 09:13 AM