Simpla Way: CSS

This is the second in a series of posts about the current appearance of this blog. The first post explains why I’m blogging here at WordPress.com, and using the Simpla theme.

This post is about Custom CSS. Although blogging at WordPress.com is free of charge, there is a charge for custom CSS. For me, control over my blog’s style sheet is well worth the ~US$1/month; for others, it’s not worth it. If you have a WordPress.com blog, you can go from Dashboard to Presentation to Edit CSS, and preview the feature.

Note that: “Your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules.” Most of my stylesheet came from cutting and pasting from the Simpla stylesheet, and replacing values.

But the CSS for images came from the stylesheet for my previous blog. I like images at the right of posts, with a little room to breathe.

#content img {
float:right;
border:0;
margin:10px;
}

I wanted the main heading for the blog to be more prominent than the Simpla default, so I made it twice the size of the post heading.

#header h1 {
font-size:4.4em;
}

I wanted the date of each post to be formatted consistently with the post metadata that appears at the foot of the post. In fact, I think that the date is post metadata, and as such belongs with things like the category. But CSS doesn’t control the placement of text, just the style. So the best I could do was copy and paste the formatting from the post metadata to apply it to the date.

.entrytitle h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:0.9em;
}

Turning now from the content to the sidebar, the Simpla CSS gives too much separation between the items on the Blogroll list for my taste. So I took out the dotted line it uses as a separator. But I used it to separate sections of the sidebar from each other.

#sidebar h2 {
border-top:1px dotted #ddd;
}
#sidebar ul li {
border-bottom:0;
margin-bottom:0;
padding:0;
}

Mention of the sidebar brings me to sidebar widgets, and to the third post in the series.