There is another website I’ve been using for some time now and since I saw it mentioned in the Smashing Magazine newsletter I remembered to share it here also. Subtle Patterns is a website that contains a small collection of patterns, all of high quality.

Link: Subtle Patterns

Webdesign Tuts+ has a nice article regarding SXSW and the subject Is WordPress Killing Web Design? What’s your thoughts on the subject? I’ve done my fair share part of WordPress designs and I do understand the question and it’s quite pertinent but I don’t agree with it. I don’t consider myself a designer, just a coder who likes design and beautiful things (who doesn’t?) but I do think the tools don’t make the artist and at the bottom line WordPress is just a tool to simplify the implementation of dynamic website (is there still static html webpages in the 21st century?).

Wordpress is not a true CMS but it’s a powerful framework that can be moulded into one. The WordPress background is from a blog engine and therefor is it’s more often used. The “blog design” works, blogs are popular these days and most of them don’t want to break the mould that works. People are used to this kind of navigation. But this doesn’t mean that if you want to design something more unique using WordPress that you can’t reach that goal. You can, WordPress doesn’t limit you in any ways, only your imagination does.

Link: SXSW 2010 Video: Is WordPress Killing Web Design?
Source: SXSWi 2010: Is WordPress Killing Web Design?

So my answer is no, but I do understand the pertinence of the question.

Some years ago it would be hard to find dark designed websites, almost all known websites were designed in bright colors. You would need to go to the beggings of the Internet to find dark web pages with that 90′s crappy look. But when the web started shifting from the frontpage designed webpages to actually thought and pro designed ones, the era of the dark websites ended to pave the road to the bright colors.

Dark vs Light

There are today a lot more dark colors webpages, mine included. A lot of discussion arises from time to time on the web about white designs vs dark, normally stating that dark designs are harder on the eyes because of the contrast. Well… I have to disagree with that. I’m all pro dark designs and I’ll explain why.

If you are reading this you are using a monitor, be it CRT, LCD, doesn’t matter, it’s a monitor and the principle is the same. It’s a self illuminated source that displays information. Because it’s self illuminated and it doesn’t use the natural light source, the Sun, it’s bright (duh!) and in its ‘natural’ mode it’s dark, black. A paper is normally white because it’s not self illuminated it uses the Sun as a light source. So bare in mind that a screen is NOT a paper and therefore it doesn’t need a white design to be better seen. White designs hurt my eyes, they turn any screen into a giant bulb irradiating light into my pupils.

Do white designs look good? Well depends on the design, but generally yes and in my opinion is easier to achieve a better white page design than a dark one. But in the end readability for me at least is way better on a dark webpage. It’s softer on the eyes, you can use a slightly more grayish font color to soften the contrast between font and background. On a white design if you use a more grey font you are hurting readability while making everything looking even more light and IT HURTS MY EYES!

Conclusion

So in the end it comes down to taste and the target of your webpage. Some might argue that white webpages are more upbeat than dark ones. I would say that is consequence of what can be called the norm. For me, dark designs beats light designs for 90% of the cases.

EDIT – Just to clarify and after RedSign posted, I’m not stating that dark designs are easier on the eyes, I’m giving my opinion on what I perceive and what I feel. I do know a lot of people think like me, but yes it’s generally accepted as white backgrounds with black font are softer on the eyes. I do feel whoever that is not the case, at least for my head.

It’s true that after the emerging of @Fontface things started to get a lot easier for the designer, but even Fontface brings some bugs to the equation (specially in Old browsers). There are payed alternatives that work better than @Fontface but that’s a major downside to that, they are payed.

And then Google enters the scene with their own solution, the Google Fonts API and the Google Fonts Directory, introducing an easy way to include custom fonts into any website design in a quick and easy way. The good news is that it’s coded in a way that will make it work even in ancient browsers like Internet Explorer 6 (why on earth is anyone even using this?).

The available font types available isn’t something to write home about, but the catalog will surely grow in the upcoming months / years.

The usage is very simple and it’s very well documented on Google’s font API website. All you need to do is add a stylesheet link to request the desired web font, after you just need to style an element with the requested web font like you would with any other websafe font.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </link></head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

Google reminds you:

When specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.

Something you should always do anytime you insert a custom Font in your design no matter the method.

One of the things I wanted to implement in my new website theme, was the display of the blog statistics. After the code snippet to display recent comments without a plugin, I really wanted to give something new to my footer.

There are several reasons why you should want to display your website statistics. First you might have a page where you display your blog statistics, like feed readers, total posts, comments, etc. Instead of updating it manually every couple of months you can have it automated. Or like me, you can display your statistics in the footer or even in your sidebar, for curiosity and/or to show your readers your blog history / performance. Whichever is your reason, having something automated in providing more info to your readers, enriches your blog.

