Bringing Style to Your Blog

by

You might not believe it by looking at the layout of this blog, but I do have an interest in aesthetics. I like WordPress, both as blogger and reader. One disadvantage to the free version is that you can not edit the stylesheet (stylesheets control most of the look of a theme). The problem with that is you are stuck with all the choices the theme designer made. Wouldn’t it be nice to add your own bit of flair, or mark out a piece of text in a certain way? Well you can do just that, and I will show you how.

Introduction

Stylesheets (or more correctly CSS Cascading Style Sheets) are a way of defining the look for elements on the page. By defining the look for an element (e.g., headings) once in a style sheet, you can have that change cascade to all pages. No more having to edit each page to match a design change. Most HTML elements can have styles (color, font, size, etc.) associated with them. For example the HTML element <H1> (heading) will have definitions for fonts, color, and size, associated with it. Anywhere you use a <H1> it will look exactly the same. Normally if you wanted some <H1> headings to look different you would set up a special class within your stylesheet and describe the new look there.

Using Styles without a Stylesheet

If you cannot modify the stylesheet, all is not lost. You can create what are called inline styles. Instead of defining an element (or class) in a stylesheet, you define it right there in the middle of your HTML. While not recommended (because you will have to change each page if you want to change the look) it is standards compliant, so should continue to work in most browsers.

The HTML Elements.

To use these inline styles you will need to create some HTML elements to style. The elements that you are likely to want to change are <div> <p> <blockquote>, and <span>. All of these elements must be closed (e.g., </div> to complete them.

<div> is simply a block of screen space that can contain text, images and other HTML markup.
<span> is a length of text that is to be treated differently. It can appear in the middle of other text. It can be enclosed within a <div> or <blockquote>, or <p>
<p> is a paragraph. It usually will have a 1 line space above and below it.
<blockquote> Don’t we all just love this one? Used to quote text.

Examples:

DIV
<div style="border: 1px solid #f00;">

This is a text within a DIV. A DIV can contain text, graphics or
Blockquotes

Indeed it may contain just about anything that could be contained in a webpage. As you can see it is treated like a box.

BLOCKQUOTE
<blockquote style="color: #900; font-family: Georgia, serif;">

This is a BLOCKQUOTE. It will take all the attributes of a BLOCKQUOTE, except for the color and fonts I suggested. The attributes I did not specify cascade down from the normal specification.

SPAN
<span style="background-color:#eee; color:#006;">

This is normal text but this is the spanned text. As you can see <span> may appear in the middle of other text.

P
<p style="background:#fffcd9;color:#4b76ad;">

This is the special paragraph. It contains the look described above. It will look like this until I close the <p> with a </p> like this.

This is a normal unstyled paragraph. This is what would appear if you did not add the styling. It is just a regular paragraph of text.

Notes and Cautions

Remember these inline styles do not change when you change your blog theme. They particular styles may clash with a different theme. To change the look of inline styles you will have to edit each page on which you used them. Choosing neutral colors may help but are no guarantee that future theme changes will not make you inline styles ugly or hard to read.

You must switch to HTML view in the editor to make this work otherwise your post will just show the style text and not the actual style outcome.

This works for current WordPress blogs. It may work for other blogging software. Subsequent versions of WordPress may alter how they handle inline styles.

Always have a copy of your post outside of the blogging editor. Badly formatted styles may cause your post to become garbled (as the blogging software attempts to fix the broken code).

If you have access to the stylesheet you are better to make additions there, as you will only need to make subsequent changes once (to the stylesheet not every page).

These will not work in the comments section of blogs. They only apply to the posting of blog entries. I have created a page with some hints on using HTML in the comments section. These hints should work on all WordPress blogs, and may work for other systems.

I realize this post may raise more questions than it answers. If you do have questions ask them in the comments. I will do my best to answer.

About these ads

7 Responses to “Bringing Style to Your Blog”

  1. Bhetti Says:

    <3

    I rename you Default Pliny.

  2. Default User Says:

    Pliny?

    The Roman guy or the outlaw

  3. Bhetti Says:

    Romaaan dude.

    He compiled his natural history in between doing MANLY MILITARY STUFF ’cause he was just the helpful-est dude ever.

    (I have no idea why I just addressed myself as I would do to a four year old. You are not a four year old. I am the four year old, perhaps I have gone mad and am talking to myself. )

  4. Bhetti Says:

    (Gone mad? Rather added another layer to the madness!)

  5. Default User Says:

    @Bhetti
    Thanks.

    I figured it was the (helpful) Roman guy.

    You are not mad . . .
    . . .just different :/

  6. Linkage is Good for You: Diversity Edition (NSFW) Says:

    […] Thoughts: USA Beta Provider“, “Random Thoughts on: The End of College?“, “Bringing Style to Your Blog“, “In the Style of: Sibling of […]

  7. A New Blog Theme? « Default User Says:

    […] have inline styles that I would have to check worked with the new theme (I do mention this problem in my […]

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


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: