Bem vindo ao JScript Forumeiros

waghcwb · 1 Chatbox IPBoard otimizado Seg 27 Jan 2014, 3:44 pm

waghcwb

Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Olá amigos, eu não sei se o JScript permite isso, mas de qualquer forma eu peguei os códigos do chatbox e otimizei eles, de maneira que fique mais legível, tirei diversas e imagens e troquei por gradientes com CSS, e coloquei algumas imagens existentes em um sprite... Eu espero que seja útil e caso o JScrit goste ele pode até implantar no código original.

Segue o conteúdo.
HTML

Código:: <!DOCTYPE html> <html lang="pt-br"> <head> <title>Chatbox</title> <meta charset="utf-8">  <link rel="icon" href="//illiweb.com/fa/favicon/write.ico" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body onload="parent.updateIframeSize('iframe_shoutbox', $('html').height());"> <div id="ajax_loading"> <img alt="Carregando..." src="http://i56.servimg.com/u/f56/17/78/57/29/ajax_l11.gif"/> </div> <div id="shoutbox-temp-msgs"></div> <div id="shoutbox-temp-imgs"></div> <div id="category_shoutbox" class="category_block block_wrap"> <h3 class="maintitle"> <a title="Fechar/Abrir shoutbox" href="#" class="toggle right">Fechar/Abrir shoutbox</a> <a title="View Main Shoutbox" target="_top">IPBoard Chat (v1.1112pr)</a> </h3> <div class="ipsBox table_wrap"> <div class="ipsBox_container"> <table class="ipb_table shoutbox_table"> <tbody> <tr class="row2" id="shoutbox-announcement-row"> <td valign="middle" colspan="2" class="altrow"> <div class="message" id="shoutbox-announcement-text"> A ofensa a outro membro ou staff está sujeita a punições. | <strong class="bbc">O Chatbox é um lugar para descontração, e entretenimento, não de ajuda e suporte! <strong>Não insista!!</strong></strong> </div> </td> </tr> <tr class="row1"> <td valign="top" colspan="2" class="altrow"> <div id="shoutbox-shouts"> <p id="shoutbox-inactive-prompt" style="display: none; height: 126px;" class="altrow short"> <br>Nós percebemos que você esteve inativo por mais de 10 minutos.<br> O shoutbox parou de ser executado devido a sua inatividade.<br> Se você está de volta, por favor clique no botão abaixo <u>Estou de Volta!</u>. <br><br> <input type="button" onclick="I_am_back();" class="input_submit" value="Estou de Volta!"> </p> <p id="shoutbox-service" class="altrow short"> <br><br>Nosso shoutbox está passando por manutenção neste momento, agradecemos a sua compreênção!<br> Em breve estaremos funcionando normalmente, grato pela sua visita...<br> O shoutbox parou de ser executado por motivos técnicos.<br> </p> <table id="shoutbox-shouts-table"> <div id="chatbox_members" increment="10" pageincrement="144" maxpos="460" curpos="0"></div> <tbody id="chatbox_general" class="chat_toggle" curpos="188" maxpos="325" pageincrement="0" increment="10">  </tbody> <tbody id="chatbox_mpreceive" class="chat_toggle" curpos="188" maxpos="325" pageincrement="0" increment="10">  </tbody> <tbody id="chatbox_mpsend" class="chat_toggle" curpos="188" maxpos="325" pageincrement="0" increment="10">  </tbody> </table> </div> <div id="shouts-global-resizer" title="Clique para redimensionar o ShoutBox!" onmousedown="resizeElement();"></div> <div class="message error block_wrap" id="shoutbox-inline-error-glb"></div> </td> </tr>  <tr class="row1"> <td valign="top" colspan="2" class="altrow"> <form onsubmit="submitmsg('?archives=1');return false;" method="post" action="" name="post"> <div id="chatbox_messenger_form"> <div onclick="document.post.message.focus();timer_count=0;"> <input type="text" id="message" name="message" size="70" maxlength="1024" class="input_text" autocomplete="off" onkeydown="number_of_refresh=0;timer_count=0;" /> <input type="submit" class="input_submit" value="Enviar Shout" id="submit_button" name="submit_button"/> <input type="button" class="input_submit alt" value="Limpar" id="shoutbox-clear-button" onclick="document.getElementById('message').value = '';"> <input type="button" class="input_submit alt" value="Atualizar" id="shoutbox-refresh-button" style="" onclick="refresh_chatbox('?archives=1');"/> <input type="button" data-scope="shoutbox" onclick="do_selectsmilies(event);" class="input_submit alt" value="Smilies" id="divsmilies"/> <input type="button" class="input_submit alt" value="BBCode" id="shoutbox-bbcode-button" onclick="window.open('/faq?mode=bbcode','BBCodes Help','status=no,location=no,toolbar=no,menubar=no,personalbar=no,width=640,height=window.innerHeight,scrollbars=yes,resizable=yes,left=0,top=0'); return false;"> <input type="button" class="input_submit alt" value="Preferências" id="shoutbox-myprefs-button" onclick="$('#myPrefs_popup').toggle();"/> </div> </div> </form> </td> </tr> </tbody> </table> </div> </div> </div>  <div id="shoutbox-smilies-button_menucontent"> <h3 class="maintitle short"> <span class="pager"> <a id="page_0" class="emoticonPager" href="#">«</a> </span> More <span class="pager"> <a id="page_1" class="emoticonPager" href="#">»</a> </span> </h3> <table class="ipb_table"> <tbody> <tr id="smile_row" class="row1"> <td> <span class="emoticons"> <a href="#" onclick="copy_user_name(':sos:')"> <img style="margin-bottom: 10px;" alt="No Like!" src="//r19.imgfast.net/users/1917/43/09/52/smiles/632187147.gif" title="SOS"> </a> <a href="#" onclick="copy_user_name(':D')"> <img style="margin-bottom: 10px;" alt="Very Happy" src="//2img.net/i/fa/i/smiles/icon_biggrin.png" title="Very Happy"> </a> <a href="#" onclick="copy_user_name(':)')"> <img style="margin-bottom: 10px;" alt="Smile" src="//2img.net/i/fa/i/smiles/icon_smile.gif" title="Smile"> </a> <a href="#" onclick="copy_user_name(':(')"> <img style="margin-bottom: 10px;" alt="Sad" src="//2img.net/i/fa/i/smiles/icon_sad.gif" title="Sad"> </a> <a href="#" onclick="copy_user_name(':o')"> <img style="margin-bottom: 10px;" alt="Surprised" src="//2img.net/i/fa/i/smiles/icon_surprised.gif" title="Surprised"> </a> <a href="#" onclick="copy_user_name(':shock:')"> <img style="margin-bottom: 10px;" alt="Shocked" src="//2img.net/i/fa/i/smiles/icon_eek.gif" title="Shocked"> </a> <a href="#" onclick="copy_user_name('8)')"> <img style="margin-bottom: 10px;" alt="Cool" src="//2img.net/i/fa/i/smiles/icon_cool.gif" title="Cool"> </a> <a href="#" onclick="copy_user_name(':lol:')"> <img style="margin-bottom: 10px;" alt="Laughing" src="//2img.net/i/fa/i/smiles/icon_lol.gif" title="Laughing"> </a> <a href="#" onclick="copy_user_name(':x')"> <img style="margin-bottom: 10px;" alt="Mad" src="//2img.net/i/fa/i/smiles/icon_mad.gif" title="Mad"> </a> <a href="#" onclick="copy_user_name(':P')"> <img style="margin-bottom: 10px;" alt="Razz" src="//2img.net/i/fa/i/smiles/icon_razz.gif" title="Razz"> </a> <a href="#" onclick="copy_user_name(':oops:')"> <img style="margin-bottom: 10px;" alt="Embarassed" src="//2img.net/i/fa/i/smiles/icon_redface.gif" title="Embarassed"> </a> <a href="#" onclick="copy_user_name(':cry:')"> <img style="margin-bottom: 10px;" alt="Crying or Very sad" src="//2img.net/i/fa/i/smiles/icon_cry.gif" title="Crying or Very sad"> </a> <a href="#" onclick="copy_user_name(':evil:')"> <img style="margin-bottom: 10px;" alt="Evil or Very Mad" src="//2img.net/i/fa/i/smiles/icon_evil.gif" title="Evil or Very Mad"> </a> <a href="#" onclick="copy_user_name(':twisted:')"> <img style="margin-bottom: 10px;" alt="Twisted Evil" src="//2img.net/i/fa/i/smiles/icon_twisted.gif" title="Twisted Evil"> </a> <a href="#" onclick="copy_user_name(':roll:')"> <img style="margin-bottom: 10px;" alt="Rolling Eyes" src="//2img.net/i/fa/i/smiles/icon_rolleyes.gif" title="Rolling Eyes"> </a> <a href="#" onclick="copy_user_name(';)')"> <img style="margin-bottom: 10px;" alt="Wink" src="//2img.net/i/fa/i/smiles/icon_wink.gif" title="Wink"> </a> <a href="#" onclick="copy_user_name(':!:')"> <img style="margin-bottom: 10px;" alt="Exclamation" src="//2img.net/i/fa/i/smiles/icon_exclaim.gif" title="Exclamation"> </a> <a href="#" onclick="copy_user_name(':?:')"> <img style="margin-bottom: 10px;" alt="Question" src="//2img.net/i/fa/i/smiles/icon_question.gif" title="Question"> </a> <a href="#" onclick="copy_user_name(':idea:')"> <img style="margin-bottom: 10px;" alt="Idea" src="//2img.net/i/fa/i/smiles/icon_idea.png" title="Idea"> </a> <a href="#" onclick="copy_user_name(':arrow:')"> <img style="margin-bottom: 10px;" alt="Arrow" src="//2img.net/i/fa/i/smiles/icon_arrow.gif" title="Arrow"> </a> <a href="#" onclick="copy_user_name(':|')"> <img style="margin-bottom: 10px;" alt="Neutral" src="//2img.net/i/fa/i/smiles/icon_neutral.gif" title="Neutral"> </a> <a href="#" onclick="copy_user_name(':face:')"> <img style="margin-bottom: 10px;" alt="What a Face" src="//2img.net/i/fa/i/smiles/fresse.png" title="What a Face"> </a> <a href="#" onclick="copy_user_name(':star:')"> <img style="margin-bottom: 10px;" alt="Like a Star @ heaven" src="//2img.net/i/fa/i/smiles/star3.png" title="Like a Star @ heaven"> </a> <a href="#" onclick="copy_user_name(':suspect:')"> <img style="margin-bottom: 10px;" alt="Suspect" src="//2img.net/i/fa/i/smiles/suspect.gif" title="Suspect"> </a> <a href="#" onclick="copy_user_name(':heart:')"> <img style="margin-bottom: 10px;" alt="I love you" src="//2img.net/i/fa/i/smiles/herz.png" title="I love you"> </a> <a href="#" onclick="copy_user_name(':no:')"> <img style="margin-bottom: 10px;" alt="No" src="//2img.net/i/fa/i/smiles/kopfschuettel.gif" title="No"> </a> <a href="#" onclick="copy_user_name(':@:')"> <img style="margin-bottom: 10px;" alt="@" src="//2img.net/i/fa/i/smiles/at.png" title="@"> </a> <a href="#" onclick="copy_user_name(':cyclops:')"> <img style="margin-bottom: 10px;" alt="cyclops" src="//2img.net/i/fa/i/smiles/icon_cyclops.gif" title="cyclops"> </a> <a href="#" onclick="copy_user_name(':clown:')"> <img style="margin-bottom: 10px;" alt="clown" src="//2img.net/i/fa/i/smiles/icon_clown.png" title="clown"> </a> <a href="#" onclick="copy_user_name(':pirat:')"> <img style="margin-bottom: 10px;" alt="pirat" src="//2img.net/i/fa/i/smiles/icon_pirat.png" title="pirat"> </a> <a href="#" onclick="copy_user_name(':tongue:')"> <img style="margin-bottom: 10px;" alt="tongue" src="//2img.net/i/fa/i/smiles/icon_tongue.png" title="tongue"> </a> <a href="#" onclick="copy_user_name(':silent:')"> <img style="margin-bottom: 10px;" alt="silent" src="//2img.net/i/fa/i/smiles/icon_silent.png" title="silent"> </a> <a href="#" onclick="copy_user_name(':pale:')"> <img style="margin-bottom: 10px;" alt="pale" src="//2img.net/i/fa/i/smiles/icon_pale.gif" title="pale"> </a> <a href="#" onclick="copy_user_name(':alien:')"> <img style="margin-bottom: 10px;" alt="alien" src="//2img.net/i/fa/i/smiles/alien.png" title="alien"> </a> <a href="#" onclick="copy_user_name(':cat:')"> <img style="margin-bottom: 10px;" alt="cat" src="//2img.net/i/fa/i/smiles/icon_cat.png" title="cat"> </a> <a href="#" onclick="copy_user_name(':monkey:')"> <img style="margin-bottom: 10px;" alt="monkey" src="//2img.net/i/fa/i/smiles/icon_monkey.png" title="monkey"> </a> <a href="#" onclick="copy_user_name(':pig:')"> <img style="margin-bottom: 10px;" alt="pig" src="//2img.net/i/fa/i/smiles/icon_porc.png" title="pig"> </a> <a href="#" onclick="copy_user_name(':rabbit:')"> <img style="margin-bottom: 10px;" alt="rabbit" src="//2img.net/i/fa/i/smiles/icon_rabbit.png" title="rabbit"> </a> <a href="#" onclick="copy_user_name(':bounce:')"> <img style="margin-bottom: 10px;" alt="bounce" src="//2img.net/i/fa/i/smiles/icon_bounce.gif" title="bounce"> </a> <a href="#" onclick="copy_user_name(':confused:')"> <img style="margin-bottom: 10px;" alt="confused" src="//2img.net/i/fa/i/smiles/confused.png" title="confused"> </a> <a href="#" onclick="copy_user_name(':affraid:')"> <img style="margin-bottom: 10px;" alt="affraid" src="//2img.net/i/fa/i/smiles/affraid.gif" title="affraid"> </a> <a href="#" onclick="copy_user_name(':bball:')"> <img style="margin-bottom: 10px;" alt="Basketball" src="//2img.net/i/fa/i/smiles/icon_basketball.gif" title="Basketball"> </a> <a href="#" onclick="copy_user_name(':cheers:')"> <img style="margin-bottom: 10px;" alt="cheers" src="//2img.net/i/fa/i/smiles/icon_cheers.png" title="cheers"> </a> <a href="#" onclick="copy_user_name(':bom:')"> <img style="margin-bottom: 10px;" alt="bom" src="//2img.net/i/fa/i/smiles/bom.png" title="bom"> </a> <a href="#" onclick="copy_user_name(':drunken:')"> <img style="margin-bottom: 10px;" alt="drunken" src="//2img.net/i/fa/i/smiles/drunken_smilie.png" title="drunken"> </a> <a href="#" onclick="copy_user_name(':sleep:')"> <img style="margin-bottom: 10px;" alt="Sleep" src="//2img.net/i/fa/i/smiles/sleep.gif" title="Sleep"> </a> <a href="#" onclick="copy_user_name(':sunny:')"> <img style="margin-bottom: 10px;" alt="sunny" src="//2img.net/i/fa/i/smiles/icon_sunny.png" title="sunny"> </a> <a href="#" onclick="copy_user_name(':albino:')"> <img style="margin-bottom: 10px;" alt="albino" src="//2img.net/i/fa/i/smiles/icon_albino.png" title="albino"> </a> <a href="#" onclick="copy_user_name(':cherry:')"> <img style="margin-bottom: 10px;" alt="cherry" src="//2img.net/i/fa/i/smiles/icon_cherry.png" title="cherry"> </a> <a href="#" onclick="copy_user_name(':santa:')"> <img style="margin-bottom: 10px;" alt="santa" src="//2img.net/i/fa/i/smiles/icon_santa.png" title="santa"> </a> <a href="#" onclick="copy_user_name(':rendeer:')"> <img style="margin-bottom: 10px;" alt="rendeer" src="//2img.net/i/fa/i/smiles/icon_rendeer.png" title="rendeer"> </a> <a href="#" onclick="copy_user_name(':farao:')"> <img style="margin-bottom: 10px;" alt="farao" src="//2img.net/i/fa/i/smiles/icon_farao.png" title="farao"> </a> <a href="#" onclick="copy_user_name(':king:')"> <img style="margin-bottom: 10px;" alt="king" src="//2img.net/i/fa/i/smiles/icon_king.png" title="king"> </a> <a href="#" onclick="copy_user_name(':queen:')"> <img style="margin-bottom: 10px;" alt="queen" src="//2img.net/i/fa/i/smiles/icon_queen.png" title="queen"> </a> <a href="#" onclick="copy_user_name(':joker:')"> <img style="margin-bottom: 10px;" alt="jocolor" src="//2img.net/i/fa/i/smiles/icon_jokercolor.png" title="jocolor"> </a> <a href="#" onclick="copy_user_name(':geek:')"> <img style="margin-bottom: 10px;" alt="geek" src="//2img.net/i/fa/i/smiles/icon_geek.png" title="geek"> </a> <a href="#" onclick="copy_user_name(':scratch:')"> <img style="margin-bottom: 10px;" alt="scratch" src="//2img.net/i/fa/i/smiles/icon_scratch.png" title="scratch"> </a> <a href="#" onclick="copy_user_name(':study:')"> <img style="margin-bottom: 10px;" alt="study" src="//2img.net/i/fa/i/smiles/icon_study.png" title="study"> </a> <a href="#" onclick="copy_user_name(':elephant:')"> <img style="margin-bottom: 10px;" alt="elephant" src="//2img.net/i/fa/i/smiles/icon_elephant.png" title="elephant"> </a> <a href="#" onclick="copy_user_name(':flower:')"> <img style="margin-bottom: 10px;" alt="flower" src="//2img.net/i/fa/i/smiles/icon_flower.png" title="flower"> </a> <a href="#" onclick="copy_user_name(':afro:')"> <img style="margin-bottom: 10px;" alt="afro" src="//2img.net/i/fa/i/smiles/icon_rr.png" title="afro"> </a> <a href="#" onclick="copy_user_name(':lol!:')"> <img style="margin-bottom: 10px;" alt="lol!" src="//2img.net/i/fa/i/smiles/lol.gif" title="lol!"> </a> </span> </td> </tr> </tbody> </table> </div> <div class="popupWrapper" id="editShout_popup"> <div class="popupInner" id="editShout_inner"> <h3>Editar Shout</h3> <div class="message error block_wrap" id="shoutbox-inline-error-editShout"></div> <div class="ipsPad"> <span class="cke_wrapper cke_ltr" role="presentation"> <form onsubmit="submitEditedMsg('?archives=1');return false;" method="post" action="" name="editpost"> <table border="0" cellpadding="0" cellspacing="0" class="cke_editor"> <tbody> <tr style="-moz-user-select: none;"> <td> <span id="text_editor"> <button class="input_submit alt" onclick="BBCode_Add('bold', 'editarea')" type="button" accesskey="b" title="Negrito"> <img src="//2img.net/i/fa/wysiwyg/text_bold.png" alt="Negrito" title="Negrito"> </button> <button class="input_submit alt" onclick="BBCode_Add('italic', 'editarea')" type="button" accesskey="i" title="Itálico"> <img src="//2img.net/i/fa/wysiwyg/text_italic.png" alt="Itál" title="Itálico"> </button> <button class="input_submit alt" onclick="BBCode_Add('underline', 'editarea')" type="button" accesskey="u" title="Sublinhar"> <img src="//2img.net/i/fa/wysiwyg/text_underline.png" alt="Sub" title="Sublinhar"> </button> <button class="input_submit alt" onclick="BBCode_Add('left', 'editarea')" type="button" accesskey="m" title="Esquerda"> <img src="//2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esq" title="Esquerda"> </button> <button class="input_submit alt" onclick="BBCode_Add('center', 'editarea')" type="button" accesskey="t" title="Centralizar"> <img src="//2img.net/i/fa/wysiwyg/text_align_center.png" alt="Cent" title="Centralizar"> </button> <button class="input_submit alt" onclick="BBCode_Add('right', 'editarea')" type="button" accesskey="g" title="Direita"> <img src="//2img.net/i/fa/wysiwyg/text_align_right.png" alt="Dir" title="Direita"> </button> <button class="input_submit alt" onclick="BBCode_Add('list', 'editarea')" type="button" accesskey="l" title="Lista simples"> <img src="//2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="List" title="Lista simples"> </button> <button class="input_submit alt" onclick="BBCode_Add('list=1', 'editarea')" type="button" accesskey="o" title="Lista numerada"> <img src="//2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="List" title="Lista numarada"> </button> <button class="input_submit alt" onclick="BBCode_Add('img', 'editarea')" type="button" accesskey="p" title="Imagem"> <img src="//2img.net/i/fa/wysiwyg/picture.png" alt="Img" title="Imagem"> </button> <button class="input_submit alt" onclick="BBCode_Add('url', 'editarea')" type="button" accesskey="w" title="Link"> <img src="//2img.net/i/fa/wysiwyg/link.png" alt="Lnk" title="Link"> </button> </span> </td> </tr> <tr> <td class="cke_contents"> <textarea class="input_text" id="editarea" name="editarea" onkeydown="number_of_refresh=0;timer_count=0;"></textarea> </td> </tr> </tbody> </table> <div class="short ipsPad"> <div onclick="document.editpost.editarea.focus();timer_count=0;"> <input type="submit" class="input_submit" value="Enviar Shout" id="submit_button" name="submit_button"/> <input type="button" class="input_submit alt" value="Limpar" id="shoutbox-clear-button" onclick="document.getElementById('editarea').value = '';"> <input type="button" class="input_submit alt" value="Cancelar" id="shoutbox-refresh-button" onclick="$('#editShout_popup').toggle();"> </div> </div> </form> </span> </div> </div> <div class="popupClose clickable" id="editShout_close" onclick="$('#editShout_popup').toggle();"> <img alt="x" src="http://forum.autoitbrasil.com/public/style_images/master/close_popup.png"> </div> </div> <div id="myPrefs_popup" class="popupWrapper"> <div id="myPrefs_inner" class="popupInner"> <h3>Painel de Minhas Preferências</h3> <div class="ipsBox table_wrap"> <div class="ipsBox_container"> <div class="message error block_wrap" id="shoutbox-inline-error-myprefs"></div> <table class="ipb_table"> <tbody> <tr> <td colspan="2"> Aqui você pode mudar suas preferências pessoais para o Shoutbox.<br>Simplesmente atualize as preferências a seu gosto e clique no botão 'Salvar'. </td> </tr> <tr class="row2"> <td colspan="2" class="altrow"> <strong id="shoutbox-popup-status">Preferências</strong> </td> </tr> <tr> <td class="short" style="width: 50%;"> <strong>Mostrar o Shoutbox Global?</strong> <br> <label for="my_prefs_gsb_y">Sim</label> <input type="radio" checked="" id="my_prefs_gsb_y" value="1" name="my_prefs_gsb" class="input_radio"> <input type="radio" id="my_prefs_gsb_n" value="0" name="my_prefs_gsb" class="input_radio"> <label for="my_prefs_gsb_n">Não</label> </td> <td class="short" style="width: 50%;"> <strong>A <em>Tecla Enter</em> deverá agir como o botão 'Enviar Shout'?</strong> <br> <label for="my_prefs_ets_y">Sim</label> <input type="radio" id="my_prefs_ets_y" value="1" name="my_prefs_ets" class="input_radio"> <input type="radio" checked="" id="my_prefs_ets_n" value="0" name="my_prefs_ets" class="input_radio"> <label for="my_prefs_ets_n">Não</label> </td> </tr> <tr> <td class="short"> <strong>Mostrar o botão Atualizar?</strong> <br> <label for="my_prefs_drb_y">Sim</label> <input type="radio" checked="" id="my_prefs_drb_y" value="1" name="my_prefs_drb" class="input_radio"> <input type="radio" id="my_prefs_drb_n" value="0" name="my_prefs_drb" class="input_radio"> <label for="my_prefs_drb_n">Não</label> </td> <td class="short"> <strong>Habilitar Comandos Rápidos?</strong> <br> <label for="my_prefs_eqc_y">Sim</label> <input type="radio" checked="" id="my_prefs_eqc_y" value="1" name="my_prefs_eqc" class="input_radio"> <input type="radio" id="my_prefs_eqc_n" value="0" name="my_prefs_eqc" class="input_radio"> <label for="my_prefs_eqc_n">Não</label> </td> </tr> <tr> <td class="short"> <strong>Shoutbox display order?</strong> </td> <td class="short"> <select id="my_prefs_sdo" name="my_prefs_sdo"> <option selected="" value="">Default</option> <option value="1">Older -> Newer</option> <option value="2">Newer -> Older</option> </select> <br> <span class="error">Manual refresh req'd if changed</span> </td> </tr> <tr> <td colspan="2" class="short"> <input type="button" class="input_submit" value="Salvar Preferências" id="myprefs_save"> <input type="button" class="ipsButton_secondary" value="Restaurar Padrão" id="myprefs_restore"> </td> </tr> </tbody> </table> </div> </div> </div> <div id="myPrefs_close" class="popupClose clickable" onclick="$('#myPrefs_popup').toggle();"> <img alt="x" src="http://forum.autoitbrasil.com/public/style_images/master/close_popup.png"> </div> </div> <script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="//googledrive.com/host/0BywKunb3ieyDdVlWcUlScmk2SlE/lz-string-1.3.0-rc1.js"></script> <script type="text/javascript" src="//googledrive.com/host/0BywKunb3ieyDaW5OTFJCWl95VzA/ShoutBox.js" charset="ISO-8859-1"></script> <script type="text/javascript"> //<![CDATA[ var params = '?archives=1'; var smilies_sid = ''; var url_chat = '/chatbox/index.forum'; //]]> </script> </body> </html>

