The Process Ninja
Spread the word, reap the reward: Join TypePad's Affiliate Program!

Weekend Project: Eye-Catching Sidebar Menus

TypePad's Pages feature is pretty nifty - compose your Pages with the info you want to include, drop a  module into your sidebar that lists them all out nicely, and voila - instant menu. But why stop there? You can use CSS to fancy it up and draw attention to that important information.

Let's turn this:


Into this:


If you're unfamiliar with TypePad's Custom CSS feature, this will be a good way to get your feet wet. First, let's hide the "Pages" header.

.module-archives .module-header { display: none; }

Next, we'll style the links so they're black with no underline:

.module-archives .module-list-item a {
color: #000;
text-decoration: none;

Finally, we'll style each list-item. I've made mine very simple and sleek, so they stand out but aren't too distracting:

.module-archives .module-list-item {
margin: 0 0 2px 0;
padding: 5px 5px 5px 14px;
background-color: #EFEFEF;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ccc;

See how the subtle borders make the links look almost like buttons? That's CSS magic! Of course, you can use any colors you want.


Lori Seaborg

I enjoy these weekend articles. Please keep them coming! I'm learning so much!


We enjoy them too, Lori! So glad you're taking valuable info away from these articles. :)

Kofla Olivieri

I am clueless as always, but thanks.
Kofla @ God of War Diaries

Account Deleted

Again, thank you.
These tips are wonderful.

Serge Lumoo Muhima

le fran├žais avec moi je vous en prie

The comments to this entry are closed.