ADMIN:

All in One SEO Pack
Out-of-the-box SEO for your Wordpress blog. By Michael Torbert.

Google XML Sitemaps
This plugin will generate a sitemaps.org compatible sitemap of your WordPress blog which is supported by Ask.com, Google, MSN Search and YAHOO.

Preview Theme
Preview installed themes. By Nasser Al-Hilal.

WordPress Database Backup
On-demand backup of your WordPress database. By Austin Matzko.

BACKEND:

Dashboard Editor
Allows you to customise the dashboard. By Aaron Harun.

Lighter Menus
Creates Drop Down Menus for WordPress Admin Panels. Fast to load, adaptable to color schemes, comes with silk icons, a option page, and a design that fits within the Wordpress 2.5 interface taking the less room possible. By corpodibacco.

Simple Tags
Simple Tags : Extended Tagging for WordPress. Autocompletion, Suggested Tags, Tag Cloud Widgets, Related Posts, Mass edit tags. By Amaury BALMER.

FRONTEND:

flickrRSS
Allows you to integrate the photos from a flickr rss feed into your site. By Dave Kellam.

Last.Fm Records
This plugin shows cd covers on your Wordpress weblog. It connects to last.fm and grabs the list of cds you listened to recently and tries to find the cover images at last.fm. To speed things up, it only fetches these data once a day and keeps a local copy for the rest of the day.

MaxBlogPress Favicon
Easily add favicon to your blog without editing any wordpress files. By MaxBlogPress.

COMMENTS:

Akismet
Akismet checks your comments against the Akismet web service to see if they look like spam or not. By Matt Mullenweg.

Author Highlight
Author Highlight is a plugin that prints out a user-specified class attribute if the comment is made by the specified author. It is useful if you would like to apply a different style to comments made by yourself. By Jonathan Leighton.

No Self Pings
Keeps WordPress from sending pings to your own site. By Michael D. Adams.

Quoter
Allows commenters to quote other comments (dynamically or server side if they have Javascript disabled) and any other text in a page (Javascript only). By Daniele Mancino.

Subscribe To Comments
Allows readers to receive notifications of new comments that are posted to an entry. By Mark Jaquith.

WP-RelativeDate
Displays relative date alongside with your post/comments actual date. Like ‘Today’, ‘Yesterday’, ‘2 Days Ago’, ‘2 Weeks Ago’, ‘2 ‘Seconds Ago’, ‘2 Minutes Ago’, ‘2 Hours Ago’. By Lester ‘GaMerZ’ Chan.

Related posts

• Message Boxes with CSS (3)

CSS classes:

Nothing too fancy or complicated. I use a main class .message-box , and then the different style variations separated, but just to dont repeat code and keep things more organized:

/* MESSAGE BOXES
/////////////////////////////*/

