Code Cabeçário

2 participantes

Ir para baixo

Tópico resolvido Code Cabeçário

Mensagem por Thalia Grace 08.05.14 0:53

  • Descrição:
Olá, gostaria de saber o código do modelo deste fórum (da parte onde diz as fotos dos administradores e etc). 
http://anaklusmosrpg.forumeiros.com/
Não se preocupem, não será plagiado, será totalmente alterado. 

  • Informações:
Fórum:http://anaklusmosrpg.forumeiros.com/Versão:PHPBB2
Tipo:Pedido de códigoTags:Cabeçário



Última edição por Thalia Grace em 08.05.14 1:43, editado 1 vez(es)
Thalia Grace
Thalia Grace
***

Membro desde : 03/05/2014
Mensagens : 124
Pontos : 199

http://www.embreve.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Code Cabeçário

Mensagem por Kyo Panda 08.05.14 1:14

Olá,

Em Visualização › Página inicial › Geral › Mensagem na página inicial cole isso:

Código:
<div id="blackestnight">
   
   <div id="h2">Anaklusmos
   </div>
   
   <div class="bn1 bnboton bnselec">
      
      <div id="bnbot">
          Info
      </div>
      
   </div>
   
   <div class="bn2 bnboton">
      
      <div id="bnbot">
          Awards
      </div>
      
   </div>
   
   <div class="bn3 bnboton">
      
      <div id="bnbot">
          Créditos
      </div>
      
   </div>
   
   <div class="bnc1 bncaja">
      
      <div id="bnd">
         
         <div style="margin-bottom: 5px;" id="bnder">
             <strong><span style="color: rgb(244, 164, 96);">O Anaklusmos RPG</span></strong> foi fundado por Gabriel Alencar e Jean Carlos no ano de 2012, dia 17 de Março, com o intuito de proporcionar a diversão para os membros. Esperamos que você goste do fórum que fizemos para melhor recebe-lo. Atenciosamente, A Administração. xx
         </div>
         
         <div class="bns1 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color: rgb(244, 164, 96);">Afrodite</span>
            </center><strong></strong><span>Deusa do amor e da Beleza</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u829">Perfil</a>
         </div>
         
         <div class="bns2 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color: rgb(244, 164, 96);">Perséfone</span>
            </center><strong></strong><span>Deusa da Primavera e Rainha do Submundo</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u113">Perfil</a>
         </div>
         
         <div class="bns3 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color:rgb(244, 164, 96);">Thanatos</span>
            </center><strong></strong><span>Deus da Morte</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u36">Perfil</a>
         </div>
         
         <div class="bns4 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color:rgb(244, 164, 96);">Hades</span>
            </center><strong></strong><span>Rei do Submundo</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u2">Perfil</a>
         </div>
         
         <div class="bns5 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color: rgb(244, 164, 96);">Deméter</span>
            </center><strong></strong><span>Deusa da Agricultura</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u1320">Perfil</a>
         </div>
         
         <div class="bns6 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color: rgb(244, 164, 96);">Hermes</span>
            </center><strong></strong><span>Mensageiro e Deus dos Ladrões</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u290">Perfil</a>
         </div>
         
         <div class="bns7 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color: rgb(244, 164, 96);">Héstia</span>
            </center><strong></strong><span>Deusa do Lar</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u936">Perfil</a>
         </div>
         
         <div class="bns8 bnstaff">
             <strong></strong>
            <center style="">
                <span style="color: rgb(244, 164, 96);">Zeus</span>
            </center><strong></strong><span>Rei do Olimpo</span><a href="http://anaklusmosrpg.forumeiros.com/privmsg?mode=post">MP</a><a href="http://anaklusmosrpg.forumeiros.com/u599">Perfil</a>
         </div>
         
         <div id="h3">
             Tablón Blackest Night por <a target="_blank" href="http://bit.ly/12UhEcD">Pyrite Wolf</a>
         </div>
         
      </div>
      
      <div style="margin-bottom: 5px;" id="bnizq">
         
         <div id="h1">
             Ambientação
         </div><span style="text-decoration: line-through;"><span style="color: rgb(244, 164, 96);">▧</span></span> No ano de 2020, EUA ainda ocupava o lugar de protagonista no cenário socio-econômico mundial.Sendo assim, o Olimpo não havia deixado o Empire State Building, em New York City e, seguindo a morada dos deuses, o Acampamento Meio-Sangue não deixara sua antiga localização, a Baía de Long Island. Contudo, um abalo no Olimpo está prestes a ocorrer... 3 deuses cairão, e o futuro deste mundo estará mais uma vez nas mãos dos semideuses.
      </div>
      
      <div id="bnizq">
         
         <div id="h1">
             Links Úteis
         </div>
          ---
      </div>
      
      <div class="bncaja bnescondida bnc2">
         
         <div style="background: url('http://data3.whicdn.com/images/19118690/tumblr_lgbehbCBKw1qh39juo1_500_large.jpg');" id="bnaward">
             <strong><span style="color: rgb(244, 164, 96);">Auset Hoffshield</span></strong><span>Personagem mais drogada. -q</span><a href="http://anaklusmosrpg.forumeiros.com/u1577">Ver Perfil</a>
         </div>
         
         <div style="background: url('http://static.tumblr.com/xvucbwa/aLSm8tqti/twitter_background_jennette.jpg');" id="bnaward">
             <strong><span style="color: rgb(244, 164, 96);">Melody S. Young</span></strong><span>Personagem mais amável.</span><a href="http://anaklusmosrpg.forumeiros.com/u400">Ver Perfil</a>
         </div>
         
         <div style="background: url('http://likeavogue.files.wordpress.com/2012/03/tumblr_m1cmnoeajj1qf4iono1_500.jpg');" id="bnaward">
             <strong><span style="color: rgb(244, 164, 96);">Charlotte DePas</span></strong><span>Personagem com os melhores posts.</span><a href="http://anaklusmosrpg.forumeiros.com/u732">Ver Perfil</a>
         </div>
         
         <div style="background: url('http://i.imgur.com/7DCPNhN.png');" id="bnaward">
             <strong><span style="color: rgb(244, 164, 96);">Nathalia Castro</span></strong><span>Personagem mais sexy</span><a href="http://anaklusmosrpg.forumeiros.com/u517">Ver Perfil</a>
         </div>
         
         <div style="background: url('http://www.mattholyoak.co.uk/assets/image_gallery/1/SC_1003.jpg');" id="bnaward">
             <strong><span style="color: rgb(244, 164, 96);">Finnick C. Odair</span></strong><span>Personagem mais forte</span><a href="http://anaklusmosrpg.forumeiros.com/u65">Ver Perfil</a>
         </div>
         
      </div>
      
      <div class="bncaja bnc3 bnescondida">
         
         <div id="h1">
             Créditos
         </div>
          A trama e ambientação do fórum foram realizadas por Perséfone, Afrodite e Hades. O design foi realizado por A. Dahmer, T. Souza e J. Carlos. Respeite o nosso trabalho, não copie. Seja original. <br /><br />
         <div id="h1">
             Agradecimentos & Inspiração
         </div>
          Agradeço a Equipe do Anaklusmos RPG por proporcionar aos nossos membros tamanha diversão e entretenimento. Agradeço também ao nosso querido Tio Rick, de onde tiramos inspiração para criar o rpg. Carinhosamente, Perséfone. xx
      </div>
      
   </div><script src="http://protorol.com/pyriportal/blackestnight.js"></script>
