Today, I’ll demonstrate effects that the WordPress visual editor supplies, and some it doesn’t but can be added manually.
But first, today, the WordPress code was changed, once again, this time so Notification items appear to the left of the menu.
I have a bit of experience with HTML (web pages) and CSS (styles). And it just so happens that WordPress allows just about anything HTML-wise in the Text editor. So, I’ll show you a little how to take advantage of this. To demonstrate some simple use of HTML, consider these lines of markup code:
<tt>TeleType</tt> / <code>Code</code> <b>Bold</b> / <strong>Strong</strong> <i>Italic</i> / <em>Emphasized</em> <span style="color: #ff0000;">Red</span> <span style="color: #0f0;">Green</span> <span style="color: blue;">Blue</span>
Bold / Strong
Italic / Emphasized
Now, the visual editor has these styles in the Toolbar (except tt/code) so you don’t need to switch to the Text editor to add them. But there are a vast number of styles and effects that the Visual editor doesn’t supply.
Let’s say you’d want first-line indent, instead of indentation for all lines? (Well, actually, the ‘indent’ in the visual mode makes use of the left margin.) The CSS style for first-line indent is ‘text-indent’. (It only works for block elements, such as Div or P.)
<p style="text-indent:1cm;">The paragraph element (<p>) is a block element by default. The 1cm, of course, means one centimeter in length, and varies depending on the resolution settings on the native system. You would instead use ‘px’ (pixels) for universal pixel lengths. Fractional lengths, such as 5.5px are allowed.</p>
The above code produces:
The paragraph element (<p>) is a block element by default. The 1cm, of course, means one centimeter in length, and varies depending on the resolution settings on the native system. You would instead use ‘px’ (pixels) for universal pixel lengths. Fractional lengths, such as 5.5px are allowed.
I’ve actually used text-indent a lot—sort of gives a literary feel to the text. In a standard book, the first paragraph after a beak wouldn’t have any first indent, so don’t use it just anywhere.
First-line indent is, however, old-school CSS. What about something more modern? Let’s say you’re tired of manually entering spaces to space out the letters in a word. You could instead use the ‘letter-spacing’ property.
<span style="letter-spacing:9px">Here, each character trails an additional 9 pixels of white-space.</span>
Here, each character trails an additional 9 pixels of white-space.
Okay, on to something more advanced.
Just eight days ago, news was made when Google made an April fools joke with com.google. The engineers at Google have since removed the effect, but it’s rather easy to produce (so long as the reader’s browser supports it). They used the ‘transform’ CSS property. Just imagine an element on a webpage in 3D terms, that you could rotate it any which way, and the Y factor would rotate it horizontally. Well, ‘transform:rotateY’ was used with an angle of 180° to flip everything horizontally. (Note that some older browsers need an additional ‘-webkit-transform’.)
<div style="transform:rotateY(180deg);-webkit-transform:rotateY(180deg);">Reversed text.</div>
Cool, huh? (Of course, not all browsers support ‘transform’. But, moving on.)
WordPress is a bit picky when it comes to comments. CSS is supported in comments, but not always (not in Notification replies, anyway). Thankfully, I didn’t make too much of a mess on Arthur’s blog. CSS works in comments directly posted here (I combined two pieces of HTML for a comment below), but not over there. The basic HTML tags always work, of course, so not everything has to be plain text.
A premium (paid) membership may come with the ability to add global CSS to change the way things look by default (the theme) on your blog. (I don’t know the specifics of this, and wouldn’t because I haven’t paid a dime to WordPress…)
For a full CSS reference, w3schools.com/cssref is still up and running. I’ll try to answer questions as effectively as I can …when I’m awake.