Online / Offline status CSS styling

[dszuecs]

This is a very simply, alternativ ON / OFF status styling via CSS.
Check out the screenshots at the end of the post, the status can be found on the right if the nickname


1. Open your "additional.css" and add this code (feel free to pick your desired colors)


/* BEGIN CUSTOM ONLINE STATUS*/

.customstatuson {
background: #E1FA05;
color: #000;
}

.customstatusoff {
background: #FA7305;
color: #FFF;
}

.customstatusinv {
background: #FFF;
color: #3c3c3c;
}

/* END CUSTOM ONLINE STATUS*/




2. Open your "postbit_onlinestatus" template and replace the existing code with this one


<vb:if condition="$onlinestatus==0"><span class="customstatusoff">&nbsp;OFF&nbsp;</span></vb:if>
<vb:if condition="$onlinestatus==1"><span class="customstatuson">&nbsp;ON&nbsp;</span></vb:if>
<vb:if condition="$onlinestatus==2"><span class="customstatusinv">&nbsp;INV&nbsp;</span></vb:if>

[foudu1030]

First ! :D

Nice resultat ! :D

[Dr.osamA]

thank you bro
installed + rated
tanslated too

[GhostHunter2010]

nice

[hazem_aliraqi]

thank you bro

[Superorb]

Is there a way to center the on/off/inv text vertically?

[dszuecs]

Is there a way to center the on/off/inv text vertically?

Hi Superorb

Sorry for my late response..

You can add another attribute to the css called 'vertical-align'
I guess the easiest way is to use px-values, just try&error. Mine for example is exactly vertical with this:

vertical-align: 2px;

Cheers

[ggrimes620]

Works perfectly and looks great.

Thanks!