Published on May 11, 2009 11:59 am by Thord Daniel Hedengren

The Bonus Formatting Sample Post

The Rogue Theme naturally supports all the traditional formatting stuff you can do from within WordPress, just check out our Great Sample Post for a live demo of these things. However, that’s not all you can do when it comes to formatting! In fact, if you’re not averted to resorting to a tiny little bit of HTML code, you can make things pop even more within your blog posts.

And naturally, this post will show off all of these bonus formatting options!

The HTML tabFirst of all, let’s get something straight about HTML code. You really should be editing it from within the HTML tab in the editor, otherwise you might end up getting your HTML code converted to non-code characters, and while that is all well and good most of the time, it just won’t do here. So by all means write your post in the Visual tab, but when it comes to the bonus stuff, switch to the HTML tab, as the image on the right hand side so subtly points out.

Which brings us to the first bonus formatting functionality! You might notice the border around the image. That is added by adding the class frame to the image code. This is how it looks:

<img src="http://roguetheme.com/wp-content/uploads/2009/05/htmltab.gif" alt="The HTML tab" title="The HTML tab" width="200" height="153" class="alignright size-full wp-image-31 frame" />

Notice frame at the end of the segment starting with class – those are all the classes that are applied to the image. And sure enough, the last one is called frame, and that one adds a nice looking border to the image. But you have to add it manually.

Moving on, let’s show something important that traditional italics or bold won’t convey. That red type is made by using a simple span tag with class="alert". This is how you use it:

<span class="alert">show something important</span>

Not very hard, is it? You know, you can use it for a little more subtle stuff as well, like this word and the ones next to it, which is also a span but without any class at all.

<span>this word and the ones next to it,</span>

Now let’s take a break and learn something new:

Lorem ipsum dolor sit amet, dui a, luctus id accumsan, dolor sit orci et non repudiandae pellentesque. Mattis nunc scelerisque praesent sapien, tincidunt wisi sit elementum enim massa quam, tellus non sit tristique, nulla mauris sed hendrerit quam ligula quisque. Diam neque, urna dictum dolor, tempus lorem accumsan amet blandit laoreet, at ornare.

That’s a box, which is to say that it is content that sits within a div with class="box". It looks like this:

<div class="box">Lorem ipsum dolor sit amet, dui a, luctus id accumsan, dolor sit orci et non repudiandae pellentesque. Mattis nunc scelerisque praesent sapien, tincidunt wisi sit elementum enim massa quam, tellus non sit tristique, nulla mauris sed hendrerit quam ligula quisque. Diam neque, urna dictum dolor, tempus lorem accumsan amet blandit laoreet, at ornare.</div>

You know, you can make it even more fancy by adding a h5 tag to it, like so:

Look at this H5 header

Lorem ipsum dolor sit amet, dui a, luctus id accumsan, dolor sit orci et non repudiandae pellentesque. Mattis nunc scelerisque praesent sapien, tincidunt wisi sit elementum enim massa quam, tellus non sit tristique, nulla mauris sed hendrerit quam ligula quisque. Diam neque, urna dictum dolor, tempus lorem accumsan amet blandit laoreet, at ornare.

That is the same code, but with a h5 heading in it. For clarity’s sake, I’ll just paste that code too, although you can probably figure out what goes where by now:

<div class="box"><h5>Look at this H5 header</h5>Lorem ipsum dolor sit amet, dui a, luctus id accumsan, dolor sit orci et non repudiandae pellentesque. Mattis nunc scelerisque praesent sapien, tincidunt wisi sit elementum enim massa quam, tellus non sit tristique, nulla mauris sed hendrerit quam ligula quisque. Diam neque, urna dictum dolor, tempus lorem accumsan amet blandit laoreet, at ornare.</div>

So there you have it, the basic bonus formatting in Rogue Theme. Missing something? Give a shout in the comments and we might just add it!

Posted in Rogue Theme Manual and tagged

Comments are closed.

© Rogue Theme for WordPress

This site is powered by Rogue Theme and WordPress