The code was very simple to implement, just took me a few visits to the wordpress codex and to my WordPress database to get the variables I needed. This code is capable of displaying the Post Count, Page Count, the Comment Count, the Comments Ratio per Post (Comments / Total Posts) and the Number of Registered Users.

To display the number of your RSS Readers, you will need first to write some PHP functions to your wordpress theme file. The file is called functions.php. This was copied from WPRecepies.

Just insert the code into your functions.php file. Replace Paintbits to your feedburner account name.

function RSScount()
{
$fburl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=Paintbits";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $fburl);
$stored = curl_exec($ch);
curl_close($ch);
$grid = new SimpleXMLElement($stored);
$rsscount = $grid->feed->entry['circulation'];
return $rsscount;
}

Whenever you want to make a call to your RSS Feed count, just write: RSScount(); inside PHP code tags of course. You’ll see how in the final code. Alternatively to use this code, you can use a plugin like Feedburner Circulation. The advantage is that with a plugin like this you will have cache and error protection on your Feed Count text display.

Download Feedburner Circulation

So, now that we can display our Feed Count in full text, we just need to write the other variables assigns to get the rest of our website statistics.

< ?php
$count_posts = wp_count_posts();
$posts = $count_posts->publish; /* Gets the post count */
$count_pages = wp_count_posts('page');
$pages = $count_pages->publish; /* Gets the page count */
$count_comments = get_comment_count();
$comments = $count_comments['approved']; /* Gets the approved comment count */
$rss_readers = RSScount(); /* Calls the RSScount function to display your Feed Count */
$user_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->users;"); /* Gets the number of registered users*/
?>

In order to display your statistics, you just call and print your variables. This is how I did it in my footer:

<ul>
<li><a href="/archives/" title="Written posts">Articles</a>< ?php echo ": ".$posts."" ?></li>
<li><span class="footer_comm_author" title="Pages published">Pages</span>< ?php echo ": ".$pages."" ?></li>
<li><span class="footer_comm_author" title="User comments">Comments</span>< ?php echo ": ".$comments."" ?></li>
<li><span class="footer_comm_author" title="Comments per Post Ratio">Comments Ratio</span>< ?php echo ": ".round($comments/$posts)."" ?></li> /* Calculates the Comment Ratio */
<li><a href="http://www.paintbits.com/feed" title="Feed readers">Readers</a>< ?php echo ": ".$rss_readers."" ?></li>
<li><span class="footer_comm_author" title="Registered users">Members</span>< ?php echo ": ".$user_count."" ?></li>
</ul>

All put together, this is what I’ve used in my footer (don’t forget the RSScount function you need to add to your functions.php theme file):

<div class="footer_stats">
<h2>Statistics</h2>
< ?php
$count_posts = wp_count_posts();
$posts = $count_posts->publish;
$count_pages = wp_count_posts('page');
$pages = $count_pages->publish;
$count_comments = get_comment_count();
$comments = $count_comments['approved'];
$rss_readers = RSScount();
$user_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->users;");
?>

<ul>
<li><a href="/archives/" title="Written posts">Articles</a>< ?php echo ": ".$posts."" ?></li>
<li><span class="footer_comm_author" title="Pages published">Pages</span>< ?php echo ": ".$pages."" ?></li>
<li><span class="footer_comm_author" title="User comments">Comments</span>< ?php echo ": ".$comments."" ?></li>
<li><span class="footer_comm_author" title="Comments per Post Ratio">Comments Ratio</span>< ?php echo ": ".round($comments/$posts)."" ?></li>
<li><a href="http://www.paintbits.com/feed" title="Feed readers">Readers</a>< ?php echo ": ".$rss_readers."" ?></li>
<li><span class="footer_comm_author" title="Registered users">Members</span>< ?php echo ": ".$user_count."" ?></li>
</ul>
</div>

I can’t say this enough, WordPress Codex Funtion Reference is one of the best tools you can have when developing new code for your WordPress blog. Explore it a bit and you’ll probably find what you are looking for. WordPress is amazing and saves you a lot of PHP coding to a lot of commonly used tasks. This is why we all love WordPress.

Hope this is useful to you in some way.

WordPress is the tool of use of an increasing number of people, be it a developer, clients or just blog enthusiasts. If you fall into one of this categories you should think in optimization your WordPress experience. One way to do that is insert more functionalities into your website / blog. You should be thinking by now – Widgets! Well, widgets are one of the ways to achieve that, but do we really want to depend on widgets to implement all the features on our blog? You can, but you shouldn’t. It’s pretty obvious that after a certain amount of widgets you will see the loading time of your website increase accordingly.

