Lista de secções no cabeçalho

[MisterMatos]

Qual é sua questão:
Como ponho isso que está na imagem

https://i.servimg.com/u/f61/16/11/42/81/ajuda111.png

Que medidas você tomou para corrigir o problema:
0

Apresente-nos imagens do problema (se necessário):

[Callie]

Olá MisterMatos,

Leia o seguinte tutorial:

[Tutorial] Adicionar lista de seções na mensagem da home-page

Até mais.

[MisterMatos]

Ainda não consegui pôr

[Cream]

Olá,

Qual é sua dúvida/problema refere ao tutorial?

Abraços,
Lucky.

[MisterMatos]

Não estou conseguindo pôr os topicos em cima alguem faz suporte adicional?

[Cream]

Olá,

Você leu o tutorial, seguiu passo a passo, especifique melhor.

Abraços,
Lucky.

[MisterMatos]

eu li mas não consegui fazer nada alguém faz suporte adicional.

[Callie]

Olá MisterMatos,

Já tentou pôr os códigos à sua maneira?
De que forma deseja colocar isto?

Até mais.

[MisterMatos]

Queria pôr como aqui no fórum alguns tópicos e as suas definições em baixo.

[Callie]

Olá de novo,

Poderei tentar fazer o código mas terá que me dizer que imagens e links pretende colocar em cada divisória. E mesmo assim esta situação não poderá ser repetida, nós disponibilizamos os tutoriais e os membros deverão apresentar dúvidas com soluções já tentadas, de códigos que fizeram e/ou alteraram.

Até mais.

[MisterMatos]

Link da imagem para torneios:http://cdn5.iconfinder.com/data/icons/Iconshock_soccer/png/48/soccer_1.png

Link do tópico:http://fmonline.forumportugues.com/f4-torneios

______________________________________________________________

Link da imagem para informações e actualizações:http://cdn3.iconfinder.com/data/icons/musthave/48/Information.png

Link do tópico:http://fmonline.forumportugues.com/f16-informacoes-e-actualizacoes

_____________________________________________________________

Imagem do tópico conversa de bar:http://cdn5.iconfinder.com/data/icons/BRILLIANT/food/png/48/beer.png

Link do tópico:http://fmonline.forumportugues.com/f8-conversa-de-bar

Para já é só esses depois eu vou tentar meter mais se conseguir.

[MisterMatos]

Conseguiste fazeR?

[Callie]

Olá de novo,

Coloque o css indicado no tutorial e depois experimente isto:

Código:

<script>
jQuery(function() {
  jQuery('.img_list_hp img').mouseover(function() {
      jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
  }).mouseout(function() {
      jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
  });
});
</script><div class="img_list_hp"><a href=”http://fmonline.forumportugues.com/f4-torneios"><img height="59" src="http://cdn5.iconfinder.com/data/icons/Iconshock_soccer/png/48/soccer_1.png" alt="Torneios"><span>Torneios</span></a></div><div class="img_list_hp"><a href="http://fmonline.forumportugues.com/f16-informacoes-e-actualizacoes"><img height="59" src="http://cdn3.iconfinder.com/data/icons/musthave/48/Information.png” alt="Informações e actualizações"><span>Informações e actualizações</span></a></div><div class="img_list_hp"><a href="http://fmonline.forumportugues.com/f8-conversa-de-bar"><img height="59" src="http://cdn5.iconfinder.com/data/icons/BRILLIANT/food/png/48/beer.png" alt="Conversa de bar"><span>Conversa de bar</span></a></div><div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>

Até mais.

[MisterMatos]

Ficou assim:

[Callie]

Olá de novo,

Já com o css colocado?

Até mais.

[MisterMatos]

Sim já coloquei e ficou como na imagem acima!

[Needke]

Olá MisterMatos,

Isso parece estranho mas, está utilizando códigos adicionais?
Poderá informar-nos, se aparece uma descrição quando passa o rato em cima?

Att, Needke

[MisterMatos]

Não aparece nada eu queria como está aqui no fórum!

[Callie]

Olá de novo,

Experimente o seguinte:

Código:

<script>
jQuery(function() {
  jQuery('.img_list_hp img').mouseover(function() {
      jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
  }).mouseout(function() {
      jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
  });
});
</script><div class="img_list_hp"><a href=”http://fmonline.forumportugues.com/f4-torneios"><img height="59" src="http://cdn5.iconfinder.com/data/icons/Iconshock_soccer/png/48/soccer_1.png" alt="Torneios"><span>Torneios</span></a></div><div class="img_list_hp"><a href="http://fmonline.forumportugues.com/f16-informacoes-e-actualizacoes"><img height="59" src="http://cdn3.iconfinder.com/data/icons/musthave/48/Information.png" alt="Informações"><span>Informações</span></a></div><div class="img_list_hp"><a href="http://fmonline.forumportugues.com/f8-conversa-de-bar"><img height="59" src="http://cdn5.iconfinder.com/data/icons/BRILLIANT/food/png/48/beer.png" alt="Conversa de bar"><span>Conversa de bar</span></a></div><div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>

Foi testado e funciona. Caso não dê é porque deverá ter colocado mal o css. Peço-lhe que o apresente aqui por favor se o código acima não funcionar.

Até mais.

[MisterMatos]

É para colocar em Visualização/Imagens e cores-cores/Folha de estilo Css?

Se for aí aparece-me isto:

Seu CSS foi atualizado
Nota:
As balizas html geram erros na folha de estilo.
Uma correção acabou de ser feita visando suprimir as balizas html que foram adicionadas à folha de estilo.

[Callie]

Olá de novo,

Você terá de colocar o seguinte na folha de estilo css:

Código:

.img_list_hp {
border: 1px solid #0372BE;
padding: 0;
float: left;
color: #FFF !important;
width: auto;
font-size: 11px;
text-align: center;
margin: auto 10px auto auto;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.img_list_hp:hover {
background-color: #DCEAF5;
}

.img_list_hp img {
padding: 8px 15px;
}

.img_list_hp span {
background-color: #0372BE;
color #FFF;
display: block;
padding: 0 10px;
}
.img_list_hp a {
color: #FFF !important;
text-decoration: none;
}
#img_list_alt {
background-image: url(http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png);
background-repeat: no-repeat;
background-position: 20px 0;
padding-top: 13px;
padding-left: 55px;
}

Depois terá de colocar o código que lhe forneci na seguinte localização:

Painel de controle Visualização Homepage Geral Mensagem na homepage

Até mais.

[MisterMatos]

Consegui muito obrigado pela ajuda até mais!