Gerir barra lateral no fórum

[yokoq]

• Descrição:

Então, eu gostaria de saber como eu faço uma barra lateral como a desse fórum: http://hoganime.forumeiros.com/ 
Exatamente assim, que fique fixa, andando junto com a tela e que permaneça em todas as páginas.
De preferência, gostaria que ela ficasse do lado direito.

---

• Informações:

Fórum:	http://firststeps-yoko.forumeiros.com/	Versão:	PHPBB3
Tipo:	Pedido de código	Tags:	Gerir,barra,lateral,fórum

---

[Cream]

Olá,

Vá na sua gestão de widgets, e crie um novo sem utilizar o table type e coloque o código que você deseja para que seja um menu lateral. Logo após, certifique-se que este widget criado é o único ativo, não pode haver mais nenhum ativo! Assim sendo, vá na sua folha de estilo CSS e adicione:

Código:

#left {
    background-position: center bottom;
    background-repeat: no-repeat;
    border: 3px solid #273F74;
    float: left;
    left: 0px;
    height: 97%;
    line-height: 135%;
    overflow-y: auto;
    position: fixed;
    top: 0px;
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: -10px;
    width: 310px;
    background-color: #E6E6E6;
}

Compreende?
Até mais!

[yokoq]

Obrigada por tentar ajudar, Cream, mas eu gostaria do código dessa barra em especial.

[Alex Habilidade]

Olá,

Adicione no widget do lado direito o código abaixo:

Código:


