Effects in Posts and Comments

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.

note-left

So far, so good; nothing’s broken.  So…on to the matter of this post.

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>

They produce:

TeleType / Code
Bold / Strong
Italic / Emphasized
Red
Green
Blue

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 (&lt;p&gt;) is a block element by default.&nbsp; The 1cm, of course, means one centimeter in length, and varies depending on the resolution settings on the native system.&nbsp; You would instead use ‘px’ (pixels) for universal pixel lengths.&nbsp; 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>

This produces:

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>

This produces:

Reversed text.

 


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.

Advertisements

7 thoughts on “Effects in Posts and Comments

  1. Simple styles, from the above code—feel free to try on this post.
    TeleType / Code
    Bold / Strong
    Italic / Emphasized
    Red
    Green
    Blue

    I am the admin., so…

    Reversed text.

    Everything I enter will show up as if in a blog post.  That’s my theory.

    Like

      1. It apparently only works for the admin on his/her own blog directly on the post/page (as opposed to notifications). I could edit your comment to produce the desired effect…but then your last comment wouldn’t fit, and I avoid editing others’ comments out of respect…

        Like

    1. You have to be careful with fonts (‘font’ or ‘font-family’ property), as not all systems, platforms/Operating Systems carry the available fonts that the author may have, and vice versa.

      The WordPress website actually transfers fonts, even for the Reader and Notifications so sites will look the same independent of platform.

      In customization, you can add fonts (where they will be automatically downloaded, however temporarily).

      You could ask people to download the require fonts (if they’re free)…or preferably pay for the custom package if custom fonts are important enough.

      Generic fonts like Impact should be there anyway. But remember to add alternatives (such as ‘Arial’), plus serif/sans-serif in case none of the fonts are available.

      Liked by 1 person

      1. When I changed the font to Garamond or Museo, they showed up on my desktop but not on my iphone. Makes sense. I did read something about “font/font family”
        Personally I wont be paying for the customization package to change the fonts. At least not now. My blog is not that interesting to do something like that at least not in my eyes at this point. Who knows maybe somewhere along the lines I will. But for now this will do.

        Liked by 1 person

Thoughts? Reply:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s