</div>

E adicione ao CSS:

Código:
/*-------------CODES, CODES DEL TABLON, SERSIS CODES DEL TABLON (?)-------------*/
/*cajas*/
#blackestnight {position: relative;text-align: justify;margin: auto; width: 75%;border-radius: 10px; padding: 10px 15px 10px 50px;font: 12px ubuntu condensed;line-height:13px;right: -4%;}
#bnder {border-radius: 10px; padding:5px 10px;font-size:11px; max-height: 125px; overflow: auto;line-height:12px;}
#bnd {width: 170px;float:right;position: relative;}
#bnizq {height: 105px; overflow: auto;margin-right: 175px; border-radius: 10px; padding:5px 10px;}
.bncaja {overflow: hidden;}
.bnc2 {text-align: center;border-radius: 10px; padding: 10px;}
.bnc3 {border-radius: 10px; padding: 10px;height:215px;overflow-y: auto;overflow-x: hidden;}
.bnescondida {width: 0px;padding: 0px;height: 0px;}
/*Awards*/
#bnaward {display: inline-block;height: 225px;padding: 5px 0px; width: 18%; margin: 0 0.5%;border-radius: 10px;background-position: center !important;background-size: 250% !important;}
#bnaward b,#bnaward span,#bnaward a {opacity: 0;}
#bnaward:hover b,#bnaward:hover span,#bnaward:hover a {opacity: 0.9;}
#bnaward b {display: block; text-align: center;border-radius: 5px; margin:100px 5px 2px 5px;}
#bnaward span {padding: 2px;display: block; border-radius: 5px; text-align: center;margin:0px 5px 2px 5px;height: 50px; overflow: auto;}
#bnaward a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: block; text-align: center;border-radius: 5px;margin:0px 5px;}
#bnaward a:hover {background: #333;}
/*Subtitulos*/
#blackestnight #h1 {margin:0px -5px 2px -5px;padding: 0px 0px 2px 10px; border-bottom: 1px dotted;font-size: 15px; text-transform: uppercase;letter-spacing:2px;}
#blackestnight #h2 {font-size: 20px; text-transform: uppercase;letter-spacing:2px;width: 225px; text-align: center; -webkit-transform: rotate(90deg);transform: rotate(90deg);-moz-transform: rotate(90deg);position: absolute; top: 120px; right: -125px;}
#blackestnight #h3 {font-size: 9px; text-transform: uppercase;text-align: center; color: #888;position: absolute; top: 225px;width: 170px;}
/*Staff*/
.bnstaff {overflow: hidden;width: 40px; height: 40px; background-size: 200%;background-position: center;border-radius: 5px;margin-left: 5px;display: inline-block;position: absolute;top:140px;}
.bns4 {left: 125px;} .bns2 {left: 38px;} .bns3 {left: 82px;}
.bns1 {margin: 0px;}
.bns5 {top: 183px;margin: 0px;} .bns6 {top: 183px;left: 38px;} .bns7 {top: 183px;left: 82px;} .bns8 {top: 183px;left: 125px;}
.bnstaff b, .bnstaff span, .bnstaff a {opacity: 0;}
.bnstaff:hover b, .bnstaff:hover span, .bnstaff:hover a {opacity: 0.8;}
.bnstaff:hover {left:0px;top: 140px;z-index: 999; width: 150px; height: 63px;padding:10px; background-size: 100%;margin: 0px;}
.bnstaff b {display: block; text-align: center;border-radius: 5px; margin-bottom: 2px;}
.bnstaff span {display: block;border-radius: 5px; text-align: center;margin-bottom: 2px;}
.bnstaff a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: inline-block; text-align: center;border-radius: 5px;width: 48%; margin: 0px 1%; }
.bnstaff a:hover {background: #333;}
/*botones*/
.bnboton {filter: gray;-webkit-filter: grayscale(100%);width: 65px; height: 65px; border: 5px solid #222;background-size: 200%; position: absolute; left: -30px;border-radius:10px;cursor: pointer;}
.bnboton:hover {width: 130px;left:-95px;background-size: 100%;filter: none;-webkit-filter: grayscale(0%);}
#bnbot {margin: 20px auto; opacity: 0; width: 65px; text-transform: uppercase;letter-spacing: 2px; font-size: 10px;border-radius: 5px;text-align: center;padding: 5px 0px; }
.bnboton:hover #bnbot {opacity: 0.9;}
.bn2 {top: 90px;}
.bn3 {top: 170px;}
.bnselec {filter: none;-webkit-filter: grayscale(0%);}

/*generales*/
#blackestnight * {-webkit-backface-visibility: hidden;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;}
#blackestnight ::-webkit-scrollbar { width: 8px; height: 8px; } #blackestnight ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {display: none;} #blackestnight ::-webkit-scrollbar-track-piece {background: transparent;} #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {border-radius: 10px;}
@font-face {
  font-family: 'Ubuntu Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu Condensed'), local('UbuntuCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/ubuntucondensed/v3/DBCt-NXN57MTAFjitYxdrFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
}

Abraços. Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Code Cabeçário

Mensagem por Thalia Grace 08.05.14 1:31

Posso perguntar como conseguiu o code CSS?
Thalia Grace
Thalia Grace
***

Membro desde : 03/05/2014
Mensagens : 124
Pontos : 199

http://www.embreve.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Code Cabeçário

Mensagem por Kyo Panda 08.05.14 1:34

No Chrome: F12 › Sources › Sources. Lá é listado os arquivos CSS e Javascript usados na página. A partir daí foi analisar o HTML para sacar a parte correta do mesmo. Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Code Cabeçário

Mensagem por Thalia Grace 08.05.14 1:43

Ah ta, obrigada.
Thalia Grace
Thalia Grace
***

Membro desde : 03/05/2014
Mensagens : 124
Pontos : 199

http://www.embreve.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos