how to add a border around objects embedded into blog posts (such as a google map or a youtube / vimeo video)

If the images on your blog have borders you may wish to have them around other visual material as well, so as to achieve design consistency. Google maps are one such bothersome element, I think. In order to place a border around a google map, look for the embedded code in your post and add what is highlighted in black:

<iframe style="border:Xpx solid #yourhexcode" frameborder="0" width="X" height="X" marginheight="0" marginwidth="0" scrolling="no" src="yourmapurl" width="X"></iframe>

And just tried the same snippet, placed in exactly the same location on a youtube video. Yayy! Same exact result!

<iframe style="border:8px solid #111111" width="500" height="410" src="hhttp://www.youtube.com/embed/rHZUPJji6w8" frameborder="0" allowfullscreen></iframe>

And vimeo too! With this one, although the aspect ratio is the same (3 x 4) as the youtube video, I had to tweak the overall box size a bit since the player configuration seems to be slightly different. But no biggie, done in a second!

<iframe style="border:8px solid #111111" src="http://player.vimeo.com/video/3699840?title=0&amp;byline=0&amp;portrait=0" width="500" height="380" frameborder="0"></iframe>

(Note: One thing to bear in mind is that if you want a border do not forget to size the embedded output accordingly. As an example, the post width on this site is 515 pixels, however I set the video files at 500 pixels in order to accommodate the 8 pixel border around them).

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

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.

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