Status online jak na szablonach pixelmonkey

wersja skryptu MyBB: 1.6.9
adres forum: FerryCraft!
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Witam. Nie będę owijał w bawełnę i przechodzę do sedna. Jak zrobić taki status online jak na szablonach pixelmonkey? Mam dostęp do jednego (DEMO) i po kopiowałem rzeczy lecz nic nie wyszło.
A wygląda to tak:

Klasy CSS:

.online {
color:
white;
background:
#A2CE46;
padding: 1px 2px;
text-shadow: 1px 1px 1px
#A5B492;
border-radius: 3px;
font-size: 11px;
}

.statusinfo {background: #D9E697;
border: 1px solid #B8C77B;
padding: 2px;
font-size: 11px;
border-radius: 3px;
margin-left: 4px;
color: #6C772F;}

Szablon member_profile_online:

<a href="online.php"><span class="online userprofile_status" style="font-weight: bold;">{$lang->postbit_status_online}</span></a><span class="statusinfo"> ({$location} @ {$location_time})</span>

Headerinclude:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/searchmenu.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/pixelmon.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
{$stylesheets}
<script type="text/javascript">
<!--
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/usertabs.js">

/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

---

Rozwiązałem! Użyłem do tego tylko i wyłącznie CSS!

O to rozwiązanie:

CSS:

.statusinfo {
    font-size:11px;
    background:white;
    border-radius:3px;
    padding: 2px 4px;
    color:#222;
    opacity:0;
    -webkit-transition:0.3s;
    transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    -moz-transition:0.3s;
    box-shadow: 1px 1px 1px #333;
    margin-left: 10px;
}

.online2 {
color: #FFFFFF;
}

.online2:hover .statusinfo {
    opacity:1;
}

Szablon member_profile_online:

<span class="online2">
<a href="online.php"><span class="online userprofile_status" style="font-weight: bold;">{$lang->postbit_status_online}</span></a><span class="statusinfo"> ({$location} @ {$location_time}
</span></span>