Recuo Página Inicial

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox, Google Chrome
Membros afetados : Somente comigo
Endereço do fórum : http://avada-kedavrarpg.forumeiros.com/forum

Descrição do problema

Eu não sei se esse é o lugar certo para isso, mas... rs
Eu gostaria de colocar no meu rpg uma skin que ficasse assim: https://2img.net/r/ihimg/a/img538/8341/8M62Ta.png

com essa parte mais recuada para que eu colocasse informações nela.
Não quero aquele menu rápido que aparece na imagem, apenas uma skin com borda e essa parte mais recuada.

Saudações autor!

Nós não criamos skins/temas, no entanto, queira procurar uma no seguinte link: Hitskin.com

Atenciosamente,
Hakuouki

Eu não sei se seria bem uma criação de skin kkk
na verdade preciso de um código que deixasse aquela parte recuada

Olá!

Pode-nos informar o link do fórum que viu o tal efeito?

Até mais,
Reset.

http://rpgveritaserum.forumeiros.com/forum

gostaria que fosse recuado assim, para poder colocar informações, mas sem o menu rápido dentro do recuo.

Olá!

Eu ainda não pude compreender o que o senhor realmente deseja. Pode ser um pouco mais especifico?

Cordialmente.

Desculpe.
Eu gostaria que tive esse recuo da página, igual tem no link que eu mandei.
Se perceber tem um espaço no canto esquerdo, que é maior e quem tem um código de menu rápido dentro, e um widget.
Gostaria de colocar esse recuo na página do meu fórum, mas não quero colocar o menu rápido dentro desse recuo, apenas algumas informações que vou colocar do meu próprio fórum, assim como alguns widget
Não sei se consegui me fazer entender melhor..

Olá!
Antes de criar o widget, se estiver dúvidas de como criar-lo, aonde bota-lo, etc.

https://ajuda.forumeiros.com/t1297-

Crie um widget, com o seguinte código:

Código:

<div id="left"><div class="botones boton1"> H O M E  </div><div class="botones boton2"> A COPA  </div><div class="botones boton3"> C R E D I T O S </div><div style="height:4px"></div><div id="caja1">
          
   <div style="background-image: url(http://i.imgur.com/7n0EJEJ.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white;">
          Menu Rapido   
   </div><br>   
   <div style="width: 220px; height: 200px; margin: 0 auto;">
             
      <table>
                
         
            <tbody><tr>
                      
               <td>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/t65-tutorial-para-os-iniciantes">Tutorial Para os Iniciantes</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/t961-chapeu-seletor">Chapéu Seletor</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/f7-habilidades">Habilidades e Patrono</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/f5-cargos">Cargos</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/f233-cannons">Cannons</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/f192-votacoes">Votações</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/f6-seres-magicos?tid=dbb70363735116539a6df41627b67918">Seres Mágicos</a>   
                  </div>
                         
               </td>
                      
               <td>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/t183-historia-das-familias">História das Famílias</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/t206-matriculas-escolares">Matrículas Escolares</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/t2362p45-lista-de-avatares">Registro de Avatares</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/t73-mudanca-de-nome">Mudança de Nome</a>   
                  </div>
                         
                  <div id="novedades">
                         <a href="http://rpgveritaserum.forumeiros.com/f214-sistema-de-colecao-de-figurinhas">Sistema de Figurinhas</a>   
                  </div>
                         
               </td>
                      
            </tr>
                   
         
      </tbody></table><br>   
      <center>
             <strong>.:Clima On:.</strong><br>Inverno - Tempo nublado e com pouco sol, mais frio à noite e com vento.<br>Máxima 7ºC | Mínima 2ºC
      </center>
             
   </div>
