Introduction

When one is in the WordPress Dashboard and clicks the Customize Theme button, one option is “Additional CSS.” There’s a text box in which one can add entries to the cascading style sheet. Modifying the CSS is the preferred mechanism for adjusting the appearance of information as it is displayed in a browser.

Among the advantages of CSS styles is the fact that you can normally change something in only one place (the CSS) and that change will be reflected throughout all the pages of the web log. Conversely, the changes are discriminating, by which I mean that a well-designed web page allows you to change what you want and only what you want. For example, you might want to change the headings to a different color while leaving the sub-headings black: CSS enables this.

Once I had installed the “Blog Mantra” theme, I soon saw elements I wanted to modify. This rest of this post explains those changes.

Headings

As you see in the screen shot below, the title of each post (using the current theme) appears in a larger, black typeface. If you look at the HTML (viewing the source of a post in a browser—not in the editor), you find that the title is “h3” (for heading 3). This is a style that can be specified in the CSS.

Accordingly, if I want to add headings to a post (as with “Introduction” and “Headings” above), I need to use h4 (so that the headings are subordinate to the title). The problem is that the h4 style by default displays text larger than the h3 style. Thus, a need for “Additional CSS” arises.

In order to get make the “h3” more visible and the “h4” obviously subordinate, I added the following entry into the Additional CSS box:
h3 { font-size: 22px; font-family: sans-serif; margin: 1.25em; color: black }
h4 { font-size: 18px; font-family: sans-serif; margin: 1.25em; color: #0088C3 }

Space Between Paragraphs

The next change needed was to add space below each paragraph in order to obviate the need to put in extra carriage returns. This change was trickier because the div that holds the paragraph styles overrides the paragraphs (<p>). Consequently, I had to locate the div class that was holding the body of the post and then add some padding:
.detail-page p { padding: 0 0 20px 0; }

That worked.

Blockquote

The theme’s blockquotes looked like this:

In order to increase the quote’s contrast with the surrounding text, I wanted to change the color & width of the left-hand border, so I added this to the CSS:

blockquote {
    margin: 0px 0 10px 0;
    border-left: 3px solid darkgreen;
}

I also wanted to change the font-family (and some spacing), so I added this:

blockquote p {
    font-family: "Consolas",monospace;
    font-size: 16px;
    letter-spacing:1px
}

Finally, I wanted to change the typeface color. My first attempt failed when, in that “blockquote p” entry above, I included, color: rgb(99,99,99). That value was ignored because the color of the text was inherited from a parent class. To change the typeface color, I added this (along with a change to the padding for blockquote paragraphs):

.detail-page .primary-wrapper blockquote p {
	color: rgb(99,99,99);
        padding:0px 0 0px 0;
}

Here is the result:

line 1
line 2 and
line 3

It’s not a big change but it assures me that I now can control the appearance.

Next post? The default “Comments” in WordPress are bringing in primarily spam. All spam, to date. In the next post I’ll disable the default Comments and replace them with Disqus—which is so restrictive I cannot get half my friends to leave comments.