This post documents my lazy way of modifying the WordPress theme Bones by making tiny CSS modifications – incrementally improving the look and feel of the Tinynow Blog.

Here is how we start…

Tweak #1 is not a best practice. I may go back and change this in the PHP, but for now, I will remove the part at the top of each post that says, “Read more on…” because it is repetitive and breaks up the flow of the typography. I have read that you should not make changes in a half-a**ed way if you know if you are going to have to go back and do it again, but I  may decide to keep this functionality and a change to the CSS is very easy to change back.

.read-more {display:none;}

Way too much white-space below the copy.

It is actually caused by a few things, but the margin and padding on the bottom of a div with the class of article[*id="post-"] footer. This is intermediate to advanced level CSS and a very interesting and economical way of selecting elements. Because every post is automatically framed in an article element that has a unique id that begins like this:

<article id="post-12"

The [*id="post-"] looks for any id that starts with “post-” This allows for it to apply across many situations, but because id is a very specific way of selecting something, it will override more general css declarations

So, we do this:

article[*id="post-"] footer {padding-bottom: 0; margin-bottom: 0;}