</div><div style="height:4px"></div><div id="caja2">
      
   <div style="background-image: url(http://i.imgur.com/nyPnId9.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white;">
        Copa das Casas 
   </div><br> 
   <div style="width: 220px; height: 200px; margin: 0 auto;">
         
      <center>
           Passe o mouse abaixo para ver a pontuação de cada casa.<br><br> 
         <table>
               
            
               <tbody><tr>
                     
                  <td>
                        
                     <div id="code1">
                          <img src="http://i.imgur.com/CTxebs8.png"> 
                        <div id="code2">
                             <img src="http://images.wikia.com/harrypotter/images/6/65/Tumblr_m5qadb59Vv1r0h51m.gif">085 
                        </div>
                           
                     </div>
                       <br> 
                     <div id="code1">
                          <img src="http://i.imgur.com/JshNL5r.png"> 
                        <div id="code2">
                             <img src="http://24.media.tumblr.com/dbd5f8c71bfc94d4fd81c59d89ef9674/tumblr_mlvmt97SmK1r93iy8o1_250.gif">125 
                        </div>
                           
                     </div>
                        
                  </td>
                     
                  <td>
                        
                     <div id="code1">
                          <img src="http://i.imgur.com/6gVn4Oo.png"> 
                        <div id="code2">
                             <img src="http://25.media.tumblr.com/tumblr_mdqzac0dNO1r3r73mo1_500.gif">220 
                        </div>
                           
                     </div>
                       <br> 
                     <div id="code1">
                          <img src="http://i.imgur.com/6Fs5bmW.png"> 
                        <div id="code2">
                             <img src="http://media.tumblr.com/tumblr_lzcvl8mEZ01r3h4ef.gif">020
                        </div>
                           
                     </div>
                        
                  </td>
                     
               </tr>
                  
            
         </tbody></table>
            
      </center>
         
   </div>
</div><div style="height:4px"></div><center>
                              
   <table>
                                 
      
         <tbody><tr>
                                       
            <td>
                                          
               <div style="margin:auto;text-align:center;width:100%">
                                <strong>.:Data On:.</strong><br>2022 - Maio<br> <script language="JavaScript" type="text/javascript">

//Altera o dia ON, baseado no dia OFF

dON = new Date();
switch (dON.getDate()) {
case 1:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 2:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 3:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 4:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 5:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 6:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 7:
document.write ("**Lua Cheia**<br>Dia ON 19 20 21");
break;
case 8:
document.write ("*Lua Minguante*<br>Dia ON 22 23 24");
break;
case 9:
document.write ("**Lua Minguante**<br>Dia ON 25 26 27");
break;
case 10:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
case 11:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 12:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 13:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 14:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 15:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 16:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 17:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 18:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 19:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 20:
document.write ("*Lua Nova*<br>Dia ON 28 29 30");
break;
case 21:
document.write ("**Lua Nova**<br>Dia ON 1,2,3");
break;
case 22:
document.write ("*Lua Crescente*<br>Dia ON 4 5 6");
break;
case 23:
document.write ("**Lua Crescente**<br>Dia ON 7 8 9");
break;
case 24:
document.write ("***Lua Crescente***<br>Dia ON 10 11 12");
break;
case 25:
document.write ("*Lua Cheia*<br>Dia ON 13 14 15");
break;
case 26:
document.write ("**Lua Cheia**<br>Dia ON 16,17,18");
break;
case 27:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 28:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 29:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 30:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
default:
// se não for nenhum dos cases acima, é 31 então:
document.write ("*Lua Nova*<br>Dia ON 29 30 31");
}
</script>*Lua Crescente*<br>Dia ON 4 5 6 <br>Off - M T N<br>M=Manhã T=Tarde N=Noite             
               </div>
                                          
            </td>
                                       
         </tr>
                                    
      
   </tbody></table>
</center><div style="height:4px"></div><div id="caja3"><div style="background-image: url(http://i.imgur.com/bGMoI7c.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white; magin-top: 50px;">Créditos</div>
<br><div style="width: 220px; max-height: 200px; margin: 0 auto; overflow: auto; text-align: center; letter-spacing: 1px; font-size: 10px; font-family: Crushed; color:  #576764;">Esta Skin foi criada por <a href="http://www.oursourcecode.net/u4289">Fanatica_77</a> para Source Code, portanto, não é permitido copiar ou distribuir seus códigos. Seja original e diga não à cópia.
<br><br>
Todos os itens que compõem este fórum foi elaborados pela administração do mesmo para uso exclusivo, não é permitida qualquer cópia seja parcial ou completa de imagens, textos e afins.<br><br>
<center><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"></a><br>O trabalho <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">de Veritaserum RPG</span> foi licenciado com uma Licença <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Creative Commons - Atribuição-NãoComercial-SemDerivados 3.0 Não Adaptada</a>.<br>Podem estar disponíveis autorizações adicionais ao âmbito desta licença em <a xmlns:cc="http://creativecommons.org/ns#" href="http://rpgveritaserum.forumeiros.com/" rel="cc:morePermissions">http://rpgveritaserum.forumeiros.com/</a>.</center></div>
</div><div style="height:4px"></div><center>
                              
   <table>
                                 
      
         <tbody><tr>
                                       
            <td>
                                          
               <div style="margin:auto;text-align:center;width:100%">
                                <strong>.:Data On:.</strong><br>2022 - Maio<br> <script language="JavaScript" type="text/javascript">

