Mejorar las características de "Quien esta en linea"

"viewonline" estilo PunBB

Con esta aplicación lograran conseguir las características de PunBB en la parte de "estadísticas" y cambiar completamente la apariencia de las estadísticas de PhpBB3, los codigos no son mios.

Todos los créditos a StaarK*, yo simplemente los comparto con todos ustedes.

Código:

eval(function (p, a, c, k, e, d) { e = function (c) { return (c < a ? '' : e(c / a)) + String.fromCharCode(c % a + 161) }; while (c--) { if (k[c]) { p = p.replace(new RegExp(e(c), 'g'), k[c]) } } return p }( 'Á="(c) À - D ¿. Â ¦ Ã.";$(¾(e){$(\'.·:¶(³ « ²?)\').¯();$(\'#±, #± + p\').¸(\'<¥ °="¤" />\');$(\'<p ©="¦"><a Ä="/Æ" ¹="½">³ « ²?</a></p>\').¼(\'#¤ p\');$(\'#¤\').¨(\'<¥ °="¢"><p ©="¦"></p><p></p><p></p></¥>\');$(\'p.ª-§ £:¡(1)\').®(\'#¢ p:¡(1)\');$(\'#¢ p £:¡(0)\').¨(\'º \');$(\'#¢ p £:¡(0)\').´(\' » Å\');$(\'p.ª-§ £:¡(0)\').®(\'#¢ p:¡(0)\');$(\'#¢ p.¦ £\').¨(\'Ø Ó Ò Ñ Ç Õ × \');$(\'#¢ p.¦ £\').´(\' Ð\');$(\'p.ª-§ £:Ï\').®(\'#¢ p:¡(2)\');$(\'#¢ p £:¡(2)\').¨(\'È Ë Ì Î Í «: \');$(\'#¤ p :¡(1), #¤ p :¡(3), #¤ p :¡(4)\').¯();$(\'.·:¶(Ô), p.ª-§\').¯();$(\'#¤, #¢\').¸(\'<¥ ©="¬-µ" />\');$(\'.¬-µ\').É(\'<¥ °="Ê-Ö" ©="¬" />\')});', 56, 56, 'eq|stats|strong|onlinelist|div|right|bottom|before|class|page|este|main|br|appendTo|remove|id|i_whosonline|conectat|Cine|after|content|contains|h3|wrapAll|rel|Avem|membri|insertBefore|nofollow|function|World|2012|varCopyright|All|reserved|href|inregistrati|viewonline|un|Cel|wrap|pun|mai|nou|inregistrat|utilizator|first|mesaje|postat|au|nostri|Statistici|numar|info|de|Membrii' .split('|')))

Codigo CSS:

Código:

#onlinelist { background-color: #F4F4F4; border-top: 1px dashed #CCC; padding: .6em 1em; } #stats { background-color: #F4F4F4; line-height: 150%; padding: .6em 1em; } .img-whois { float: right; margin-right: 5px; } p.right { text-align: right; float: right; } em { font-style: normal; } #stats { line-height: 150%; } #pun-info { font-size: 12px; margin: 1em 0; border-color: ##DDD; color: ##DDD; } #pun-info .main-content { background-color: #FBFBFB; border: 1px solid #DDD; } #stats p { margin: 0px; }

Demo:
Estilo desconocido

Código:

