Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Gerir barra lateral no fórum
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Gerir barra lateral no fórum
- 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 |
Última edição por yokoq em 18.07.14 18:58, editado 1 vez(es)
yokoq- *
- Membro desde : 22/09/2012
Mensagens : 32
Pontos : 58
Re: Gerir barra lateral no fórum
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:
Compreende?
Até mais!
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!
Re: Gerir barra lateral no fórum
Obrigada por tentar ajudar, Cream, mas eu gostaria do código dessa barra em especial.
yokoq- *
- Membro desde : 22/09/2012
Mensagens : 32
Pontos : 58
Re: Gerir barra lateral no fórum
Olá,
Adicione no widget do lado direito o código abaixo:
E adicione esse CSS na sua folha de Estilo:
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: ;
}
Re: Gerir barra lateral no fórum
Fiz isso e não apareceu nada, Alex.
Última edição por yokoq em 18.07.14 18:58, editado 1 vez(es) (Motivo da edição : Apareceu sim, eu que noobei aqui nos widgets. Obrigada.)
yokoq- *
- Membro desde : 22/09/2012
Mensagens : 32
Pontos : 58
Tópicos semelhantes
» Barra lateral com as redes sociais do fórum
» Gerir barra de pesquisa no fórum
» Barra lateral
» Mudar cor da barra lateral das categorias
» Barra lateral de widgets
» Gerir barra de pesquisa no fórum
» Barra lateral
» Mudar cor da barra lateral das categorias
» Barra lateral de widgets
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos