WordPress Tweaks

WordPress enables some very low-level tweaking in a website’s appearance. This goes far deeper than font and color selection. It’s done through something called CSS which is an easy-to-remember abbreviation for the mouthful it represents, Cascaded Style Sheets.

But please note. The “minor” changes outlined below are not for the novice. I’m presenting them here for those who want to take the next step.

The easiest way to add these to a WordPress website is via the Dashboard. In the Appearance category, you’ll find CSS or Edit CSS, depending on the theme you’ve chosen.

(These can also be added by creating what WordPress calls a child theme if you are hosting your website independently from them. In that case, and assuming you’re on a Linux-hosted platform, you’ll need ssh (secure shell) access from your website provider, and you’ll also want to be versed in using the Linux command line. But this route is very much for experts only.)

Here are my additions — they are in effect for what you see on your computer screen right now:

body, input, textarea {
 font: 15px Georgia, "Times New Roman", Times, serif; /* Serif'd fonts in body. EDS 08/2011 */
 line-height: 1.2; /* Tighter line spacing. EDS 08/2011 */
}

h1,h2,h3,h4,h5,h6 {
 font: 15px "Poor Richard", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Better title font. EDS 08/2011 */
}

p {
 margin-bottom: 0.6em; /* Tighter vertical spacing. EDS 08/2011 */
}

#site-generator {
 display: none; /* Suppress WordPress's link at page bottom I've included one (elsewhere). EDS 08/2011 */
}

blockquote {
 background: #FFF0D6;
}

What does all this mean?

body, input, textarea is most of the text you see. My style changes say to present these in the Georgia font or, if that’s not available on your computer, use “Times New Roman” or just plain “Times” or, finally, default “serif” font you have set in your browser which was probably set by the browser’s author. Fonts with serifs — little flourishes on the ends of each letter — are supposed to be easier to read than non-serif’d fonts.

But most web sites and WordPress (and Blogger) themes don’t follow this practice and, frankly, after reading several paragraphs of this, my eyes get tired.

As you might imagine, the “15px” says to make the text 15 pixels tall. But each of these settings can be overridden somewhere else — that’s what the “cascaded” part of Cascaded Style Sheets means. There can be another style sheet, one nested inside the other, or settings inside your browser that will overrule these settings.

At a typical website, there will be several cascaded style sheets. I visualize them as a series of colored, transparent sheets with one stacked atop another, all appearing between the website and the person looking at the website. The website’s content flows out and passes through each of these sheets, each of which can change any aspect of how the website will look, and each sheet able to override the sheet before.

Your browser is, in effect, the last of these style-changing sheets. So, font size is something you might choose to overrule by using your browser on your computer.

For example, to make the text from this website bigger on your screen, press and hold the <Ctrl> key on your keyboard (use the Command key on a Mac) and then, still holding that key down, press the “+” character to make the text bigger.

The “-” character (press and hold <Ctrl> or Command key again) to make it smaller. If you count how many times you do the “+”, you can make the text really big and, if you then hit the “-” key that same number of times, you’ll get back to the original.

Or, still holding down <Ctrl> (or Command), press the “0” (number zero) key to undo all font size changes. This will set it back to the original which, for this website, is 15 pixels.

The shorthand for these is:

<Ctrl> + Enlarge text
<Ctrl> – Shrink text
<Ctrl> 0 Reset text to default size

Your browser has this feature so that people with reading impairment can make text bigger for easier reading.

Unfortunately, not all browsers work the same so, as mentioned, on a Mac you have to use the Command key instead of the Windows <Ctrl> key. And in some browsers, you’ll have to find the “View” menu and look for the “Zoom” controls.

Back in the CSS above, the “line-height” setting controls how much white-space there is between consecutive lines of text inside a single paragraph. It’s kind of like the old typewriter practice of single- or double-spacing between each line of text. In my case, 1.2 lines is a little bigger than single-spacing but smaller than double-space.

I chose 1.2 because, well, it just looked good.

