CSS Cookbook

  • Getting Started
  • Banner
  • Blog/Background
  • Column Widths
  • Content Area
  • Navigation Bar
  • Posts
  • Sidebar

The Clean Theme is designed to be easily customizable with CSS - as much or as little as you'd like. To get you started, we've organized this directory by each area of the standard TypePad templates, with code you can copy and paste right into the Custom CSS page. You can use the code as-is or make your own customizations from there.

If you haven't already set up the Clean framework on your blog, head over here first.

You can customize a lot, or customize a little... it's up to you! Choose your own adventure from the topics below:

Banner

  • Change the banner background
  • Change the banner title strip
  • Change the banner size
  • Add a text-only banner (no image)
  • Add an image-only banner (no text)
  • Add a banner border
  • Create a banner that stretches the full width of the screen
  • Create a banner with an overlapped text effect
  • Create a banner with an inset text effect

Blog/Background

  • Change the blog background color
  • Add a blog background image
  • Change the font family for blog elements
  • Add borders around blog elements
  • Add borders around blog elements #2 - stitched effect
  • Add a shadow across the top of the page

Content Area

  • Change the container background color
  • Add a container border
  • Change the margin above the container
  • Change the side margin between the content and container edge
  • Change the container width
  • Change the margin between the nav bar and content area
  • Add a border around the content area

Navigation Bar

  • Change the nav bar color and border
  • Center the links in the nav bar
  • Move the nav bar to the top of the page
  • Add the search form to the nav bar
  • Use multiple link colors in the nav bar
  • Style the nav bar as hanging tabs

Sidebar

  • Fill the sidebar columns with color
  • Change the color of sidebar items
  • Style author photo in the sidebar
  • Add a fun polaroid sidebar menu
  • Add a sidebar hover list
  • Add a messy sidebar list
  • Add a fancy TypePad badge

Posts

  • Change the color of post items
  • Add a post divider
  • Change the border of images in posts
  • Style image caption
  • Style blockquotes
  • Hide the Featured Post title and footer
  • Style the Featured Post
  • Change the line spacing in posts
  • Add a date header ribbon

Column Widths

  • Three Column Layout
  • Three Column-Right Layout
  • Two Column-Left Layout
  • Two Column-Right Layout
  • One Column Layout


in Getting Started | Permalink | Comments (0)

Reblog (0) | | |

Next »

Search

Recent Posts

  • Style the nav bar as hanging tabs
  • Add a fancy TypePad badge
  • Use multiple link colors in the nav bar
  • Add a sidebar hover list
  • Add a shadow across the top of the page
  • Add a date header ribbon
  • Add a fun polaroid sidebar menu
  • Add a messy sidebar list
  • Create a banner with an overlapped text effect
  • Create a banner with an inset text effect
Subscribe to this blog's feed
Blog powered by Typepad