Home › Demystifying The Wiki › Writing Content › How to Style an Article

How to Style an Article

When writing an article with the WordPress Wiki Theme you have a few options for styling your posts. Below I will demonstrate the various styles and code used to achieve the desired effect. The first style is the sections div

Typography
Shout Out’s
Other Stuff

To archive the sections style you would add the following code.
<div id="sections">
  <ul>
    <li><a href="#type">Typography</a></li>
    <li><a href="#shout">Shout Out’s</a></li>
    <li><a href="#other">Other Stuff</a></li>
  </ul>
</div>

Typography

This section is a very important part of the theme. There was a lot of thought that went into the typography, and that’s why this theme looks so freaking awesome. Go me, LOL. Anyhow, here are the different typography elements.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

This paragraph shows how all text encapsulated only within <p></p> tags will appear. Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.

More text examples are as follows:

This is emphasised text
This is strong text

This is an acronym
~~This is deleted text~~
This is a link

This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus. This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus.

Unordered list

List item example
List item example
- Sub list item example
- Sub list item example
List item example

Ordered list

List item example
List item example
1. Sub list item example
2. Sub list item example
List item example

Definition list

Definition title: Definition description
Definition title: Definition description

Shout Out’s

There are a few shout out styles I want to demonstrate for you here:

Success

<div class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</div>

Error

<div class="error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</div>

Help or Question

<div class="help">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</div>

A Tip

<div class="tip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</div>

A Code Block

<pre class="code">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.</pre>

Other Stuff

This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus. This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus.

A Screen Capture of the WordPress Wiki Theme (alignleft)

A Screen Capture of the WordPress Wiki Theme (alignright)

Right Click View Source

Feel free to look at the source of this website to see exactly how things are done if you don’t understand completely

14 Responses to “How to Style an Article”

OCSAE eCatalog of Professional Learning Opportunities says:

October 31, 2009 at 8:02 am

[...] Typography [...]

Reply
- Derek Herman says:
  
  March 12, 2010 at 7:05 am
  
  Testing comments
  
  Reply
excLuSive says:

March 31, 2010 at 2:33 am

Great desing

Reply
-Spooky- says:

May 3, 2010 at 3:48 am

Hello

It´s possible to write a blog beside this theme / wiki plugin?

Reply
Comparatif Hebergement web says:

June 16, 2010 at 1:27 pm

This is an awsome template. I’ll give it a try

Reply
iDesigners Blog says:

June 19, 2010 at 4:13 pm

[...] Typography [...]

Reply
Web Design Northern Ireland says:

June 25, 2010 at 9:40 am

Testing comments – is there an anti-spam option or a good plugin for this.

Reply
Welcome to the Crash Wiki | The Crash Wiki says:

July 6, 2010 at 12:24 pm

[...] Welcome to the Crash Wiki. Feel free to add any pages, session info, etc. For more info on how to style an article, see this article. [...]

Reply
stop smoking says:

September 17, 2010 at 10:12 pm

I truly love this particular theme style. Could you notify to me which theme you are using? Or was it custom made?

Reply
- Derek Herman says:
  
  November 30, 2010 at 9:19 pm
  
  This is a theme demo of the theme for sale.
  
  Reply
Angie Dean says:

November 10, 2010 at 7:58 am

comment test

Reply
trusktr says:

November 30, 2010 at 8:45 pm

where’s the live demo? please email me… jp {at} bettafootwear {dot} com

Reply
- Derek Herman says:
  
  November 30, 2010 at 9:18 pm
  
  You’re looking at the live demo, this site is the demo.
  
  Reply
vinamain says:

January 14, 2011 at 11:40 pm

Hello

How to change the text “Leave a Reply” and Name (required), Mail (will not be published), (required)
Website in this theme

Thanks

Reply

Rate this Article 1 Star

(82 Ratings)

Help us improve the wiki Send Your Comments

Categories

Live Search

Sign In

How to Style an Article

Typography

H1 Heading