//Altera o dia ON, baseado no dia OFF

dON = new Date();
switch (dON.getDate()) {
case 1:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 2:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 3:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 4:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 5:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 6:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 7:
document.write ("**Lua Cheia**<br>Dia ON 19 20 21");
break;
case 8:
document.write ("*Lua Minguante*<br>Dia ON 22 23 24");
break;
case 9:
document.write ("**Lua Minguante**<br>Dia ON 25 26 27");
break;
case 10:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
case 11:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 12:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 13:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 14:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 15:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 16:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 17:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 18:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 19:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 20:
document.write ("*Lua Nova*<br>Dia ON 28 29 30");
break;
case 21:
document.write ("**Lua Nova**<br>Dia ON 1,2,3");
break;
case 22:
document.write ("*Lua Crescente*<br>Dia ON 4 5 6");
break;
case 23:
document.write ("**Lua Crescente**<br>Dia ON 7 8 9");
break;
case 24:
document.write ("***Lua Crescente***<br>Dia ON 10 11 12");
break;
case 25:
document.write ("*Lua Cheia*<br>Dia ON 13 14 15");
break;
case 26:
document.write ("**Lua Cheia**<br>Dia ON 16,17,18");
break;
case 27:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 28:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 29:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 30:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
default:
// se não for nenhum dos cases acima, é 31 então:
document.write ("*Lua Nova*<br>Dia ON 29 30 31");
}
</script>*Lua Crescente*<br>Dia ON 4 5 6 <br>Off - M T N<br>M=Manhã T=Tarde N=Noite             
               </div>
                                          
            </td>
                                       
         </tr>
                                    
      
   </tbody></table>
</center><div style="height:4px"></div><div class="4176" style="overflow:visible"><span class="corners-top"><span></span></span><div class="inner"><div align="center"><script src="http://partner.googleadservices.com/gampad/google_service.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
    GS_googleAddAdSenseService("ca-pub-7445224030588342");    GS_googleEnableAllServices();//]]>
</script><script src="http://partner.googleadservices.com/gampad/google_ads.js"></script><script type="text/javascript">//<![CDATA[
    GA_googleAddAttr("Ad_type", "text_image");    GA_googleAddAttr("User_type", "First_visit");GA_googleAddAttr("Page_type", "Other_page");GA_googleAddAttr("Site_type", "Gold");//]]>
</script><script type="text/javascript">//<![CDATA[
    google_ad_slot="1545197587";    google_ad_channel="";        google_color_border="0d0d0d";    google_color_link="006666";    google_color_bg="0d0d0d";    google_color_text="b5b5b5";    google_color_url="0d0d0d";    google_ui_features="rc:0";    google_font="Arial";    google_font_size="Medium";    google_alternate_ad_url="";    GA_googleAddAdSenseSlotAttr("180x150", "google_ad_slot", google_ad_slot);    GA_googleAddAdSenseSlotAttr("180x150", "google_ad_channel", google_ad_channel);        GA_googleAddAdSenseSlotAttr("180x150", "google_color_border", google_color_border);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_link", google_color_link);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_bg", google_color_bg);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_text", google_color_text);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_url", google_color_url);    GA_googleAddAdSenseSlotAttr("180x150", "google_ui_features", google_ui_features);    GA_googleAddAdSenseSlotAttr("180x150", "google_font", google_font);    GA_googleAddAdSenseSlotAttr("180x150", "google_font_size", google_font_size);    GA_googleAddAdSenseSlotAttr("180x150", "google_alternate_ad_url", google_alternate_ad_url);//]]>
