These are amazing themes, demonstrating the flexibility and options native to WordPress. These are not just pretty themes and they aren’t available for download anywhere. They are examples of custom designs that truly flex their WordPress codex muscle.

Matt Mullenweg's Blog

Get Shopped e-commerce sites

Owltastic Blog by Meagan Fisher

Sproutbox Venture Capital

Hugs for Monsters by Joe Lifrieri

1. CSS Image Replacement

   System fonts can look ugly, and appear rigid. Using CSS you can replace text with a beautifully formed anti aliased image, yet still have all the accessibility and SEO benefits of text headings.

   Inline:

   <h1>Hello World</h1>

   CSS:

   h1 {
   display:block;
   width:100px;
   height:0;
   padding:30px 0 0 0;
   background-image:url(“heading.gif”);
   overflow:hidden;
   }

   

   The first image is a system font in the browser, see the edges of the “S” are rigid. The second is the same font as an image, the third is a non system font with a shadow, because you can use any font and apply effects to them when using Image Replacement.

2. Rounded Corners Without Using Images

   To create CSS objects that have rounded edges without using images you can use the following technique:

   Inline:

   <div id=”container”>
   <b class=”rtop”>
   <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
   </b>
   <!–content goes here –>
   <b class=”rbottom”>
   <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
   </b>
   </div>

   CSS:

   .rtop, .rbottom {
   display:block
   }
   .rtop *, .rbottom * {
   display: block; height: 1px; overflow: hidden
   }
   .r1 {
   margin: 0 5px
   }
   .r2 {
   margin: 0 3px
   }
   .r3 {margin: 0 2px
   }
   .r4 {margin: 0 1px; height: 2px
   }

3. RSS Feed Icon Without Using an Image

   With the increasing importance of RSS, finding crafty ways to display an icon is a useful skill. This method displays a tidy RSS icon without using an image.

   Inline:

   <a href=”http://pingable.org/feed/” class=”feed”>FEED</a>

   CSS:

   .feed { border:1px solid;
   border-color:#FC9 #630 #330 #F96;
   padding:0 3px;
   font:bold 10px verdana,sans-serif;
   color:#FFF;
   background:#F60;
   text-decoration:none;
   margin:4px;
   }

4. Size Fonts Without Using Pixel Units

   It is important to size text using a method that is not absolute, so it can be enlarged for better visibility in a browser.

   CSS:

   body {
   font-size: 80%
   }

   p {
   font-size: 1.1em;
   line-height: 1.2em;
   }

5. Using Images For Bullets

   An easy method to create list with images as your bullet points:

   Inline:

   <div id=”navcontainer”>
   <ul id=”navlist”>
   <li id=”active”><a href=”#” id=”current”>Item one</a></li>
   <li><a href=”#”>Item two</a></li>
   <li><a href=”#”>Item three</a></li>
   <li><a href=”#”>Item four</a></li>
   <li><a href=”#”>Item five</a></li>
   </ul>
   </div>

   CSS:

   #navlist {
   list-style-image: url(images/arrow.gif);

   

This article is a summary of some of the best articles and content I have read recently.

Taking a look at the subscriber count of “I love Typography” I am one of many people who are loving this fresh new blog. Great stuff:  15 Excellent Examples of Web Typography.

Tara from Graphic Design Blog also posts about Typographic Inspiration.

Blog Strom discusses Why “Real” People think Digg Sucks. This article is interesting stuff. How often do you find dead links on the homepage of Digg. Lately digg’s success seems to be it’s worst enemy.

Dosh Dosh gives advice on How to get repeat visitors to your website. Some useful points taken from the article:

• Is your site populated enough to encourage participation?
• How does your site feel to 10 random people who have never visited it?
• Are you providing information that is coherent with your search keywords?
• Does your website project a unique, familiar and identifiable voice?

Sarah from Bluejar.com gives a nuts and bolts CSS image positioning tutorial. Sarah’s blog is a good read, she recently ran a very good “How To” group writing contest which I took part in.

Han from Eruanna guest posts for Rhys from The Gospel According To Rhys about How to make your blog design Web 2.0. My sincere condolences go out to Rhys, Wales were knocked out of the Rugby World Cup on the weekend, and I know Rhys is a fan.

I am still loving StumbleUpon, although I find it a terrible procrastination tool. Here is a useful resource page: Stumble Add-ons.

Heading into the festive part of the year consider checking out some gifts from this cool site.

On a personal note I am celebrating passing 100 RSS subscribers on Pingable, so I have decided to add a feed burner counter. Cheers to all those who have subscribed.

Learning how to design using Cascading Style Sheets (CSS) can be a little tricky for the beginner if you don’t figure out a few of the basics. One of the basic concepts in CSS is the box model.

CSS is the code that is used to define design in most modern web pages. WordPress Blogs and Myspace layouts both require CSS.

The above diagram explains how The Box Model works. The entire diagram represents a single Div element in CSS. So if the div was the main text of a page, the width and height would define the area which text will fill. The padding would define the area between the text and the border. And the margin would define the area between the border and the next div element on the page. I hope this basic tutorial helps.

Tadeusz Szewczyk has written a good article on Blogscoped called 10 steps to success without SEO.

The main points covered are:

• Discover your niche
• Use WordPress
• Create a killer CSS design and submit it to CSS galleries
• Allow trackbacks, use dofollow
• Socialize, write comments and link other blogs
• Include social media on your site, use social media yourself
• Write your own content, say something new, express yourself
• Compile what you know or what others said and publish it
• Contribute to your favorite online publications
• Add new content at least every second day

With each point more detail about specifically how the point helps is discussed. While I agree with all the points, as a blogger with a full time job I have found the last point the most difficult to follow. I often have a spare day or two, and I will write 2-3 posts, read a lot, leave comments etc. But then I am unable to look at my blog for a few days, and I often feel my good work is being let down by my inability to post daily or at least every second day. What are other peoples thoughts of this topic?