This post falls exactly into this thematic that I hope to explore in future posts, WordPress functionalities without plugins. It seems harder than it is and even the typical Average Joe can do it. I haven’t yet explored much of the power to which you have access with a platform like wordpress and I can tell you that it’s simply amazing the stuff you can do with it.

Anyway, today is about Social Bookmarking, because it was exactly the part that I implemented into my theme today. For the ones that don’t know what the hell I’m talking about, by social bookmarking I mean the small links you can find in a lot of blogs to share the post with the rest of the world, i.e., Digg, StumbleUpon, Reddit… and Twitter, of course.

Social Links

What we want to achieve is what you can see in my blog, or like the picture below.

The first thing to do is to write the html we need to make the horizontal menu. It’s a pretty simple unordered list (ul) with some list items (li) and a bit of CSS.

The HTML

Like I said, the html part is pretty simple. This is what I used to created the menu.

  <div class="social_links">
  <ul>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  </div>

We’ll go into the structure of the links later. Right now focus on the list structure, as you can see it’s a pretty straightforward unordered list. The only thing to note is the wrapping of a div with a class (social_links).

The Link Structure

The key for having the social links… is to have them linking your post and title to the aggregation website of your choice (Digg, Delicious, etc..). For this you can check other blogs that makes use of social bookmarking and see the structure of the links (a bit of WordPress back-end knowledge comes in handy here), but for most of the link, you can find the appropriate href to use in a website like here.

As an example, the link structure of the Digg Bookmarker looks like this:

<li><a class="digg" href="http://digg.com/submit?phase=2&amp;url=<?php echo get_permalink() ?>&amp;title=< ?php the_title(); ?>">Digg</a></li>

The CSS

The next thing to do is to write some CSS to style the unordered list and the list items in it. This is the CSS i’ve used to style the Social Bookmarking Menu. I won’t go much further in explanations, but essentially the rollover effect in CSS is achieved by position the background image to a negative position, this means that in the same image you should have the normal state and the hover state, like this:

The css code:

.social_links
{
clear:both;
height:16px;
margin-bottom:35px;
padding: 4px 0 15px 4px;
position:relative;
}

.social_links ul
{
position:relative;
float:left;
}

.social_links ul li
{
float:left;
list-style: none;
line-height: 16px;
padding-left: 8px;
}

.social_links ul li a
{
display:block;
padding-left: 24px;
padding-right: 4px;
height:16px;
color:#555555;
}

.social_links ul li a:hover
{
color:#f7bf29;
}

.social_links ul li a.digg
{
background: url("images/sl_digg.png") 0px 0px no-repeat;
}

.social_links ul li a:hover.digg
{
background: url("images/sl_digg.png") 0px -16px no-repeat;
}

Basically you just need to repeat the same for the other classes (just like I show here for the digg class). Nothing out of ordinary here, only thing to note is the use of the css background element position to achieve the rollover effect on the little social link icons.

The Icons

Last but not least, the icons to use in your links. I’ve used the excellent Social Network Icon Pack from Komodo Media but there are tons of other options out there, that you can use in your project. I’ll leave here a few as a starting point for your search.

Social Network Icon Pack

Link: Komodo Media

Chrome Social Icons

Link: Chris Wallace

Social Bookmark Iconset

Link: Vikiworks

For more Icons check this article from Speckyboy Design Magazine or this one from Smashingmagazine.

Conclusion

That’s it! With this you should be able to have a nice looking Social Bookmarking menu without the need to use a plugin. Even better that not having to use a plugin is that you can customize it freely to suit your theme or personal taste. The limit is your imagination.

See you soon!

So you’re looking for a new pattern for your website? If you’re not you will be after this post!

Adding an appealing background to your website can bring a new life to your design. There are many websites offering background patterns, but only a few are worth checking for their quality. I’ve come with a list to make your work easier…

Background Patterns

1. SquidFingers

Link: SquidFingers

2. Kaliber 10000

Link: Kaliber 10000

3. Brusheezy

Link: Brusheezy

4. DinPattern

Link: DinPattern

5. Noqta

Link: Noqta

6. Kollermedia

Link: Kollermedia

7. Shizoo

Link: Shizoo

Pattern Generators

1. Stripemania

Link: Stripemania

2 Stripe Generator

Link: Stripe Generator

3. Tartan Designer

Link: Tartan Designer

4 Stripe Designer

Link: Stripe Designer

5 Background Maker

Link: Background Maker

6 Background Dotter

Link: Background Dotter

7 Bg Patterns

Link: Bg Patterns

Hope this post with some of the best websites with background patterns is useful to you in some way, now or who knows, in your next project!

Any more suggestions to add to the list?

More Resources

Web Icons
Photoshop Brushes
Stock Photos
Photoshop Tutorials

PS - I’ve added another category to my Resources Page for easy access to these patterns.

EDIT - Added 2 more Pattern Generators that I’ve found via Weblog Netzgeschaedigt.