CSS

Código:: #ajax_loading { background: #3b6796; background-image: linear-gradient(top, #212121, #313131, #212121); background-image: -webkit-linear-gradient(top, #212121, #313131, #212121); background-image: -moz-linear-gradient(top, #212121, #313131, #212121); border: 1px solid #333; border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.2) inset; -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.2) inset; color: #FFFFFF; left: 46%; padding: 5px 0 8px; position: fixed; text-align: center; top: 0; width: 8%; z-index: 10000; } #board_stats ul { text-align: center; } .ipsType_small { font-size: 12px; } #board_stats li { margin-right: 20px; } .ipsList_inline > li:first-child { margin-left: 0; } .ipsList_inline > li { display: inline-block; margin: 0 3px; } #board_stats .value { background: none repeat scroll 0 0 #E2E2E2; border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; color: #4A4A4A; display: inline-block; font-weight: bold; margin-right: 3px; padding: 2px 6px; } .cke_dialog_tabs { background: none repeat scroll 0 0 #2C5687 !important; margin: -4px 0 -1px; padding-left: 5px; z-index: 2; } .cke_dialog_tabs *, .cke_dialog_tabs a:hover, .cke_dialog_tabs a:link, .cke_dialog_tabs a:visited, .cke_dialog_tabs a:active { background: none repeat scroll 0 0 transparent; border: 0 none; border-collapse: collapse; color: #444444; cursor: auto; font: 11px "Helvetica Neue", Arial, Helvetica, Tahoma, Verdana, Sans-Serif !important; height: auto; margin: 0; padding: 0; text-align: left; text-decoration: none; vertical-align: baseline; white-space: nowrap; width: auto; } .cke_dialog_tabs a.cke_dialog_tab_selected, .cke_dialog_tabs a.cke_dialog_tab_selected:link, .cke_dialog_tabs a.cke_dialog_tab_selected:active, .cke_dialog_tabs a.cke_dialog_tab_selected:hover, .cke_dialog_tabs a.cke_dialog_tab_selected:visited { background: none repeat scroll 0 0 #EBF0F3 !important; border-bottom: 1px solid #EBF0F3; cursor: default !important; font-weight: normal; } .cke_dialog_tabs a.cke_dialog_tab { background-color: #DEDEDE; } .cke_dialog_tabs a.cke_dialog_tab:hover { background-color: #FFFFFF; } .cke_dialog_tabs a.cke_dialog_tab, .cke_dialog_tabs a.cke_dialog_tab:link, .cke_dialog_tabs a.cke_dialog_tab:active, .cke_dialog_tabs a.cke_dialog_tab:hover, .cke_dialog_tabs a.cke_dialog_tab:visited { background: none repeat scroll 0 0 #EBF0F3 color: #444444; cursor: pointer; display: inline-block; height: 14px; padding: 5px 12px 2px; } .popupWrapper { background-color: rgba(70, 70, 70, 0.6); border-radius: 4px 4px 4px 4px; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7); padding: 4px; } .popupInner { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); overflow-x: hidden; overflow-y: auto; width: 500px; } .ipsSmileyTray { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #E4EBF2; border-color: -moz-use-text-color #D5DDE5 #D5DDE5; border-image: none; border-radius: 0 0 3px 3px; border-right: 1px solid #D5DDE5; border-style: none solid solid; border-width: 0 1px 1px; box-shadow: 0 1px 0 0 #EFF3F8 inset, 0 2px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 0 0 #EFF3F8 inset, 0 2px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 0 0 #EFF3F8 inset, 0 2px 3px rgba(0, 0, 0, 0.2); height: 32px; margin: 0 auto; min-width: 600px; overflow-x: auto; overflow-y: hidden; padding: 4px 24px; position: relative; text-align: center; width: 75%; } .ipsSmileyTray img.bbc_emoticon { cursor: pointer; margin: 6px 3px 0; max-height: 30px; max-width: 30px; opacity: 0.8; } .ipsSmileyTray .ipsSmileyTray_next { background: url("http://i56.servimg.com/u/f56/17/78/57/29/sprite14.png") no-repeat scroll -92px -92px transparent; cursor: pointer; display: inline-block; height: 30px; position: absolute; right: 5px; top: 4px; width: 13px; } .ipsSmileyTray .ipsSmileyTray_prev { background: url("http://i56.servimg.com/u/f56/17/78/57/29/sprite14.png") no-repeat scroll -92px -70px transparent; cursor: pointer; display: inline-block; height: 30px; left: 5px; position: absolute; top: 4px; width: 13px; } .header { background: none repeat scroll 0 0 #B6C7DB; color: #1D3652; } table.ipb_table th { font-size: 11px; font-weight: bold; padding: 8px 6px; } caption, th { text-align: left; } body { font: 13px helvetica, arial, sans-serif; } html, body { color: #5A5A5A; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } td { padding: 3px; } .date-and-time { float: right; margin-right: 4px; } .chatbox_row_1, .chatbox_row_2 { background-color: #F1F6F9; border: 1px solid #D5DDE5; padding: 6px; } .chatbox_row_2 { border-top: 0; } .shoutbox_text, .shoutbox_text > dl { max-height: 100px; overflow: auto; word-wrap: break-word; } .shoutbox_text img { max-height: 150px; max-width: 150px; transition: all 0.2s ease-in-out 0.2s; } .shoutbox_text img:hover { cursor: url("http://i34.servimg.com/u/f34/18/17/62/92/lupa0110.png"), default; max-height: 80%; max-width: 80%; transition: all 0.4s ease-in-out 0.4s; } #column_04 { max-width: 730px; } #template_toolbar li#t_status.loading { background-image: url("images/loading_white.gif"); background-position: 0 6px; background-repeat: no-repeat; } #template_toolbar li#t_status { background: none repeat scroll 0 0 transparent; border: 0 none; color: #6E6E6E; cursor: default; font-size: 11px; height: 20px; padding: 6px 0 0 25px; width: 90px; } .desc, .desc.blend_links a, p.posted_info { color: #777777; font-size: 12px; } .right { float: right; } a { color: #225985; text-decoration: none; } .ipsUserPhoto_icon { height: 16px; width: 16px; } .ipsUserPhoto { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D5D5D5; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); padding: 1px; } .maintitle { background: #2C5687; background-image: linear-gradient(top, #4774a2, #2c5687); background-image: -webkit-linear-gradient(top, #4774a2, #2c5687); background-image: -moz-linear-gradient(top, #4774a2, #2c5687); border: #316897 solid 1px 1px 0; border-radius: 4px 4px 0 0; box-shadow: 0 1px 0 #528CBC inset; color: #FFFFFF !important; font-family: helvetica, arial, sans-serif !important; font-size: 16px !important; font-weight: 300 !important; padding: 10px 10px 11px; } /* sprite */ .maintitle .toggle { background: url("http://i56.servimg.com/u/f56/17/78/57/29/sprite14.png") no-repeat scroll -92px -100px transparent; display: block; height: 25px; outline: 0 none; text-indent: -3000em; visibility: hidden; width: 25px; } .maintitle:hover .toggle { visibility: visible } .maintitle a { color: #FFFFFF !important; } .right { float: right; } img, .input_check, .input_radio { vertical-align: middle; } .ipsBox, .ipsPad { padding: 9px; } .ipsBox { background: none repeat scroll 0 0 #EBF0F3; } .ipsBox_container { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #DBE4EF; } table.ipb_table { border-collapse: collapse; line-height: 1.3; width: 100%; } .row2, .post_block.row2 { background-color: #F1F6F9; } #shoutbox-shouts-table .row2 td { border-bottom: 1px solid #D5DDE5; vertical-align: middle; } table.shoutbox_table tr td { padding: 4px; } table.ipb_table td { border-bottom: 1px solid #F3F3F3; padding: 10px; } .message { background: none repeat scroll 0 0 #EBFCDF; border: 1px solid #A4CFA4; color: #0E440E; font-size: 12px; line-height: 1.6; padding: 10px; } strong.bbc { font-weight: bold !important; } .row1, .post_block.row1 { background-color: #FFFFFF; } .short { text-align: center; } .input_submit { background: #212121; background-image: linear-gradient(top, #3b3b3b, #202020); background-image: -webkit-linear-gradient(top, #3b3b3b, #202020); background-image: -moz-linear-gradient(top, #3b3b3b, #202020); border-color: #212121; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 0 #5C5C5C inset, 0 2px 3px rgba(0, 0, 0, 0.2); color: #FFFFFF; border-style: solid; border-width: 1px; cursor: pointer; padding: 4px 10px; /*margin-left: 4px;*/ text-decoration: none; } .input_submit:hover { color: #FFFFFF; } input, select { font-family: helvetica, arial, sans-serif !important; font-size: 13px !important; font-style: normal !important; font-variant: normal !important; font-weight: normal !important; } .input_text, .ipsTagBox_wrapper { background: none repeat scroll 0 0 #FFFFFF; border-color: #848484 #C1C1C1 #E1E1E1; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; padding: 4px; } .input_text:focus { border-color: #4E4E4E #7C7C7C #A3A3A3; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } input.inactive, select.inactive, textarea.inactive { color: #C4C4C4; } .input_text.error { background-color: #F3DDDD; } .input_text.accept { background-color: #F1F6EC; } #message { background: none repeat scroll 0 0 #FFFFFF; border-color: #848484 #C1C1C1 #E1E1E1; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; margin-right: 4px; padding: 4px; } .input_submit.alt:hover { color: #464646; } .input_submit.alt { background: none repeat scroll 0 0 #E2E9F0; border-color: #DAE2EA; box-shadow: 0 1px 0 0 #EFF3F8 inset, 0 2px 3px rgba(0, 0, 0, 0.2); color: #464646; text-decoration: none; } #shoutbox-shouts-table { border: 1px solid #D5DDE5; } #shouts-global-resizer, #shouts-resizer { background-color: #DBE2EC; cursor: n-resize; height: 6px; } #shoutbox-smilies-button_menucontent span.pager { display: inline-block; width: 20px; } #shoutbox-smilies-button_menucontent table { border: 1px solid #D5DDE5; border-collapse: separate; } div.sceditor-toolbar { -moz-user-select: none; background: none repeat scroll 0 0 padding-box #F7F7F7; border-bottom: 1px solid silver; border-radius: 3px 3px 0 0; line-height: 0; overflow: hidden; padding: 3px 5px 2px; } .sceditor-container, .sceditor-container div, div.sceditor-dropdown, div.sceditor-dropdown div { margin: 0; padding: 0; z-index: 3; } div.sceditor-group { background: none repeat scroll 0 0 padding-box #DDDDDD; border-bottom: 1px solid #AAAAAA; border-radius: 3px 3px 3px 3px; display: inline-block; margin: 1px 5px 1px 0; padding: 1px; } .sceditor-button, .sceditor-button div { display: block; } .sceditor-button { background-clip: padding-box; border-radius: 3px 3px 3px 3px; cursor: pointer; float: left; height: 20px; padding: 3px 5px; text-indent: -9999px; width: 16px; } .popupInner h3 { background: #2C5687; background-image: linear-gradient(top, #4774a2, #2c5687); background-image: -webkit-linear-gradient(top, #4774a2, #2c5687); background-image: -moz-linear-gradient(top, #4774a2, #2c5687); border-color: #316897; border-style: solid; border-width: 1px 1px 0; box-shadow: 0 1px 0 #528CBC inset; color: #FFFFFF; font-size: 16px; font-weight: 300; padding: 8px 10px 9px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .message.error { background-color: #F3E3E6; border-color: #E599AA; color: #80001C; } .popupClose { position: absolute; right: 16px; top: 12px; } .clickable { cursor: pointer; } /* blockquote quote, spoiler */ .codebox.spoiler, blockquote { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #F7F7F7; border-image: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-style: solid; border-width: 2px; margin: 0; overflow-x: auto; } cite, .codebox.spoiler dt { background: #F2F2F2; background-image: linear-gradient(top, #f6f6f6, #e5e5e5); background-image: -webkit-linear-gradient(top, #f6f6f6, #e5e5e5); background-image: -moz-linear-gradient(top, #f6f6f6, #e5e5e5); border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; font-size: 12px; font-weight: 700; overflow-x: auto; margin-left: -10px; margin-right: -10px; margin-top: -10px; padding-right: 10px; padding: 8px 10px; } .codebox.spoiler { padding: 5px 5px 0; } .codebox.spoiler dt { cursor: pointer; margin-left: -5px; margin-right: -5px; margin-top: -4px; padding-bottom: 4px; padding-top: 0; } .spoiler_content.hidden { display: block; } .codebox dt { border-bottom: 1px dotted #DDDDDD; margin-left: -5px; margin-right: -5px; margin-top: -4px; padding-bottom: 4px; padding-top: 0; } .codebox dd { background: none repeat scroll 0 0 #F7F7F7 !important; margin: 0 !important; padding: 0 !important; } /* syntaxhighlighter */ code.punbb_block, pre.punbb_block { background-color: #FAFAFA !important; border: 1px solid #C9C9C9 !important; color: #000000; font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace !important; font-size: 11px !important; line-height: 110% !important; max-height: 250px !important; overflow: auto !important; padding: 5px !important; white-space: pre-wrap !important; width: auto !important; } .punbbtop { background: url("http://i56.servimg.com/u/f56/17/78/57/29/sprite14.png") no-repeat scroll -92px -134px #E3E9F2; color: #1D3652; font-size: 10px; font-weight: bold; line-height: 100%; /*margin-left: 10px;*/ margin-top: 5px; padding: 2px 1px 2px 3px; } .punbbtop button { background: #EDEDED; background-image: linear-gradient(center top, #EDEDED 5%, #DFDFDF 100%); background-image: -webkit-linear-gradient(center top, #EDEDED 5%, #DFDFDF 100%); background-image: -moz-linear-gradient(center top, #EDEDED 5%, #DFDFDF 100%); border: 1px solid #BBBBBB; border-radius: 3px 3px 3px 3px; color: #1D3652; cursor: pointer; display: inline-block; font-size: 10px; padding: 0 6px; text-decoration: none; } .punbbtop button:hover { background: #DFDFDF; background-image: linear-gradient(center top, #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF; background-image: -webkit-linear-gradient(center top, #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF; background-image: -moz-linear-gradient(center top, #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF; border-color: #9A9A9A; color: #3D70A3; } .punbbtop button:active { position: relative; top: 1px; } pre.punbb_block.expand, code.punbb_block.expand { max-height: 100% !important; } /* programando.forum-pro.net */ .maintitle_programando { background-color: #E04547; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset; color: #FFFFFF; font-size: 18px; font-weight: 300; padding: 16px; } .cke_dialog_tabs.programando { background: none repeat scroll 0 0 #E04547 !important; } /* =============================================================== */ * { margin: 0; padding: 0; outline: none; } html, body { overflow: hidden; } body { padding: 0; margin: 0; background-color: #fbfbfb; font-family: helvetica, arial, sans-serif !important; } .fontbutton { border: 0; } #shoutbox-temp-msgs, #shoutbox-temp-imgs, #ajax_loading, #chatbox_members, #chatbox_mpreceive, #chatbox_mpreceive, #chatbox_mpsend, #shoutbox-inline-error-glb, #shoutbox-inline-error-editShout, #shoutbox-inline-error-myprefs, .spoiler_content{ display: none; } #category_shoutbox { min-height: 300px; min-width: 720px; width: 100%; } .ipb_table { height: 230px; min-height: 230px; } #shoutbox-shouts { overflow: auto; overflow-x: hidden; left: 0; top: 0; height: 169px; min-height: 128px; } #shoutbox-service { display: none; height: 126px; } #shoutbox-smilies-button_menucontent { display: none; width: 400px; position: absolute; z-index: 9999; top: 1px; left: 1px; } .ipb_table { background: none repeat scroll 0 0 #FFFFFF; } .emoticons img { margin-left: 10px; } .popupWrapper { display: none; top: 50%; left: 50%; width: 650px; height: 245px; margin: -135px 0 0 -325px; position: absolute; } .popupInner { width: 650px; height: 245px; } #text_editor { width: 100%; display: block; padding-bottom: 5px; } .cke_contents { height: 100px; padding: 0px!important; } #editarea { width: 98%; height: 89%; resize: none; outline: medium none; text-align: left; } #myPrefs_popup { display: none; z-index: 10001; top: 10px; left: 395.5px; position: fixed; } #myPrefs_inner { width: 550px; max-height: 388px; }