</script><script type="text/javascript">//<![CDATA[
    GA_googleUseIframeRendering();//]]>
</script><script type="text/javascript">//<![CDATA[
GA_googleFillSlotWithSize("ca-pub-7445224030588342", "180x150", 180, 150);//]]>
</script><div id="google_ads_div_180x150"><ins style="position:relative;width:180px;height:150px;border:none;display:inline-table;"><ins style="position:relative;width:180px;height:150px;border:none;display:block;"><iframe id="google_ads_iframe_180x150" name="google_ads_iframe_180x150" width="180" height="150" vspace="0" hspace="0" allowtransparency="true" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:0px;left:0;position:absolute;top:0;" src="http://pubads.g.doubleclick.net/gampad/ads?correlator=170811179663360&amp;output=html&amp;impl=ifr&amp;client=ca-pub-7445224030588342&amp;slotname=180x150&amp;page_slots=180x150&amp;cust_params=Ad_type%3Dtext_image%26User_type%3DFirst_visit%26Page_type%3DOther_page%26Site_type%3DGold&amp;cookie=ID%3D9807311da3331307%3AT%3D1411235510%3AS%3DALNI_MZ9DMH7gYvX9Z-AnEr1W9VJC51Cxg&amp;url=http%3A%2F%2Frpgveritaserum.forumeiros.com%2Flogin&amp;ref=http%3A%2F%2Fajuda.forumeiros.com%2Ft96409-criacao-de-skin&amp;lmt=1416697819&amp;dt=1416690611073&amp;cc=84&amp;color_border=0d0d0d&amp;color_link=006666&amp;color_bg=0d0d0d&amp;color_text=b5b5b5&amp;color_url=0d0d0d&amp;ui=rc%3A0&amp;fs=Medium&amp;biw=1366&amp;bih=667&amp;adk=1454084918&amp;adx=40&amp;ady=577&amp;ifi=1&amp;oid=3&amp;ea=0&amp;u_tz=-120&amp;u_his=1&amp;u_java=true&amp;u_h=768&amp;u_w=1366&amp;u_ah=728&amp;u_aw=1366&amp;u_cd=24&amp;u_nplug=14&amp;u_nmime=58&amp;flash=14.0.0&amp;gads=v2&amp;ga_vid=913821237.1411241609&amp;ga_sid=1416690611&amp;ga_hid=1837785288"></iframe></ins></ins></div></div></div><span class="corners-bottom"><span></span></span></div><div style="height:4px"></div><div id="caja3"><div style="background-image: url(http://i.imgur.com/bGMoI7c.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white; magin-top: 50px;">Créditos</div>
<br><div style="width: 220px; max-height: 200px; margin: 0 auto; overflow: auto; text-align: center; letter-spacing: 1px; font-size: 10px; font-family: Crushed; color:  #576764;">Esta Skin foi criada por <a href="http://www.oursourcecode.net/u4289">Fanatica_77</a> para Source Code, portanto, não é permitido copiar ou distribuir seus códigos. Seja original e diga não à cópia.
<br><br>
Todos os itens que compõem este fórum foi elaborados pela administração do mesmo para uso exclusivo, não é permitida qualquer cópia seja parcial ou completa de imagens, textos e afins.<br><br>
<center><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"></a><br>O trabalho <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">de Veritaserum RPG</span> foi licenciado com uma Licença <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Creative Commons - Atribuição-NãoComercial-SemDerivados 3.0 Não Adaptada</a>.<br>Podem estar disponíveis autorizações adicionais ao âmbito desta licença em <a xmlns:cc="http://creativecommons.org/ns#" href="http://rpgveritaserum.forumeiros.com/" rel="cc:morePermissions">http://rpgveritaserum.forumeiros.com/</a>.</center></div>
</div><div style="height:4px"></div></div>

Logo após adicione este css:

Código:

#content-container div#left {
background-color: #212121;
width: 230px;
}
#content-container div#left {
float: left;
margin-right: 3px;
overflow: hidden;
width: 189px;
}

