Back in last year, when I was running a gaming clan, I had to design my own small content management system. The application I built was being used my clan members as well. So I had to make it user friendly. The best way to do that is having informational messages in your system to help out your users.

For instance if your user has performed something,  some message should appear saying that whether the action has been performed successfully or has not been performed. This kind of system messages can be used in your posts as well. Take a look at this example.

These info or status messages will add a professional look to your website. I have been working with CSS for sometime now. Now, I know how easy these stuff are.  So I thought I’d make this tutorial.

Here it goes.

First thing we need to do is to find a wordpress theme to work with. I’ll just use this blog’s default theme.

The only trick is that the background color and the border color. So whatever you pick for your background color, you should pick a darker tone of that background color. This is to make the border and the whole thing noticeable.

Here is our first try, I’ll call this division class “positive”.

.positive {
background:#f6f9c7 url('img/icons/ok.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}


.download {
background:#f6f9c7 url('img/icons/dl.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}

.stop {
background:#f6f9c7 url('img/icons/stop.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}

.att {
background:#f6f9c7 url('img/icons/att.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}

You can change properties of these as you wish. It’s simple CSS. Only thing that might be tricky is the position of our background image.  You can use percent values instead of pixels. But unfortunately, that didn’t work in X direction as I wanted. So i used pixels.


background-position:8px 5px;

First value is the X axis and second value is Y axis. Other than that, there is no tricky part. Feel free to use them. Here is the icon set I used.

• http://www.icojoy.com/articles/26/