Colocar uma barra no index - Subsilver2

[EdLopes]

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.

[gssilva]

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.

[robra]

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.

[EdLopes]

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.

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:

Genmed-5.png

Mas alem de acrescentar a barra embaixo do cabeçalho isso acrescentas "barrinhas" na parte de baixo e descaceta tudo, olha só:

Genmed-6.png

Acho que agora deu pra entender, né?

Obrigado aos dois.

[robra]

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.

[robra]

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.

[EdLopes]

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.

[EdLopes]

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.

[EdLopes]

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?

[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, ó:

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.