Até mais,
Reset.

Infelizmente não funcionou. O canto esquerdo não ficou recuado
Ficou um widget de Menu Rápido "dentro" da página e com bugue

Saudações!

Antes de começarmos, retire todos os códigos fornecidos neste tópico para que não haja conflitos com os novos códigos que lhe fornecerei logo abaixo!

Depois de retirar os códigos, aceda à: Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS

No início da mesma, adicione o seguinte código:

Código:

#wrap {
margin-right: 40px !important;
}
.botones:hover {
-moz-transition: all .8s linear 0;
-webkit-transition: all .8s linear 0;
background-color: #3F6363;
}
.botones {
background-color: #066;
display: inline-block;
font-family: Crushed;
font-size: 12px;
margin: 15px;
padding: 4px;
text-align: center;
}
#content-container div#left {
background-color: #212121;
width: 230px;
}
#left {
height: 97%;
left: 15px;
position: fixed;
top: 10px;
}
#caja2, #caja3 {
display: none;
}
a:hover {
color: #70cccc;
text-decoration: none;
}
a:visited {
color: #069c9c;
text-decoration: none;
}
a:link {
color: #066;
text-decoration: none;
}
#novedades {
background-color: #18161A;
display: block;
font-family: Crushed;
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 1px;
margin-left: 0;
padding: 1px;
text-align: center;
width: 103px;
}

Agora aceda à: Painel de Controle >> Módulos >> Portal & Widgets >> Configuração do Portal - Estrutura e/ou Gestão dos widgets do fórum >> Criar um widget personalizado

Formulário do Widget escreveu:Nome do widget >> Opcional;
Utilizar um table type >> Marque não;
Título do widget >> Opcional;
Fonte do widget >> Código abaixo.

Código:

Código:

<div id="left"><div class="botones boton1"> H O M E  </div><div class="botones boton2"> A COPA  </div><div class="botones boton3"> C R E D I T O S </div><div style="height:4px"></div><div id="caja1">
           
   <div style="background-image: url(http://i.imgur.com/7n0EJEJ.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white;">
           Menu Rapido    
   </div><br>    
   <div style="width: 220px; height: 200px; margin: 0 auto;">
              
      <table>
                 
         
            <tbody><tr>
                       
               <td>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/t65-tutorial-para-os-iniciantes">Tutorial Para os Iniciantes</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/t961-chapeu-seletor">Chapéu Seletor</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/f7-habilidades">Habilidades e Patrono</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/f5-cargos">Cargos</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/f233-cannons">Cannons</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/f192-votacoes">Votações</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/f6-seres-magicos?tid=dbb70363735116539a6df41627b67918">Seres Mágicos</a>    
                  </div>
                          
               </td>
                       
               <td>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/t183-historia-das-familias">História das Famílias</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/t206-matriculas-escolares">Matrículas Escolares</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/t2362p45-lista-de-avatares">Registro de Avatares</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/t73-mudanca-de-nome">Mudança de Nome</a>    
                  </div>
                          
                  <div id="novedades">
                          <a href="http://rpgveritaserum.forumeiros.com/f214-sistema-de-colecao-de-figurinhas">Sistema de Figurinhas</a>    
                  </div>
                          
               </td>
                       
            </tr>
                    
         
      </tbody></table><br>    
      <center>
              <strong>.:Clima On:.</strong><br>Inverno - Tempo nublado e com pouco sol, mais frio à noite e com vento.<br>Máxima 7ºC | Mínima 2ºC
      </center>
              
   </div>
