December 30

0 comments

Modifying your Blogger template with CSS.

By Christopher Mendla

December 30, 2017


Last Updated on November 29, 2019 by Christopher G Mendla

NOTE – be sure to backup your blog and template before trying this. For most users, there should not be a problem but backups can’t hurt.

The problem with the template for this blog was that when you looked at posts by month or label, they all seemed to run together.  The default post heading was not standing out as you can see below. Actually, it was worse than the image in that followed links were grey, not black.

One of the first things I did was to take the standard data at the end of each post and make that a light beige color as shown. That helped a bit. Then I tweaked the settings and CSS to highlight the post titles as shown below.




You can see that the post titles now stand out a lot more.

The first step was to go to the blog and do an INSPECT on the post title. The results are below. The class I was looking to change was h3.post-title.  I did not want to change all H3 tags as I might use them in pages or posts.

 

To change things, go to THEME, then choose CUSTOMIZE for your theme. Note – if you customize the HTML directly, you could run into issues if the theme is updated.

I changed the colors for active and passive links. Then I added the CSS below. Keep in mind that the color setting only affects unclicked links. (It might also be that the colors for links supersede the colors set for the H3 tag.
I added CSS for h3.post-title which sets the background color to lightblue.

UPDATE Dec2017 – I added some additional CSS to make the blockquotes stand out a little better

.tr_bq {
background-color: #E0FFFF;
border-style: outset;
border: 2px solid blue;
border-radius: 5px;
padding: 6px;
}

Christopher Mendla

About the author

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}