Notes About The Design

Well, here it is! After months of haitus from submitting desings, I am releasing Tidy Blog. It was built on the concept that I would like to have section titles for the footer to be connected to a color. A way of overlapping the sections of the design. It wasn't easy to begin with, but once the design was all out in my head, it became apparent that all I had to do was play with background images and line heights.

I wanted this to be as comprehensive as possible, which is why I have multiple pages to display how the design should work. I have included ideas for a post archive, comments and even a gallery (with the idea taken from Stu Nicholls). You can see all of the tags I have styled below. There aren't many, but it is as much as I deem necessary for a blog design. Feel free to use and extend it as you see necessary.

I have tested it in as many browsers as I have access to. So, IE 5.01+, Mozilla Firefox 1+, Opera and Safari. It displays nearly identical in all the browsers. If you have any suggestions to make it work even better then let me know. If you would like to notify me that you are using my design, feel free to e-mail me and let me know. I would appreciate that you retain some link to either wildleaf.net or aaron.ganschow.us on any site that uses this design. It is not necessary, just nice. My main goal is for people to learn from the design.

All of the icons on the archives page are from famfamfam.com converted into gif, all of the photographs from this site can be found on sxc.hu, and special thanks to all of the other open source web developers who have helped me grow in my XHTML and CSS knowledge.

*music playing*

And I thank Mom, and Dad and wife. Without you guys I wouldnt still be alive. Can you turn that music off? C'mon, I'm not done ye...

Styled Tags

Headers

Header 3

Header 4

Header 5

Header 6

A note on headings: I don't see any reason why you should get down to heading 6, but it is generally unstyled. I also suggest a change in the trend of using h1's for everything. It isn't right! H1 is your top level heading which, to me, means your title, and h2 is your subtitle. At least, that's the idea I took with this design.

Pre tag

This is the coolest pre tag in the world.  If you could go back in time and make all your pre tags like this, you would.  I know it. Okay, so probably not, but what are you
gonna do about it?

Code Tag

<?php

   // Can you spot the error in this <code>? (it's a logical error)
   $myFancyArray = array(".", "socks", "my", "rocks", "This");
   print(implode(" ", array_reverse($myFancyArray)));

/* Okay, if you don't get it, I'll give you another hint. It is likely less of a logical and more of a gramatical error. But the logical error caused it. */

?>


Blockquote

This is a blockquote like any other blockquote that you have seen in your life. There isnt anything fancy about it, it just looks like a blockquote should look in this design.

This is a blockquote inside the other blockquote. Mmmmm. Nested blockquotes make the internets happy.

Lists

Ordered

1. Item 1
2. Item 2
3. Item 3
   1. Subitem 1
   2. Subitem 2
      1. Layer 3 Item 1
      2. Layer 3 Item 2
   3. Subitem 3
   4. Subitem 4
4. Item 4
5. Item 5

Unordered

• Item 1
• Item 2
• Item 3
  • Subitem 1
  • Subitem 2
    • Layer 3 Item 1
    • Layer 3 Item 2
  • Subitem 3
  • Subitem 4
• Item 4
• Item 5

Submit Comment

Name

Email

Comment