Dylan - A WordPress Theme

Introducing WordPress theme ‘Dylan’

Phil Thompson — Wed, 28 Nov 2007 12:26:28 +0000

Dylan is a brand new WordPress theme that merges simple design with even simpler HTML/CSS.

Put simply, this means that Dylan can be used as the basis for your own WordPress theme hopefully making it even easier for you to create your own WordPress theme.

It’s also free.

What’s the catch?

There’s no catch. Ok, there is one. All I ask is that if you build upon the ‘Dylan’ theme I’d like it if your named your theme after a Bob Dylan song. It’s called marketing, silly.

The Amazing Benefits of Dylan

HTML templates files have the bare minimum code, there’s no presentational markup
HTML is valid XHTML 1.0 strict
CSS is simple, lean and easy to understand
No widgets are any other cruft
Simple design is easy to build upon
Print and handheld versions (CSS) as standard

How to customise WordPress theme ‘Dylan’

Phil Thompson — Wed, 28 Nov 2007 12:13:39 +0000

Dylan’s default colours may not suit your tastes, and that’s okay because everybody is different. If you change Dylan’s default colours it will make your website stand out from other websites that also use the Dylan theme.

Changing the Dylan’s colours

You can change the colours by following these steps:

Login your WordPress admin area
Select Editor suboption under Appearance in the left-hand menu
There will be a column on the right hand side headed ‘Theme Files‘ click ‘customise.css’ and it will show the file customise.css in the scrollable window on the left.
Follow the instructions in this file
From here you can edit the following things:
1. Background colour of your website
2. Background and text colour of main content area
3. Colour of links
4. Colour of your logo and website description
5. The colour of your borders – thin lined that separate certain sections
Click the ‘Update File‘ button (Bottom left hand corner) and you’re all done.

How to get the most out of Dylan

Phil Thompson — Wed, 28 Nov 2007 12:00:51 +0000

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 be 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

This is the introductory paragraph. On the home page, archives, search results, etc, it appears as a normal paragraph.
On an article page it appears much bigger and in italic with lines above and below it.
Download this code: intro.txt

Actually, thanks to IE7 now supporting CSS3, this is deprecated and the introductory paragraph will automatically be styled without having to fiddle with class names.

Headings

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

Images

Style your images with a class as follows:

Images on the left

This text will appear to the right of this image
Download this code: images-left.txt

Images on the right

This text will appear to the left of this image
Download this code: images-right.txt

Images in the center

This text will appear below the iamge which will be centralised.
Download this code: images-center.txt

Highlighting text

Entire chunks of text can be highlighted (like this one) giving a light yellow background
Alternatively, smaller chunks can be highlighted too.
Download this code: highlight.txt

Pullquotes

This is an ordinary paragraph inside there will be a piece of information that is important. This will appear big, italic, light grey and off to the right side of the page. Like that.
Download this code: pullquote.txt

Recommended plugins

Phil Thompson — Wed, 28 Nov 2007 11:59:52 +0000

Dylan doesn’t rely upon any plugins in order to work, but there are a few key plugins which enhance WordPress and are therefore recommended.

* A note about Sociable

To make sociable look great, you may have to edit the (bloated) CSS file it comes with.

