Blogger Sidebar

On some of my Blogger sidebar widgets I wanted to put the border on the bottom
instead of the top, make it solid instead of dotted, and give it a different color.
Here was the CSS rule before:

.sidebar .widget, .main .widget { 
  border-bottom:1px dotted $bordercolor; 
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

I changed it by breaking the .sidebar .widget selector out into a separate rule as follows:

 
.main .widget { 
  border-bottom:1px dotted $bordercolor; 
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

.sidebar .widget { 
  border-top:1px solid #999999;
  margin:0 0 1.5em;
  padding:0 0 0.5em;
}

(I also changed the bottom padding.) That worked fine, but then I wanted to make that part of the right sidebar narrower to align with some other sidebar content above it. I went into the .sidebar rule and set a width of 150px and gave it some left margin to scoot it over to the right and make it line up.

.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
  width: 150px;        /* I added this line */
  margin-left: 21px;   /* and this one */
}

This turned out to be a mistake because the sidebar class is used in more than one place, namely on the left sidebar as well as the one on the right that I wanted to change. So this broke my left sidebar, pushing my CSS Bakery image out to the right and covering up the border line that's normally to the right of the image.

The solution was to target my changes more specifically at the right sidebar, which has an id="sidebar" (as well as a class of "sidebar", which was the way Blogger
set things up).

So here's the change I ended up with:

.sidebar {  /* the existing rule */
  color: $sidebartextcolor;
  line-height: 1.5em;
}

#sidebar { /* the rule I added */
  width: 150px;
  margin-left: 21px;
}

That fixed the problem. It's probably not a great idea to have an id with the
same name as a class, as it can lead to confusion, especially when you accidentally write .foo instead of #foo. Other than that, it is a good practice to give similar page elements the same class name so you can write one rule to change them all at once. You can always use the element's ID, to target it with a specific rule.

But, also remember to not make the mistake of scattering too many IDs and Classes throughout the markup, since you can often write a specific enough rule using descendant selectors.

There was a font mismatch between the text and numbering in the lower sidebar. The original Blogger code was providing the numbers, the text styling was mine.

.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;

  color: #999999; 
  font-weight: 400;
  font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
  font-size: 12px;
  }

.main .widget { 
  border-bottom:1px dotted $bordercolor; 
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}
 
.sidebar .widget { 
  border-top:1px solid #999999;
  margin:0 0 1.5em;
  padding:0 0 0.5em;
}

A better approach is to streamline the font styling so that the same code is not repeated throughout which is something I'll do in the clean-up phase.


One last change was putting more space between the search and the start of categories.

  .navdiv { margin-bottom: 40px; }

did that in the CSS.