How to get the most out of Dylan

Dylan has some great features that lift it above other WordPress themes.

Article layout

Articles have a one column layout which aids readability and will lead to people concentrating on what you have to say more. This layout will automatically applied to all your posts, you don’t have to do anything. You can however, use the following structure guidelines below to get the most from your posts.

Introductory paragraph

1. <p class="intro">This is the introductory paragraph. On the home page, archives, search results, etc, it appears as a normal paragraph.
2. On an article page it appears much bigger and in italic with lines above and below it.</p>
3. Download this code: intro.txt

Headings

1. <h2>Heading structure</h2>
2. <p>For accessibility and SEO you must put headings into the correct heading tag as opposed to just making it bold.</p>
3. <p>The post title is a <h1>, so your main headings in your posts should be <h2>s and subheaders should be <h3>s</p>
4. <h3>What about sub sub headers</h3>
5. <p>Headings go from <h1> to <h6>, you can use all of them. If you use <h4> it must belong to a <h3> which inturn must belong to a <h2> and so on.</p>
6. Download this code: headers.txt

Images

Style your images with a class as follows:

Images on the left

1. <p><img src="http://www.example.com/wp-content/uploads/2007/11/image.jpg" class="left" />This text will appear to the right of this image</p>
2. Download this code: images-left.txt

Images on the right

1. <p><img src="http://www.example.com/wp-content/uploads/2007/11/image.jpg" class="right" />This text will appear to the left of this image</p>
2. Download this code: images-right.txt

Images in the center

1. <p><img src="http://www.example.com/wp-content/uploads/2007/11/image.jpg" class="centre" />This text will appear below the iamge which will be centralised.</p>
2. Download this code: images-center.txt

Highlighting text

1. <p class="highlighted">Entire chunks of text can be highlighted (like this one) giving a light yellow background</p>
2. <p>Alternatively, <span class="highlight">smaller chunks</span> can be highlighted too.</p>
3. Download this code: highlight.txt

Pullquotes

1. <p>This is an ordinary paragraph inside there will be a piece of information that is important. <span class="pullquote">This will appear big, italic, light grey and off to the right side of the page.</span> Like that.
2. Download this code: pullquote.txt

Tags: features

This entry was posted on Wednesday, November 28th, 2007 at 12:00 pm and is filed under Useful. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.