div.sociable { margin: 16px 0; }
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: none;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
width: 16px;
height: 16px;
border: 0;
margin: 0;
padding: 0;
}
.sociable-hovers {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

So that it looks like this:

div.sociable{
clear: both;
}
div.sociable li{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
Download this code: sociable.css

Blogs using Dylan

Phil Thompson — Sat, 10 Nov 2007 11:56:33 +0000

The following sites are using Dylan derivatives.

Sample post 1

Phil Thompson — Mon, 15 Oct 2007 14:07:53 +0000

This is a sample post, it’s aim is only to fill this website with content so everybody can see the theme works.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ut diam nec dolor molestie pellentesque. Maecenas accumsan, metus sed eleifend dapibus, metus lorem tincidunt tortor, non ornare elit sapien placerat eros. Morbi a tellus vel augue elementum pellentesque. Ut orci sem, gravida ut, eleifend a, mollis vel, justo. Proin sagittis posuere ante. Aliquam in velit vitae erat semper lobortis. Phasellus vestibulum, arcu quis euismod fermentum, diam felis consectetuer quam, quis accumsan justo est eu diam. Nunc in urna at felis tempus nonummy. Etiam a nulla ut velit dignissim auctor. Mauris ut sapien. Nunc pellentesque nulla eget orci.

Level 2 Heading

Aliquam orci arcu, laoreet ac, faucibus in, commodo sit amet, dolor. Fusce ac tellus. Integer purus ante, suscipit et, egestas quis, lacinia id, tortor. Quisque nunc tellus, dapibus a, auctor sit amet, accumsan at, justo. Aliquam metus lacus, porttitor ac, posuere a, rhoncus eget, diam. Quisque mollis egestas augue. Donec posuere, diam quis interdum dignissim, libero diam pulvinar odio, vitae consequat dui odio sed velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut magna et lorem condimentum nonummy. Morbi mi enim, varius sed, dictum at, faucibus vitae, arcu. Aenean pretium arcu eu erat. Nullam mattis dapibus nunc. Morbi eget purus ut sem dignissim feugiat. Vestibulum eu nibh. Aliquam convallis, dui ut vehicula viverra, felis risus sagittis nibh, ac ornare enim tellus lacinia eros.

Level 3 Heading

Proin facilisis, leo vel iaculis egestas, tellus augue porttitor velit, et vulputate odio nibh nec neque. Sed fringilla pellentesque nisi. Curabitur suscipit, nibh id placerat vestibulum, lectus quam adipiscing tortor, ut pretium massa massa sed nisi. Duis commodo, neque quis feugiat consequat, nulla pede lobortis metus, et tempus nulla felis vel dolor. Curabitur rhoncus posuere metus. Sed in lectus. Aliquam tincidunt mi id nulla. Quisque lobortis laoreet sapien. Aliquam sit amet nunc id urna elementum pharetra. Quisque quis quam in nulla dapibus tristique. Vestibulum non ligula ut augue sodales varius. Suspendisse neque erat, consectetuer non, gravida at, blandit in, nibh. Morbi fermentum vehicula tellus.

Nulla ut massa.
Maecenas ligula.
Pellentesque ultrices eros in neque.
Phasellus non sapien.

Cras nec purus eget pede imperdiet mollis. Quisque hendrerit volutpat nunc. Quisque vitae felis. Vestibulum gravida auctor nunc. Pellentesque ut massa quis ante faucibus elementum. Vestibulum pulvinar. Curabitur nisi dolor, lacinia ac, bibendum id, commodo in, lectus. Nam auctor, ligula vitae commodo venenatis, mauris est ullamcorper libero, a ornare lectus nisl non nisl. Vestibulum ipsum. Aenean pulvinar cursus pede.

Mauris sed nibh in pede volutpat tempus. Fusce porta. Mauris urna est, tincidunt in, sagittis a, volutpat in, libero. Praesent sed nisi. Aenean lorem augue, rhoncus non, iaculis quis, vestibulum tempor, leo. Ut nonummy pellentesque massa. Nulla porttitor congue ligula. Morbi dui felis, ornare at, adipiscing quis, egestas sed, nulla. Sed quis quam. Sed augue.

Sample post 2

Phil Thompson — Mon, 01 Oct 2007 14:10:57 +0000

This is a sample post, it’s aim is only to fill this website with content so everybody can see the theme works.

Level 2 Heading

Level 3 Heading

Nulla ut massa.
Maecenas ligula.
Pellentesque ultrices eros in neque.
Phasellus non sapien.

Sample post 3

Phil Thompson — Tue, 04 Sep 2007 14:11:13 +0000

This is a sample post, it’s aim is only to fill this website with content so everybody can see the theme works.

Level 2 Heading

Level 3 Heading

Nulla ut massa.
Maecenas ligula.
Pellentesque ultrices eros in neque.
Phasellus non sapien.

Dylan - A WordPress Theme

Introducing WordPress theme ‘Dylan’

What’s the catch?

The Amazing Benefits of Dylan

How to customise WordPress theme ‘Dylan’

Changing the Dylan’s colours

How to get the most out of Dylan

Article layout

Introductory paragraph

Headings

Heading structure

, so your main headings in your posts should be

s and subheaders should be

`s`

What about sub sub headers

to

, you can use all of them. If you use

it must belong to a

which inturn must belong to a

`and so on.`

Images

Images on the left

Images on the right

Images in the center

Highlighting text

Pullquotes

Recommended plugins

* A note about Sociable

Blogs using Dylan

Sample post 1

Level 2 Heading

Level 3 Heading

Sample post 2

Level 2 Heading

Level 3 Heading

Sample post 3

Level 2 Heading

Level 3 Heading