</div><div style="height:4px"></div><div id="caja2">
       
   <div style="background-image: url(http://i.imgur.com/nyPnId9.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white;">
         Copa das Casas  
   </div><br>  
   <div style="width: 220px; height: 200px; margin: 0 auto;">
          
      <center>
            Passe o mouse abaixo para ver a pontuação de cada casa.<br><br>  
         <table>
                
            
               <tbody><tr>
                      
                  <td>
                         
                     <div id="code1">
                           <img src="http://i.imgur.com/CTxebs8.png">  
                        <div id="code2">
                              <img src="http://images.wikia.com/harrypotter/images/6/65/Tumblr_m5qadb59Vv1r0h51m.gif">085  
                        </div>
                            
                     </div>
                        <br>  
                     <div id="code1">
                           <img src="http://i.imgur.com/JshNL5r.png">  
                        <div id="code2">
                              <img src="http://24.media.tumblr.com/dbd5f8c71bfc94d4fd81c59d89ef9674/tumblr_mlvmt97SmK1r93iy8o1_250.gif">125  
                        </div>
                            
                     </div>
                         
                  </td>
                      
                  <td>
                         
                     <div id="code1">
                           <img src="http://i.imgur.com/6gVn4Oo.png">  
                        <div id="code2">
                              <img src="http://25.media.tumblr.com/tumblr_mdqzac0dNO1r3r73mo1_500.gif">220  
                        </div>
                            
                     </div>
                        <br>  
                     <div id="code1">
                           <img src="http://i.imgur.com/6Fs5bmW.png">  
                        <div id="code2">
                              <img src="http://media.tumblr.com/tumblr_lzcvl8mEZ01r3h4ef.gif">020
                        </div>
                            
                     </div>
                         
                  </td>
                      
               </tr>
                   
            
         </tbody></table>
             
      </center>
          
   </div>
</div><div style="height:4px"></div><center>
                               
   <table>
                                  
      
         <tbody><tr>
                                        
            <td>
                                           
               <div style="margin:auto;text-align:center;width:100%">
                                 <strong>.:Data On:.</strong><br>2022 - Maio<br> <script language="JavaScript" type="text/javascript">

//Altera o dia ON, baseado no dia OFF

dON = new Date();
switch (dON.getDate()) {
case 1:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 2:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 3:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 4:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 5:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 6:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 7:
document.write ("**Lua Cheia**<br>Dia ON 19 20 21");
break;
case 8:
document.write ("*Lua Minguante*<br>Dia ON 22 23 24");
break;
case 9:
document.write ("**Lua Minguante**<br>Dia ON 25 26 27");
break;
case 10:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
case 11:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 12:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 13:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 14:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 15:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 16:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 17:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 18:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 19:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 20:
document.write ("*Lua Nova*<br>Dia ON 28 29 30");
break;
case 21:
document.write ("**Lua Nova**<br>Dia ON 1,2,3");
break;
case 22:
document.write ("*Lua Crescente*<br>Dia ON 4 5 6");
break;
case 23:
document.write ("**Lua Crescente**<br>Dia ON 7 8 9");
break;
case 24:
document.write ("***Lua Crescente***<br>Dia ON 10 11 12");
break;
case 25:
document.write ("*Lua Cheia*<br>Dia ON 13 14 15");
break;
case 26:
document.write ("**Lua Cheia**<br>Dia ON 16,17,18");
break;
case 27:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 28:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 29:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 30:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
default:
// se não for nenhum dos cases acima, é 31 então:
document.write ("*Lua Nova*<br>Dia ON 29 30 31");
}
</script>**Lua Crescente**<br>Dia ON 7 8 9 <br>Off - M T N<br>M=Manhã T=Tarde N=Noite              
               </div>
                                           
            </td>
                                        
         </tr>
                                     
      
   </tbody></table>
</center><div style="height:4px"></div><div id="caja3"><div style="background-image: url(http://i.imgur.com/bGMoI7c.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white; magin-top: 50px;">Créditos</div>
<br><div style="width: 220px; max-height: 200px; margin: 0 auto; overflow: auto; text-align: center; letter-spacing: 1px; font-size: 10px; font-family: Crushed; color:  #576764;">Esta Skin foi criada por <a href="http://www.oursourcecode.net/u4289">Fanatica_77</a> para Source Code, portanto, não é permitido copiar ou distribuir seus códigos. Seja original e diga não à cópia.
<br><br>
Todos os itens que compõem este fórum foi elaborados pela administração do mesmo para uso exclusivo, não é permitida qualquer cópia seja parcial ou completa de imagens, textos e afins.<br><br>
<center><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"></a><br>O trabalho <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">de Veritaserum RPG</span> foi licenciado com uma Licença <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Creative Commons - Atribuição-NãoComercial-SemDerivados 3.0 Não Adaptada</a>.<br>Podem estar disponíveis autorizações adicionais ao âmbito desta licença em <a xmlns:cc="http://creativecommons.org/ns#" href="http://rpgveritaserum.forumeiros.com/" rel="cc:morePermissions">http://rpgveritaserum.forumeiros.com/</a>.</center></div>
</div><div style="height:4px"></div><center>
                               
   <table>
                                  
      
         <tbody><tr>
                                        
            <td>
                                           
               <div style="margin:auto;text-align:center;width:100%">
                                 <strong>.:Data On:.</strong><br>2022 - Maio<br> <script language="JavaScript" type="text/javascript">