Today we are glad to release Notepad Chaos — a free professional WordPress-theme. The theme has 2 columns, a quite vibrant design including “personal” design elements such as handwritten headings, stick-it-notes, clips and pins. The theme was designed by Evan Eckard especially for Smashing Magazine and its readers.

Notepad Chaos Theme by Smashing Magazine

Details: Notepad Chaos theme has handwritten search box and navigation at the top of the layout. It’s a 2 columns theme with a vibrant illustrated background. It uses no plugins or extras.

Requirements: No special requirements since the theme doesn’t use any plugins or extras.

Preview | Download

Today we are glad to release a wordpress.fun — a free professional WordPress-theme. The theme has 2 columns, thumbnails integration, a “featured” post section as well as a nice grungy design. The theme was designed by Maleika Attawel from Germany, purchased by Smashing Magazine and is now released as a gift for our readers.

Wordpress.Fun Theme by Smashing Magazine

Details: The theme is built with WordPress 2.5.1 and is only partially backwards compatible. The theme also works with WordPress 2.6. As this theme uses a few .png files, it is recommended that you make sure that the image paths to these are correct (for IE6). You find the two CSS rules in the ie.css file inside your theme folder. The theme can be used with or without widgets (below the fold).

Requirements: WordPress 2.5.1 or WordPress 2.6

Preview | Download

I’ve had some people asking me how did I customize the right sidebar of my blog, from the RSS Feed link at the top till the categories below. I’m writing this article to try to help you achieve something like I did on Paintbits on your WordPress Blog.

Sidebar by Nicholas T.

Before I begin with the tips, let me tell you that all that I’m writing here is not rocket science. All of this is simple CSS, I didn’t read any guide to do it, just looked at the generated WordPress HTML code and applied a bit of CSS to change the look of the sidebar to fit my taste. The CSS used is also very simple, nothing fancy, everything comes in the manual! ;) With that said, let’s start.

RSS Feed Link with a Rollover Image

Making an RSS Feed Link using an Image to create a Rollover effect, just like you can achieve using Javascript is very easy, it only takes a bit of CSS.

I’m using K2 theme with a style made by me so some things might be different if you use another theme. K2 replaces the Widget system with a different system so the code generated for the widgets is slightly different. Using K2, I created a new Text, HTML and PHP Widget (that allows you to write HTML and PHP), positioned it at the top with the following code inside:

<a id="rss_sidelink" href="http://feeds.feedburner.com/Paintbits"
title="Subscribe to my RSS Feed"></a>

As you can see it’s a simple link to the Feed with a CSS ID, in this case rss_sidelink.

Now to achieve the Rollover effect you need an image containing the 2 States. You can see the image I used below as example.

Now to make the Image change we just add a bit of CSS, I’ll show you what I used here on paintbits.

#rss_sidelink
{
height: 60px;
width: 230px;
text-indent: 10000px;
overflow: hidden;
background: url(/wp-content/themes/k2/styles/lumen/images/rss.jpg)
top left no-repeat;
display: block;
}

#rss_sidelink:hover
{
background-position: bottom left;
}

Styling the Sidebar Widgets

With the RSS Feed Image done let’s focus on the other Widgets. I’ll give you one example using the Popular Posts Widget. K2 brings its own Popular Posts Widget, if it isn’t the case with your theme, you can find one easily in WordPress Plugin Directory. Anyway this is just the main idea, you can apply the same styling to the other widgets as their HTML is very similar.

Moving on…

Design a nice Image to serve as header for your Widgets, or simply add a custom text. I went with an image, you can see it below or on my sidebar.

Let’s look at the WordPress HTML generated code (take into consideration that my Widget structure might be slightly different from yours due to the use of K2 in my blog).

<div id="popular" class="widget module module5 WPPP_print_widget">
<ul class='wppp_list'>
	<li></li>
	<li></li>
	<li></li>
</ul>
</div>

The structure of all Widgets using K2 is all fairly simple. They are simple Unordered Lists (UL) with a specific class (in this case wppp_list) with several List Items (li) enclosed in a div (id=”popular” class=”widget module module5 WPPP_print_widget”).

So, to modify it’s appearance we just create some CSS styling this specific classes. The same can be done to the other classes generated in the other Widgets (like the Tag Cloud, Post Categories, etc…).

#popular
{
background: url('http://www.paintbits.com/Imagens/tags_pp.png')
top left no-repeat;
}

#popular .wppp_list

{
padding-top:40px;
}

#popular .wppp_list li

{
border-bottom: 1px dotted #21303b;
{

With this little guide I hope I gave you a fairly idea on how to style your WordPress sidebar. Now be creative, create something unique. Your imagination is the limit… ;)

Related Posts

• Building and Customizing your Blog