CSS Cookbook

Fill sidebar columns with color

Here we will color the sidebar columns and post content area column:

We'll set the container and the sidebar columns to the same color (khaki) and set the content area with a different color (ivory):

/* Set background color */ body { background: #888; } /* Color sidebar columns */ #container { background: Khaki; } /* Color content column in all layouts */ .layout-one-column #container, .layout-two-column-left #beta, .layout-two-column-right #alpha, .layout-three-column #beta, .layout-three-column-right #alpha { background: Ivory; } /* Right hand columns - remove padding */ .layout-three-column #gamma .module, .layout-two-column-right #beta .module { padding-left: 0px; }

See also: Change the margin between the nav bar and content area

Style author photo in the sidebar

You can edit your Profile to change your author image here. A customization option is to add a thick border around the image.

.module-photo img { border: 5px solid #999999; }

Change the color of sidebar items

Sidebar headers

.module-header, .module-header a { color: #000000; }

Sidebar links

.module-content a { color: #003366; } .module-content a:visited { color: #999999; } .module-content a:hover, .module-content a:visited:hover { color: #03366; }

Sidebar text

.module-content { color: #000000; }

Add a messy sidebar list

Here we add formatting to the sidebar modules to give it the look of a "messy list" - this rotates each content item a little bit each way so it looks haphazard. It's a funky and fun and a way to add some interest:

.module ul li { padding: 8px 15px; margin: 10px 0; } .module ul li:nth-child(odd) { background: rgba(50,50,50,0.1); } .module ul li:nth-child(odd):hover { background: rgba(50,50,50,0.3); } .module ul li:nth-child(even) { background: rgba(50,50,50,0.3); } .module ul li:nth-child(even):hover { background: rgba(50,50,50,0.5); } .module ul li:nth-child(3n+1) { -webkit-transform:rotate(-0.6deg); -moz-transform:rotate(-0.6deg); transform:rotate(-0.6deg); } .module ul li:nth-child(3n+2) { -webkit-transform:rotate(0.5deg); -moz-transform:rotate(0.5deg); transform:rotate(0.5deg); } .module ul li:nth-child(3n+3) { -webkit-transform:rotate(0.2deg); -moz-transform:rotate(0.2deg); transform:rotate(0.2deg); }

Add a fun polaroid sidebar menu

This is fun menu that makes your images look like polaroid pictures and does a cool zoom effect when you hover over it:

See it live in action here!

This is done completely in CSS with no extra scripts added! Thanks to zurb.com for the code. This has been modified to copy & paste into TypePad.

1. Upload your images

The menu uses three images. Upload the images you would like to use to your File Manager. We sized our images to 100px so it only needs to load a small file size.

   

2. Add the HTML to your sidebar

In Design > Content, under Modules, select "Embed your own HTML" to add this new HTML module. Here you will enter the code for the menu:

<ul class="polaroids-menu"> <li><a href="http://www.example.com" title="My Family"><img src="https://themes.typepad.com/images/polaroid-myfamily.jpg" /></a></li> <li><a href="http://www.example.com" title="About Me"><img src="https://themes.typepad.com/images/polaroid-aboutme.jpg" /></a></li> <li><a href="http://www.example.com" title="My Shop"><img src="https://themes.typepad.com/images/polaroid-myshop.jpg" /></a></li> </ul>

Each of the three items in the menu has a list item:

<a href="http://www.example.com" title="My Family">
<img src="http://themes.typepad.com/images/polaroid-myfamily.jpg" />
</a>

The green URL is where you put the link for the page to go to when the image is clicked. The red title is the title that will appear under the picture. And the blue is the location of the image in the file manager.

3. Add the CSS

First, we'll want to make sure we have enough room in our sidebar. Here we are using the Two-Column-Right layout so we'll add this to our Custom CSS to change the column widths:

/*---2 Column-Right Layout----------------------*/ .layout-two-column-right #alpha { width: 650px; } .layout-two-column-right #beta { width: 310px; }

And then we'll add the CSS to make it fancy, in our Custom CSS area:

ul.polaroids-menu { width: 280px; margin: 30px 0 18px -55px; list-style-type: none; } ul.polaroids-menu a, ul.polaroids-menu a:hover { display: inline; float: left; width: auto; margin: 0 0 27px 30px; padding: 6px 6px 3px; background: #fff; font-family: "Marker Felt", sans-serif; text-align: center; text-decoration: none; color: #333; font-size: 14px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* default/first image rotation */ -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; } ul.polaroids-menu img { display: block; width: 80px; margin-bottom: 6px; border-radius: 0; border: 0; } ul.polaroids-menu a:after { content: attr(title); } /* #2 About Me */ ul.polaroids-menu li:nth-child(2n) a { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); margin-left: -8px; margin-top: 20px; } /* #3 My Shop */ ul.polaroids-menu li:nth-child(3n) a { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); margin-top: -175px; margin-left: 185px; } /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */ ul.polaroids-menu li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }

That's it! Enjoy!

Additional links to learn more

• css-tricks.com: How nth-child Works

Add a sidebar hover list

This sidebar menu is just like the messy sidebar list, but with straight lines instead of tilted:

You can also see it in action on the sidebar here on the Style Guide site.

.module-archives ul li { padding: 8px 15px; margin: 5px 0; } .module-archives a, .module-archives a:hover {color: #444;} .module ul li:nth-child(odd) { background: rgba(50,50,50,0.1); } .module ul li:nth-child(odd):hover { background: rgba(50,50,50,0.4); } .module ul li:nth-child(even) { background: rgba(50,50,50,0.2); } .module ul li:nth-child(even):hover { background: rgba(50,50,50,0.4); }

Add a fancy TypePad badge

You can add images to your sidebar using an Embed your own HTML module, but you can also do this with CSS only and using the existing Powered by TypePad module.

Here is our sidebar with the fancy TypePad badge:

In Design > Content, select the Powered by TypePad module and position it in your sidebar. Add the following Custom CSS and you're all set:

.module-powered { text-indent: -9999px; background: url("http://themes.typepad.com/images/poweredby.png"); width: 128px; height: 120px; margin: 5px; }

Feel free to link to this badge on your site!