2011-06-08

Remove border around Blogger images

The usage of the "Available on the App Store" badge is strictly defined by the App Store Marketing Guidelines. Therefore, the default border applied to each and every image uploaded to Blogger isn't acceptable and needed to be removed.
The best place to put the badge in is in an image widget in the sidebar, but there is no option to disable the border around the images, so I had to find a way to disable it in the HTML template.
It was easier as I thought, because searching for img in the template lead me to the following CSS-definition line:

.post-body img, .post-body .tr-caption-container, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

As it can be seen the border and the shadow definitions apply to the image widget as well, therefore simply removing the reference to the desired class (in my case .Image img) resulted in the outcome visible in the sidebar.

No comments:

Post a Comment