Naked Source: CSS Reboot

Skip to a section
• “Comment Blocks](#comments
• “Left Sidebar Links](#left
• “Right Sidebar Links 1](#right1
• “Right Sidebar Links 2](#right2
• “Transparency Effect](#trans
• “The Main Menu](#menu
• “Waffle Border on Images](#border
• “Vertical Tag Clouds](#keywords

As a follow up to the “About the New Design](/about-the-new-design post I’m going to share the source behind some aspects to my site. This is nothing you couldn’t dig up on your own, but I thought I’d make it easier for you by posting them in a sort of step-by-step fashion here.

Comment Blocks

!/images/151.png! !/images/152.png!

h3(code). Comment Blocks

.comment_block a,
.comment_block_none a
{
    float:right;
    text-align:center;
    display:block;
    font-family: "arial black", sans-serif;
    margin: 10px;
    padding: 5px 0 0 0;
    line-height: 1;
    font-size: 25px;
    height: 30px;
    width: 40px;
    border: 5px solid #f2f2f2;
}
.comment_block a
{
    color:#A1B14D;
    background: #A1B14D;
}
.comment_block_none a
{
    color:#C4591D;
    background: #C4591D;
}
.comment_block a:hover,
.comment_block_none a:hover
{
    color:#fff;
    border: 5px solid #e5e5e5;
}
.comment_block a:visited,
.comment_block_none a:visited
{
    background: #ccc;
    color:#fff;
    padding:5px 0 0 0;
}

Sidebar Links

!(border)/images/149.png!

h3(code). Left Sidebar

#sidebar-1 ul
{
    width: 100%;
    list-style:none;
    margin:0;
}
#sidebar-1 ul li a
{
    width: 100%;
    height: 1%;
    display:block;
    padding:5px 15px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #fff;
}
#sidebar-1 ul li a:hover
{
    background: #4F90C2;
    color: #fff;
    border-top: 1px solid #326E9C;
    border-bottom: 1px solid #326E9C;
}

!(border)/images/148.png!

h3(code). Right Sidebar 1

#sidebar-1 ul
{
    width: 100%;
    list-style:none;
    margin:0;
}
#sidebar-2 ul li a
{
    height: 1%;
    padding: 2px 10px;
    display:block;
    border-top: 1px solid #D0D0D0;
}
#sidebar-2 ul li a:hover
{
    background: #fff;
}

Right Sidebar – Dark

!(border)/images/183.png! This was done differently for different links lists depending on the output html. Ma.gnolia’s links list uses <dt>/<dd> tags so I had to style those a little differently that my other links lists which use <ul> tags.

h3(code). Right Sidebar 2

.magnolia-linkroll dt
{
    border-bottom: 1px solid #ccc;
}
.magnolia-linkroll dt a
{
    background: #BFBFBF;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    color: #000;
    padding: 5px 20px;
    display: block;
    height: 1%;
}
.magnolia-linkroll dt a:hover
{
    background: #555;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    color: #fff;
}
.magnolia-linkroll dd
{
    padding: 0 20px 5px;
}

Transparency Effect on Banner

!(center)/images/185.png! !(center)/images/184.png!

This is probably the one I get asked about the most. I first started using this technique a little more than a year ago on my old blog and I really liked the fact that I could make my ads more discreet and not so in-your-face. Not only do I get more respect from readers, I’ve actually seen more clicks on the ads simply because they’re less offensive.

Note: This requires a mouseover command to change the class for the link and although it does work in IE, it only works on the last occurrence, so if you have three transparencies, only the last one that loads will appear transparent. All other occurrences will be ignored.

h3(code). Transparency HTML

h3(code). Transparency CSS

div.transOFF
{
    margin: 0;
}
div.transON
{
    margin: 0;
    opacity: .30;
    filter: alpha(opacity=30);
    -moz-opacity: .3;
}

!(border)http://nataliejost.com/images/150.jpg)

h3(code). The Hated Hidden Menu

ul#main_menu
{
    position:absolute; bottom:0; left: 0;
    list-style:none;
    width: 700px;
    font: 25px "Arial Black", arial, sans-serif;
    background: transparent url(menu.jpg) no-repeat center left;
}
ul#main_menu li
{
    float:left;
    display:block;
    height: 1%;
}
ul#main_menu li a
{
    float:left;
    display:block;
    height: 1%;
    padding: 20px 10px 5px 10px;
    color: #f2f2f2;
}
ul#main_menu li a:hover
{
    background: #ccc url(menu_hover.gif) repeat-x bottom left;
}
ul#main_menu li a.elsewhere
{
    padding-right: 8px;
}
/* active links*/
body#active_section ul#main_menu li a.active_section
{
    background: #fff;
    color: #e1e1e1;
}

Waffle Border on Images

!/images/186.png! This is nothing fancy really, just a fun thing I decided to do here because (as I’ve said before) it’s my blog and I have room to be selfish here. All I did was give my images a dark gray background and then put a thick dotted border in white and it came out with a waffle look. It doesn’t work with IE, but what does? I wouldn’t recommend using this wacky border on everything because it is just that… an eccentricity. It’s fun and among the many unconventional things I put out here, but if you get to know me you know it’s just who I am. Life, and web design, should be alot more fun that some people make it out to be these days, so have fun with it!

h3(code). Waffle Border

img.border
{
    border: 3px dotted #fff;
    background: #555;
    padding: 2px;
}

Vertical Tag Clouds as Keywords

The keywords are done with a “Textpattern](http://textpattern.com “plugin for tagging](http://aroussi.com/article/45/tagging-textpattern and I did some crafty CSS to get them to line up vertically instead of in a typical tag cloud. You’ll see this on every post as well as on the “sitemap](/sitemap page.

!/images/187.png! The way the tag cloud is set up with commas separating each linked tag, so the first thing I did was hide the commas by setting the text color to match the background of the page or the keywords box. Because the links are styled separately this only hides the commas.Next I had to style the links vertically, but that’s actually pretty simple to do by displaying them as block elements. Finally, after blocking the links into a vertical list they needed to be spaced closer together, so I put a negative margin on the bottom of each tag in order to bring up the one below it. In doing that, you’ll notice it makes the bottom of the block come up as well, which is why you’ll see such padding on the bottom of the containing block. Anyway, here’s the code…

h3(code). Keyword CSS

p.tags
{
    color: #ffe;
    display:block;
    float:right;
    width: 100px;
    margin: 10px;
    border: 1px solid #ccc;
    background: #ffe;
    padding: 7px 1px 30px 0;
}
p.tags a
{
    display:block;
    margin: 0 0 -23px 0;
    padding: 0 0 0 5px;
}

Other posts about the redesign

• Personal Branding
  The idea behind all this new jive
• Designing My Brand
  How I actually came up with the concept and designed the brand
• Standards for Life
  About the name and what it means for me and for the future of this site
• About the New Design
  Some of the hows and whys behind the new look

Tweet me (but don't mistweet me)

Copyright © 2006 – 2009 Natalie Jost