//Altera o dia ON, baseado no dia OFF

dON = new Date();
switch (dON.getDate()) {
case 1:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 2:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 3:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 4:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 5:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 6:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 7:
document.write ("**Lua Cheia**<br>Dia ON 19 20 21");
break;
case 8:
document.write ("*Lua Minguante*<br>Dia ON 22 23 24");
break;
case 9:
document.write ("**Lua Minguante**<br>Dia ON 25 26 27");
break;
case 10:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
case 11:
document.write ("*Lua Nova*<br>Dia ON 1 2 3");
break;
case 12:
document.write ("**Lua Nova**<br>Dia ON 4 5 6");
break;
case 13:
document.write ("*Lua Crescente*<br>Dia ON 7 8 9");
break;
case 14:
document.write ("**Lua Crescente**<br>Dia ON 10 11 12");
break;
case 15:
document.write ("***Lua Crescente***<br>Dia ON 13 14 15");
break;
case 16:
document.write ("*Lua Cheia*<br>Dia ON 16 17 18");
break;
case 17:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 18:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 19:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 20:
document.write ("*Lua Nova*<br>Dia ON 28 29 30");
break;
case 21:
document.write ("**Lua Nova**<br>Dia ON 1,2,3");
break;
case 22:
document.write ("*Lua Crescente*<br>Dia ON 4 5 6");
break;
case 23:
document.write ("**Lua Crescente**<br>Dia ON 7 8 9");
break;
case 24:
document.write ("***Lua Crescente***<br>Dia ON 10 11 12");
break;
case 25:
document.write ("*Lua Cheia*<br>Dia ON 13 14 15");
break;
case 26:
document.write ("**Lua Cheia**<br>Dia ON 16,17,18");
break;
case 27:
document.write ("*Lua Minguante*<br>Dia ON 19 20 21");
break;
case 28:
document.write ("**Lua Minguante**<br>Dia ON 22 23 24");
break;
case 29:
document.write ("***Lua Minguante***<br>Dia ON 25 26 27");
break;
case 30:
document.write ("***Lua Minguante***<br>Dia ON 28 29 30");
break;
default:
// se não for nenhum dos cases acima, é 31 então:
document.write ("*Lua Nova*<br>Dia ON 29 30 31");
}
</script>**Lua Crescente**<br>Dia ON 7 8 9 <br>Off - M T N<br>M=Manhã T=Tarde N=Noite              
               </div>
                                           
            </td>
                                        
         </tr>
                                     
      
   </tbody></table>
</center><div style="height:4px"></div><div class="c62e771" style="overflow:visible"><span class="corners-top"><span></span></span><div class="inner"><div align="center"><script src="http://partner.googleadservices.com/gampad/google_service.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[
    GS_googleAddAdSenseService("ca-pub-7445224030588342");    GS_googleEnableAllServices();//]]>
</script><script type="text/javascript">//<![CDATA[
    GA_googleAddAttr("Ad_type", "text_image");    GA_googleAddAttr("User_type", "First_visit");GA_googleAddAttr("Page_type", "Other_page");GA_googleAddAttr("Site_type", "Gold");//]]>