.message-box { text-align: center; padding: 5px; color:#545454; width:80%;  margin:5px auto; }

.clean { background-color: #efefef; border-top: 2px solid #dedede; border-bottom: 2px solid #dedede; }
.info  { background-color: #f7fafd; border-top: 2px solid #b5d3ff; border-bottom: 2px solid #b5d3ff; }
.ok    { background-color: #d7f7c4; border-top: 2px solid #82cb2f; border-bottom: 2px solid #82cb2f; }
.alert { background-color: #fef5be; border-top: 2px solid #fdd425; border-bottom: 2px solid #fdd425; }
.error { background-color: #ffcdd1; border-top: 2px solid #e10c0c; border-bottom: 2px solid #e10c0c; }

How to use them:

It is very easy to implement them, you have to first add the message-box class and then the wanted style class ( .clean, .info, .ok, .alert or .error ) to the element you want to use as message box. I tend to use a <p> element to display them:

<p class="message-box info">This is an Info Message</p>

<p class="message-box ok">This is an Ok Message</p>

<p class="message-box alert">This is an Alert Message</p>

<p class="message-box error">This is an Error Message</p>

And thats it. Simple but nice looking! I hope you enjoyed.

Related posts

• CSS Reusable Classes (3)
• Lovely Wordpress Plugins I use (1)
• CSS Text based navigation bar with images (11)

I found that its also a great addition to include what I like to call helpers. By this I mean reusable classes that do common stuff like floating elements, adding a border, indenting text, etc. The idea might seem simple and the classes even a bit silly but I can assure you that once you have them incorporated they will surely speed up your coding process.

The Classes:

I have compiled below some I found myself using lately in almost every project.

/* HELPERS
/////////////////////////////*/

.float-left   { float:left }
.float-right  { float:right }

.align-left   { float:left; margin: 0 15px 0 0 }
.align-right  { float:right; margin: 0 0 0 15px }

.clear        { clear:both }

.center       { margin: 0 auto }

.margins      { margin:15px }
.push-top     { margin-top:15px }
.push-right   { margin-right:15px }
.push-bottom  { margin-bottom:15px }
.push-left    { margin-left:15px }

.border       { border:10px solid #eee }

.text-left    { text-align:left }
.text-right   { text-align:right }
.text-center  { text-align:center }
.text-justify { text-align:justify }

.underline    { text-decoration:underline }
.highlight    { background-color:#ffc }

.indent       { text-indent:15px }
.no-indent    { text-indent:0 }

Usage example:

<img src="pic.gif" alt="Pic" class="align-right border"/>
<p class="text-justify">Lorem ipsum dolor sit..</p>

As a simple example you could use helpers to justify a paragraph and align an image with a border to the right of it.

I Hope you find them useful!. Feel free to leave your own reusable classes on the comments!

Related posts

• Message Boxes with CSS (3)
• CSS Text based navigation bar with images (11)

Preparing the XHTML:

Ok, lets pretend we need to have the following buttons: Home, Services, About Us and Contact Us. We will use a list to create the navigation bar, as navigation bars are a list of links, so they should be marked up as such:

<ul id="topnav">
    <li id="topnav_1"><a href="home.html" title="Home">Home</a></li>
    <li id="topnav_2"><a href="services.html" title="Services">Services</a></li>
    <li id="topnav_3"><a href="about-us.html" title="About Us">About Us</a></li>
    <li id="topnav_4"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
</ul>

You might notice that we gave unique ids to the list and it’s elements to be able to style them separately, we will get into that later.

Image buttons:

Now lets get our hands on the images. I like to use the “sprite image technique”, because it reduces files count, often reduces file size ( which saves bandwidth ), speeds up page load times, makes it easier to maintain and plus it’s fun!. For this example I made a very simple 480×40px navigation bar, let’s take a look at it:

You can see that we have in one image the three instances of the navigation bar with all its buttons. These instances cover the three possible buttons state we need: normal, over and current.

CSS VOODOO:

Here comes the magic ingredient, the CSS. We will use CSS’s power to position each button and instance of our navigation bar image in its own link. First, we start by setting up the list ( navigation bar ) width and height and then removing the item bullets and telling the list to display the items side by side:

/* TOP NAVIGATION BAR
/////////////////////////////////////*/

ul#topnav {
		width:480px;
		list-style:none;
		height:40px;
}

ul#topnav li {
		display:inline;
}

The following step is to add the general rules for the links. We gonna float them to the left, shift their text -9999px to hide it put it out of the screen:

ul#topnav li a {
		height:40px;
		float:left;
		text-indent:-9999px;
}

Now as each link has a different width size and background portion we gonna assign the correct values to each of them with width and the CSS background property. I made a simple schema to show you from where I get values we will use:

ul#topnav li#topnav_1 a {
		width:106px;
		background:url(images/nav.jpg) no-repeat 0 0; /* X and Y position at 0 */
}

ul#topnav  li#topnav_1 a:hover {
		background-position:0 -40px; /* Y position -40px for Over instance image */
}

ul#topnav  li#topnav_1 a.current {
		background-position:0 -80px; /* Y position -80px for Current instance image */
}

As you may see above, we defined 3 rules for the first button: #topnav_1. First rule sets the width of the link and its default background. Second rule, a:hover changes the background’s Y-position to -40px for the over state and lastly the a.current changes the background’s Y-position to -80px for the current class effect.

Now to set the rest of the buttons we will follow the same workflow, keeping in mind that each button have its own width and background X-position. A very quick easy way to get this last value is to get the previous button background X-position and its width and substract them. For example:

#topnav_2 will be: 0 ( previous button background X-position ) - 106px ( previous button width ) = -106px.

#topnav_3 will be: -106px ( previous button background X-position ) - 116px ( previous button width ) = -222px.

ul#topnav li#topnav_2 a {
    width:116px;
    background:url(nav.jpg) no-repeat -106px 0;
}

ul#topnav  li#topnav_2 a:hover {
    background-position:-106px -40px;
}

ul#topnav  li#topnav_2 a.current {
    background-position:-106px -80px;
}

ul#topnav li#topnav_3 a {
    width:122px;
    background:url(nav.jpg) no-repeat -222px 0;
}

ul#topnav  li#topnav_3 a:hover {
    background-position:-222px -40px;
}

ul#topnav  li#topnav_3 a.current {
    background-position:-222px -80px;
}

ul#topnav li#topnav_4 a {
    width:136px;
    background:url(nav.jpg) no-repeat -344px 0;
}

ul#topnav  li#topnav_4 a:hover {
    background-position:-344px -40px;
}

ul#topnav  li#topnav_4 a.current {
    background-position:-344px -80px;
}

CONCLUSION:

There you go, a quick and clean solution to create a text based navigation bar that visually looks like an image based solution with over and current animation using only XHTML, CSS and one image. I hope you find this post useful!

This technique has been tested in: IE6, IE7, Firefox ( Mac/PC ) and Safari ( Mac ).

Related posts

• Message Boxes with CSS (3)
• CSS Reusable Classes (3)

— Hola! I present you my new blog and theme, i finally got the time around to sit on my ass, finish this design and clean up my old content. This is a fresh new start, starting all over again with not just a new design but a more clear goal for the whole site. Now that i have more time to spend on it i hopefully will be writing posts more often, bringing articles, tutorials and other cool stuff to the table. well folks, i hope you like the new design! many new things to come stay tuned!!

Related posts

• No related posts.