6.04.2011

blogspot stuff: adding a background color to the date header of the awesome.inc template

Find this code in the HTML editor (widgets expanded, of course):
.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

Then replace that one with this one:
.main-inner .widget h2.date-header span {
  font: $(date.font);
  padding: 1px;
  margin-left: 14px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
  background: #yourhexcode
}

As you can see I have removed one line and also changed the padding. I also added a left margin in order to align stuff, your values may again be quite different than these. These are things that looked good with my particular design, you may want to go with other values or even keep the block display altogether, in which case the colored area will stretch across the width of the post as a bar.

.................................................................................................................................

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.