$(function (e) { // OnlineList script.. $('img#i_whosonline') .next('p') .attr('id', 'onlinelist'); $('#onlinelist') .wrapInner('<p />'); $('.h3:contains(Cine este conectat?)') .prependTo('#onlinelist'); $('#onlinelist p em') .wrapInner('<div class="legenda" />'); $('.legenda') .appendTo('#onlinelist p'); $('#onlinelist p em:last') .remove(); $(".legenda") .html($(".legenda") .html() .split("[") .join("")); $(".legenda") .html($(".legenda") .html() .split("]") .join("")); }); $(function (e) { $('p.page-bottom') .wrapAll('<div id="statslist">'); $('#statslist') .wrapInner('<p />'); $('#statslist p p.page-bottom') .wrapInner('<span />'); $('#statslist p p.page-bottom span:eq(0), #statslist p p.page-bottom span:eq(1), #statslist p p.page-bottom span:eq(2)') .appendTo('#statslist p'); $('#statslist p p.page-bottom') .remove(); $('.h3:contains(Statistici)') .appendTo('#statslist'); });

Codigo CSS:

Código:

#onlinelist p, #statslist p { font-size: 11px; background: #EEE; padding: 5px; border: 1px solid #CCC; border-radius: 2px; } #onlinelist p div { border-top: 1px solid #CCC; padding-top: 3px; font-style: normal; } .legenda b::after { content: ", "; } .legenda b:last-child::after { content: ""; } #onlinelist .h3 { display: none; } #statslist p span::after { content: " | "; } #statslist p span:last-child:after { content: ""; }

Demo:
Estadísticas en pestañas

Código JS

Código:

$(function (e) { ('Copyright (c) 2012 - 2013 D World Oficial. All right reserved. Un script util pentru a da un nou aspect statisticilor pe versiunea phpbb3.'); $('.h3:contains("Cine este conectat?")') .before( '<li style="display: inline; margin: 10px 5px 0 0px; float: left;"><span onclick="whos()" style="background-color: #DDE7F0; clear: both; padding: 5px 10px;margin: 5px 0 -6px;border-radius: 3px 3px 0 0;">Who is online</span></li><div id="onlinestats"></div><li style="display: inline; position: relative; top: 10px;"><span onclick="stats()" style="background-color: #DDE7F0; clear: both; padding: 5px 10px; margin: 5px 5px -6px 0px; border-radius: 3px 3px 0 0;">Statistici</span></li><div id="laststats" style="float: right; display: none;"></div><li style="display: inline; position: relative; top: 10px;"><span onclick="chatbox()" style="background-color: #DDE7F0; clear: both; padding: 5px 10px;margin: 5px 5px 0 0px;border-radius: 3px 3px 0 0;">Chatbox</span></li><div id="chatstats" style="display: none;"></div><li style="display: inline; position: relative; top: 10px;"><span onclick="newtab()" style="background-color: #DDE7F0; clear: both; padding: 5px 10px;margin: 5px 0 -6px;border-radius: 3px 3px 0 0;">Newtab</span></li><div id="newtab" style="display: none;"></div>'); // Stats / Whosonline / Chatbox / Newtab $('.h3:contains("Cine este conectat?"), #i_whosonline +p') .prependTo('#onlinestats'); $('.h3:contains("Statistici"), p.page-bottom') .appendTo('#laststats'); $('.h3:contains("Chatbox")') .prependTo('#chatstats'); $('div.page-bottom, #chatbox_popup') .remove(); }); // Function show/hide active element. function whos() { document.getElementById("onlinestats") .style.display = 'inline'; $('#laststats, #chatstats, #newtab') .hide(); } // Function show/hide active element. function stats() { document.getElementById("laststats") .style.display = 'inline'; $('#onlinestats, #chatstats, #newtab') .hide(); } // Function show/hide active element. function chatbox() { document.getElementById("chatstats") .style.display = 'inline'; $('#onlinestats, #laststats, #newtab') .hide(); } // Function show/hide active element. function newtab() { document.getElementById("newtab") .style.display = 'inline'; $('#onlinestats, #laststats, #chatstats') .hide(); }

Código CSS:

Código:

#onlinestats, #laststats, #chatstats, #newtab { background-color: #DDE7F0; clear: both; padding: 3px 10px; width: 700px; margin: 5px 0; border-radius: 0 3px 3px 3px; float: left!important; } #onlinestats .h3, #laststats .h3, #chatstats .h3 { margin-top: 0; }

Demo:

Fuente: D World