<div class="inner">
    <span class="corners-top"><span></span></span>
   <div class="h3">
       Hogwarts 3.0
   </div>
   
   <center>
       <a href="/"><img src="http://i.imgur.com/9qX6yWH.png" /></a>
   </center><br />
   <div align="center">
      
      <ul id="tab-strip">
         
         <li id="tab1" class="clickable highlight">
             INFO
         </li>
         
         <li id="tab2" class="clickable">
             NEWS
         </li>
         
         <li id="tab3" class="clickable">
             STAFF
         </li>
         
         <li id="tab4" class="clickable">
             CRÉDITOS
         </li>
         
      </ul>
      
   </div>
   
   <center>
      
      <div id="tab1-content" class="tab-content">
         
         <div style="padding: 16px; background: white; font-family: trebuchet ms; font-size: 11px; color: black; line-height: 115%; width: 220px; border-bottom: 3px solid #090f1c; border-top: 3px solid #090f1c; text-align: justify;">
            
            <div style="height: 110px; overflow: auto;">
                Seja bem vindo a Hogwarts Anime, um RPG baseado em Harry Potter que se passa mais de 100 anos depois da morte de Voldemort. Os photoplayers usados são apenas de anime, hq e de jogos, os avatares têm o tamanho de 200x400 e as assinaturas tem limite máximo de 500x300. <br /> <br /> Agosto de 2123. <br /> Dezessete anos após a guerra contra a Inquisição Moderna. Ex-alunos e docentes de Hogwarts estão se preparando para uma reunião dentro do castelo, enquanto os novos alunos da escola fazem seus preparativos para irem a Hogwarts.
            </div>
            
         </div>
         
      </div>
      
   </center>
   
   <center>
      
      <div id="tab2-content" class="tab-content">
         
         <div style="font-size: 10px;">
            
            <div style="padding: 16px; background: white; font-family: trebuchet ms; font-size: 11px; color: black; line-height: 115%; width: 220px; border-bottom: 3px solid #090f1c; border-top: 3px solid #090f1c; text-align: justify;">
               
               <div style="height: 110px; overflow: auto;">
                   24/11▼<a href="http://www.hogwartsanime.com/t2536-those-sweet-memories"><img src="http://i.imgur.com/PKPtP1Q.png" /></a><br />23/11▼<img src="http://i.imgur.com/baHwcgK.png" />Fim da Trama "Guerra da Inquisição" ▼<a href="http://www.hogwartsanime.com/t2456-diarios-de-guerra"><img src="http://i.imgur.com/iruuFYf.png" /></a>
               </div>
               
            </div>
            
         </div>
         
      </div>
      
   </center>
   
   <center>
      
      <div id="tab3-content" class="tab-content">
         
         <center>
             <a href="http://www.hogwartsanime.com/57" class="opacity"><img src="http://i.imgur.com/1IsbOIB.png" title="Relíquias da Morte" /></a> <a class="opacity" href="http://www.hogwartsanime.com/u1345"><img src="http://i.imgur.com/q7ifP4l.png" title="Cálice de Fogo" /></a><a href="http://www.hogwartsanime.com/u484" class="opacity"><img src="http://i.imgur.com/wpoL1Hq.png" title="Prisioneiro de Azkaban" /></a> <a href="http://www.hogwartsanime.com/u483" class="opacity"><img src="http://i.imgur.com/tSPuXyO.png" title="Ordem da Fênix" /></a> <a class="opacity" href="http://www.hogwartsanime.com/u144"><img src="http://i.imgur.com/mzaR4TV.png" title="Enigma do Príncipe" /></a> <a href="http://www.hogwartsanime.com/u145" class="opacity"><img src="http://i.imgur.com/sTUKpib.png" title="Pedra Filosofal" /></a>
         </center>
         
      </div>
      
   </center>
   
   <div id="tab4-content" class="tab-content">
      
      <center>
         
         <div style="padding: 16px; background: white; font-family: trebuchet ms; font-size: 11px; color: black; line-height: 115%; width: 220px; border-bottom: 3px solid #090f1c; border-top: 3px solid #090f1c; text-align: justify;">
            
            <div style="height: 110px; overflow: auto;">
                HOGWARTS ANIME é um fórum baseado na obra de J.K. Rowling, mesclando outras mitologias modificadas pela Administração do RPG. Todo o conteúdo do fórum é propriedade de seus Administradores, Moderadores e seus respectivos usuários. É um fórum de temática potteriana, e nasceu com o objetivo de trazer diversão aos seus usuários, visando sempre o respeito entre os membros. A skin foi totalmente produzida por Eduardo Brito (DZ) e Fernando Wecker (Lee), com auxílio do widget por Kismet (RPG-Directory.com), com design de Lorena Schveper (Juls), com imagens de ZeroChan, Pottermore e DeviantArt e pertencem aos seus autores. Entretanto, se proibe cópia de imagens e códigos sem a autorização prévia de seus criadores. FÓRUM PROTEGIDO PELA LICENÇA CREATIVE COMMONS 3.0! <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/br/deed.pt_BR"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/br/88x31.png" /></a>.
            </div>
            
         </div>
         
      </center>
      
   </div><span class="corners-bottom"><span></span></span>
</div>


E adicione esse CSS na sua folha de Estilo:

Código:


#content-container div#right {
background-position: center bottom;
background-repeat: no-repeat;
border: 3px solid #273f74;
float: right;
right: 0px;
height: 97%;
line-height: 135%;
overflow-y: auto;
position: fixed;
top: 0px;
margin-left: 5px;
margin-top: 10px;
margin-bottom: -10px;
width: 310px;
background-color: #E6E6E6;
}
span.corners-top {
background-image: url(http://2img.net/i/fa/empty.gif);
background-position: 0 0;
margin: 0 -5px;
}
.module .h3 {
visibility: hidden;
display: none;
}
.introduction .h3, .module .h3, .postbody .h3 {
margin-top: 8px;
}
#tab-strip {
list-style: none outside none;
margin: 0px;
padding: 0px;
display: block;
background-color: ;
}
.highlight {
background-color: #1b2c51;
}
.clickable {
display: inline;
border-bottom: 0px;
margin-right: 10px;
cursor: pointer;
background-color: #1b2c51;
font-family: wire one;
font-size: 25px;
color: #fff;
text-transform: upercase;
padding: 5px;
}
#tab1-content {
display: block;
}
.tab-content {
margin-top: 15px;
display: none;
}
#tab-strip {
list-style: none outside none;
margin: 0px;
padding: 0px;
display: block;
background-color: ;
}


[yokoq]

Fiz isso e não apareceu nada, Alex.