Editing The Post Box In Blogger

This guide is a description of how to edit just the area where the posts are written, from just above the title all the way down to, and including, the labels. Editing the post box is something that I found difficult to tailor properly in the Template Designer, jumping into the CSS and HTML turned out to be the best way of adjusting the look to what I wanted. The problem with this is that there is a lot that can go wrong when making these specific changes to a site that you haven’t coded yourself as you have no idea where to start looking for the specific code. One trick that I use to find the relevant sections is the Inspect Element option provided in Google’s Chrome browser.

To access this open any website you want in Chrome, then right click on the section you are interested in (menus, text, boxes anything) and choose Inspect Element from the drop down menu. This then shows you the applicable HTML and CSS code for that section. You will then notice something else that is quite frankly amazing, as you move the mouse cursor over different parts of the HTML code shown on the bottom of the screen, Chrome will in turn highlight the applicable section of the site page that is being affected by that part of the code! This is incredibly helpful and I use it to speed up page coding massively. Anyway, back to editing the posting box.

1. The first thing was to add a border to the post section to match that of the date header. In the date head image I used I had a two pixel orange border, so I will need the same here. In Blogger go to the Design View and click on Edit HTML. As always, download the full template to keep a backup before you make any changes. Do a search and find the following code:

/* Posts

Below this I added the following code:

.post { padding: 5px; border: 2px solid #ff9900; background-color: #080808; background-image: url(http://lh4.ggpht.com/_1juOtkYIc6w/TSh_LOFTPNI/AAAAAAAAAB4/kA2vI66Acck/s800/post_fade.png); background-repeat: repeat-x;}

The .post definition doesn’t exist by default so you will need to copy and add the entire code. In this case I added padding to keep the text away from the border. The border itself is set at 2px, orange, and as a solid line. Next I added a background-color of a dark grey to give some difference from a black site background. I also added a background-image (10x100 pixels) to give a soft fade from black to the background color at the top of the posts to get rid of the inherent block effect of large areas of dark solid colors. This image was made in GIMP using the gradient brush of black to transparency set to repeat only horizontally.

2. The next edit was to the post title. Editing this in the HTML gives more control over the appearance than in the Template Designer. The following is the code I used:

h3.post-title {
margin-top: 0px;
background:url(http://lh6.ggpht.com/_1juOtkYIc6w/TSiWkI-Zg4I/AAAAAAAAACA/GSgFxOyxFJY/s800/post_title.png) no-repeat;
padding:0 0 4px 28px;
font-variant: small-caps;
color: #ff9900;
}

h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
font-variant: small-caps;
}

To make the title always appear with small capitals I had to add the code in 2 places. This is so that the capitals appear both on the front page and also in the full post view. To do this you just need to add a font-variant. There are other font variants available should you wish to try something different, just do a google search to see the available options.

The rest of the edits can be done in h3.post-title. Here I set the color of the post title to orange and also added an image to always appear next to the post title. I added the image as a background and set it to no repeat. To stop the text from appearing on top of the image I added padding to the text to move it to the right. Depending on the size of your image you may need to change these values.

Once again, experiment with the CSS here to see what else you come up with to suit your needs.

NB. I check everything in Chrome and Firefox to make sure it looks right. In Internet Explorer some things render differently than in the other browsers. Though I do check to make sure nothing is horrendously out of place. I want my site to look nice, and both Chrome and Firefox seem to render the code more accurately so I will stick to optimizing for them.