</script><script type="text/javascript">//<![CDATA[
    google_ad_slot="1545197587";    google_ad_channel="";        google_color_border="0d0d0d";    google_color_link="006666";    google_color_bg="0d0d0d";    google_color_text="b5b5b5";    google_color_url="0d0d0d";    google_ui_features="rc:10";    google_font="Arial";    google_font_size="Large";    google_alternate_ad_url="";    GA_googleAddAdSenseSlotAttr("180x150", "google_ad_slot", google_ad_slot);    GA_googleAddAdSenseSlotAttr("180x150", "google_ad_channel", google_ad_channel);        GA_googleAddAdSenseSlotAttr("180x150", "google_color_border", google_color_border);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_link", google_color_link);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_bg", google_color_bg);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_text", google_color_text);    GA_googleAddAdSenseSlotAttr("180x150", "google_color_url", google_color_url);    GA_googleAddAdSenseSlotAttr("180x150", "google_ui_features", google_ui_features);    GA_googleAddAdSenseSlotAttr("180x150", "google_font", google_font);    GA_googleAddAdSenseSlotAttr("180x150", "google_font_size", google_font_size);    GA_googleAddAdSenseSlotAttr("180x150", "google_alternate_ad_url", google_alternate_ad_url);//]]>
</script><script type="text/javascript">//<![CDATA[
    GA_googleUseIframeRendering();//]]>
</script><script type="text/javascript">//<![CDATA[
GA_googleFillSlotWithSize("ca-pub-7445224030588342", "180x150", 180, 150);//]]>
</script></div></div><span class="corners-bottom"><span></span></span></div><div style="height:4px"></div><div id="caja3"><div style="background-image: url(http://i.imgur.com/bGMoI7c.jpg); margin: 0 auto; opacity: 0.8; width: 220px; height: 70px; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 25px; text-transform: capitalize; font-family: Crushed; text-shadow: 2px 2px 2px #000000; color: white; magin-top: 50px;">Créditos</div>
<br><div style="width: 220px; max-height: 200px; margin: 0 auto; overflow: auto; text-align: center; letter-spacing: 1px; font-size: 10px; font-family: Crushed; color:  #576764;">Esta Skin foi criada por <a href="http://www.oursourcecode.net/u4289">Fanatica_77</a> para Source Code, portanto, não é permitido copiar ou distribuir seus códigos. Seja original e diga não à cópia.
<br><br>
Todos os itens que compõem este fórum foi elaborados pela administração do mesmo para uso exclusivo, não é permitida qualquer cópia seja parcial ou completa de imagens, textos e afins.<br><br>
<center><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"></a><br>O trabalho <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">de Veritaserum RPG</span> foi licenciado com uma Licença <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt">Creative Commons - Atribuição-NãoComercial-SemDerivados 3.0 Não Adaptada</a>.<br>Podem estar disponíveis autorizações adicionais ao âmbito desta licença em <a xmlns:cc="http://creativecommons.org/ns#" href="http://rpgveritaserum.forumeiros.com/" rel="cc:morePermissions">http://rpgveritaserum.forumeiros.com/</a>.</center></div>
</div><div style="height:4px"></div></div>

Não se esqueça de salvar após implementa-los!
Vale ressaltar que, depois da criação de um widget, é necessário aceder à gestão dos widgets - aba 'Widgets pessoais' e arrasta-lo para o local desejado.

Atenciosamente,
Hakuouki

O código que me passou Hakuoki é igual ao Menu Rápido do site que mostrei, mas eu não quero o menu rápido.
Eu gostaria que ficasse a página recuada e com o código que me passou ele não fica, o Menu Rápido fica em cima da página normal.
quero que a página do meu rpg fique assim:
http://hogwartsisalive.forumeiros.com/
http://hogwartsisalive.forumeiros.com/forum

entende? Com as bordas recuadas, para que eu coloque informações dentro desse recuo. Por alguma razão esses códigos que passou não deram.
Se for preciso que mande a folha CSS que está no meu rpg eu mando..

Olá,
Bom, se eu puder ajudar favor me mande a folha de CSS por MP e ajeitarei para ficar como quer. ^^

CSS enviado.

Algum moderador poderia ajudar com o código para apenas recuar a página tbm?

ajuda alguém?

.............

Saudações!

Vá em: Painel de controle   Visualização   Cores "Aba" Folha CSS.

Adicione no conteúdo:

Código:

div#container {
position: relative;
left: 10pc;
background: transparent;
}ul.topiclist.forums {
background: transparent;
}

Salve e Visualize seu fórum.
Melhores cumprimentos,
Sennior.