WordPress HTML Tricks

Since the past few days, people have been asking me how I do up my tables in WordPress, and other neat tricks like how to create headers with custom size.

At the end of today’s “lesson”, you’d be able to create something like this:

EXAMPLE 1 EXAMPLE 2 EXAMPLE 3
Isn’t this like super cool? :>

This is the pastebin file containing the code I used. Keep that tab open, we’d be using that soon.

——

But lets start with the headers first!

As we all know, WordPress allows us to choose our header settings in the drop down list, found at the top left corner of your editing space. Now, sometimes all these headers don’t do the trick; you need something of specific size.
This is pretty easy; all you need to do is…

——

<span style=”font-size: 18px;”> YAY HTML </span>

——

Try copying-pasting that into your “text” tab of your wordpress post editor, you should get something similar to this –

YAY HTML

Got it?
Great! As you’ve guessed, to change the size of your text, you only have to change the value in “font-size: Xpx”, where X is any size you decree 🙂

——

Other Misc text styles

——

The Strikeout can be done in 2 ways:

<strike> ENTER YOUR OWN </strike>

would give you the same results as, the more hardcore version –

<span style=“text-decoration: line-through;”>ENTER YOUR OWN</span>

::Note::
When you enter the first example in the text editor, it will automagically convert to the second form.
So why would I use the latter?
It’s all just personal preference, really. In some cases, I’d prefer using the 2nd option when combining 2 different styles like this:
EXAMPLE

For reference, that was:

<span style=”text-decoration: line-through; font-size: 25px; font-family: gabriola;”>EXAMPLE</span>

Different style choices can be denoted after the end of prior one by a ; semicolon.
For font family, you can choose a “back up font” after the primary one (in this case Gabriola). Let’s take “font-family:gabriola,verdana;” for example. If the console, for some reason, is unable to process the Gabriola font, it will tap into the Verdana font family. If all else fails, it will use the default.

—–
The Table
——

Well, did you keep the aforementioned reference open?
That is the general template for all tables, the definitions are as follows:

    • tr:defines a new row
    • td:defines a standard cell
    • th:defines a header cell
    • cellpadding: Set the space between the cell wall and the cell content to X pixels:
    • cellspacing: Set the space between the cells to X pixels.
    • “background-color: #a8a8a8” Sets the background colors to #XXXXXX. Check out all the colors here!

::Note::
Take note that the background of my 3 headers are WHITE. This is due to me setting them up with another “background-color” syntax that overrides the former.

——-

An easier trick here is to just copy paste my “template: and customise it yourself. But for proper lessons, I personally recommend this website.

For any other further queries, feel free to send me a PM!

—–
This is an article written by PP1MT.
He knows he’s not very professional  here, but he will help you with your HTML problems.
And he should probably stop adressing himself in third person.
So yeah, this article is free for sharing, reblog and other uses.
—–

Leave a 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