The h1 through h6 settings are for headings such as the title of this article. My CSS says to make them all 15 pixels tall and to use the “Poor Richard” font if your computer has it, or “Helvetica Neue” as second choice, then in descending order either Helvetica, Arial, or your default sans-serif font. (Sans-serif is preferred for titles because it makes them stand out better.)

Here are the six different kinds of headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Notice they are all just about the same size. I forced them all to 15 pixels for one simple reason — I don’t use anything other than heading 1 in my writing and I wanted it to be the same size as the text.

But you’ll also notice that Heading1 and Heading 2 are in bold whereas Headings 4, 5 and 6 are not. And, surprisingly, Heading 3 is actually in a different font, it’s smaller than the others and even though I typed the word “Heading” in upper- and lower-case, the title appears all in upper-case. This is because, somewhere in those cascaded style sheets, there is a rule for Heading 3 that tells the browser to do that.

By the way, the “Poor Richard” font I chose for headings has some minor serifs on many characters so, in that area, I am overruling not only the CSS but also common convention that says to use sans-serif for headings.

Because I like it that way.

The margin-bottom: 0.6em setting for “p” (paragraph) sets the amount of space between two paragraphs. This is almost a double space because there is automatically a new line operation before the additional “0.6em” is added.

I use this instead of indenting each paragraph because not all browsers do everything they are supposed to do. The conventions for CSS have developed over time and, as newer browsers appear, they follow the conventions that were in effect at the time that browser was made available. Newer versions of the same browser will also exhibit differences in how they are able, or unable, to handle some CSS requirements.

In school, the style I was taught to use on a typewriter — yes, I learned to type on a manual typewriter — is to indent every paragraph after the first. In CSS, this is done with a “p+p” block — that means when a “paragraph follows a paragraph”.

But when I try this, I discover that some browsers don’t render (display) it correctly. In fact, they simply ignore my indentation request.

This difference from one browser to the next depends on which browser — Internet Explorer, Safari, Firefox, Chrome or any of a dozen others — you use to surf the web.

It’s also one of the biggest headaches for web designers who, to make sure everything looks right, need to have all possible web browsers available and, literally, try every one to find out if the CSS they want to use is supported on all of those browsers.

Odds are, if you’re trying to fine tune and get everything looking exactly right, some browsers will do it but others won’t.

When faced with a problem like this, rather than trying alternative after alternative on browser after browser, most web developers will simply try to find something that looks “good enough” and let it go at that.

That’s what I did when I found that “p+p” wasn’t working on some of the browsers I thought you might be using.

So I settled for no indentation but wider spacing between paragraphs.

Is that still true today?

Possibly not but since I don’t have all those browsers at my disposal to test, then I’ll just leave it alone.

It’s “good enough.”

Back to my CSS now for a small thing. WordPress puts a small advertisement at the bottom of the theme but, since this is my website, I am not obligated to display it. I don’t want their advertising to show so the “#site-generator” block in my CSS that sets area of the website to “none” meaning you won’t see it.

And finally in my CSS, the “blockquote” setting puts a gold-ish background behind any block-quote I might use.

Here’s a block-quote so you can see how it looks.

That’s a quick tour of my CSS changes. As you can see, these are very low-level tweaks that can have a very large effect on the website’s appearance.

The people that design themes for WordPress and Blogger set all these things to default values that they think are “good enough” for most websites.

Then, through CSS, you can overrule those settings to do what you want.

If you’re interested in learning more and maybe doing some experiments, here are two suggestions.

First, get a book on CSS but don’t read it yet.

Second, go to WordPress.com, register and set up a website for your experiments. (This is a free service. It won’t cost you anything.)

My own personal, experimental website where I play around with CSS and themes is at http://edwardskinner.wordpress.com/.

Then, it’s time to start reading the book and, when something sounds interesting, go to your WordPress site and use the Dashboard, Appearance, CSS or Edit CSS to try it out.

And if you totally trash your free experimental website, tell WordPress to change the theme to something else — that will abandon all your changes — and then experiment some more.

The website is free.

How can you miss?

Leave a Reply

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