Suporte phpBB

URL do Fórum: http://musasdoesporte.com

Pessoal, preciso de uma mãozinha aqui. É o seguinte, estou desenvolvendo um fórum e fazendo algumas alterações no template Subsilver2 e gostaria de colocar uma barra no index (acho que é isso), logo abaixo do cabeçalho. Em localhost eu alterei o stylesheet.css e colocquei a barra, mas apareceram dois problemas como podem ver nas figuras anexas.

Olha o que eu fiz:

1) No stylesheet alterei a linha genmed e obtive o efeito próximo ao que eu pretendia, mas isso descacetou o template todo como podem ver na segunda figura com as setas azuis. Como posso fazer para consertar isso?

2) Alem disso eu queria que a barra ocupasse toda a página seguindo o cabeçalho (primeira figura com setas pretas).

E ai, alguém pode me dar uma ajuda?

Desde já, muito obrigado.

Está aparecendo apenas uma imagem.

Quanto a largura da barra, tente deixa-la com a largura em 100% width: 100%
Se com 100% ela ultrapassar o limite do fórum, diminua 10% ou mais de necessário.

Poste as outras imagens para vermos como está.

Qualquer dúvida basta postar.

Não sei se entendi quanto a adição das barras mas veja se é isso:
Vou utilizar o quadro do "Quem está on line" para exemplificar.
1- Abra o arquivo index-body.html e ache as linhas: Adicione após o </tr> final, as linhas: Veja se isso lhe resolve.

Abraço.

gssilva escreveu:Está aparecendo apenas uma imagem.

Quanto a largura da barra, tente deixa-la com a largura em 100% width: 100%
Se com 100% ela ultrapassar o limite do fórum, diminua 10% ou mais de necessário.

Poste as outras imagens para vermos como está.

Qualquer dúvida basta postar.

Olá, gssilva.

Eu já havia tentado acrescentar o width: 100% e não funcionou. Obrigado por tentar me ajudar.

robra escreveu:Não sei se entendi quanto a adição das barras mas veja se é isso:
Vou utilizar o quadro do "Quem está on line" para exemplificar.
1- Abra o arquivo index-body.html e ache as linhas:

Código: Selecionar todos

<tr>
		<td class="cat" colspan="2"><!-- IF U_VIEWONLINE --><h4><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h4><!-- ELSE --><h4>{L_WHO_IS_ONLINE}</h4><!-- ENDIF --></td>
	</tr>

Adicione após o </tr> final, as linhas:

Código: Selecionar todos

<tr>
		<td class="cat" colspan="2"><h4>SEU TEXTO VAI AQUI</h4></td>
	</tr>

Veja se isso lhe resolve.

Abraço.

Fala, robra.

Também não é isso. Deixa eu explicar direito com as figuras abaixo:

Eu altero a linha genmed no arquivo stylesheet.css acrescentando o seguinte comando: background-image: url('./images/cellpic1.gif'); e acontece isso:
Mas alem de acrescentar a barra embaixo do cabeçalho isso acrescentas "barrinhas" na parte de baixo e descaceta tudo, olha só:
Acho que agora deu pra entender, né?

Obrigado aos dois.

Ok.
Volte a linha genmed original.
No stylesheet.css ache as linhas...... e substitua por: Depois, atualize o Temas do estilo na aba ESTILOS do ACP.

Abraço.

Postei um vídeo explicando como fazer esta alteração, desde a identificação da barra de menu até a modificação no stylesheet.css (Melhor visualização em Tela Cheia):
[youtube]http://www.youtube.com/watch?v=0a5isJNhM-w[/youtube]
Com isso, você e os demais usuários poderão utilizar a ferramenta "inspecionar elemento" do Google Chrome para identificar os elementos que desejam modificar e interagir em tempo real com as modificações na própria página HTML, para depois realizar as definitivas alterações nos respectivos arquivos.

Abraço.

robra escreveu:Ok.
Volte a linha genmed original.
No stylesheet.css ache as linhas...

Código: Selecionar todos

#menubar {
    margin: 0 25px;
} 

... e substitua por:

Código: Selecionar todos

#menubar {
margin: 0px;
padding: 0px 25px;
background-image: url('./images/cellpic1.gif');
} 

Depois, atualize o Temas do estilo na aba ESTILOS do ACP.

Abraço.

Valeu, robra!

Matou a charada. Funcionou perfeitamente.

Brigadão mesmo.

robra escreveu:Postei um vídeo explicando como fazer esta alteração, desde a identificação da barra de menu até a modificação no stylesheet.css (Melhor visualização em Tela Cheia):
[youtube]http://www.youtube.com/watch?v=MQyzjl4G7DM[/youtube].
Com isso, você e os demais usuários poderão utilizar a ferramenta "inspecionar elemento" do Google Chrome para identificar os elementos que desejam modificar e interagir em tempo real com as modificações na própria página HTML, para depois realizar as definitivas alterações nos respectivos arquivos.

Abraço.

Agora tu deu show, parceiro.

Eu uso o plugin Firebug do Firefox para inspecionar os elementos, o funcionamento é bem parecido com esse do Chrome.

Tenho certeza que essa dica será muito útil pra gelera que gosta de personalizar os templates.

Mais uma vez, muito obrigado, robra.

Só mais uma coisinha, galera.

Eu queria inserir um ícone antes do nome da categoria (ou fórum, sei lá), mais ou menos assim, ó:
Como eu posso fazer isso?

EdLopes escreveu:Só mais uma coisinha, galera.

Eu queria inserir um ícone antes do nome da categoria (ou fórum, sei lá), mais ou menos assim, ó:

imgfrm.png

Como eu posso fazer isso?

Como este é um assunto diferente do abordado neste tópico, marque este como resolvido e abra um novo tópico com o título "Incluir ícone antes da Categoria".

Abraço.