Wigget com uma certa area especifica do fórum

Detalhes da questão

Endereço do fórum: http://criadoresdepassaros.com
Versão do fórum: phpBB3

Descrição

Gostaria que criasse um Widget ou algo como se fosse de ultimos assuntos ou novidades do Fórum que tivesse o efeito seguinte , o que posto em uma certa categoria criada no fórum fique listado neste Wigdet automatico , exemplo eu estou criando esta categoria com especies de pássaros e gostaria que elas ficassem em um widget para que as pessoas vistes todas especies que contem o site , a categoria é esta do link :

https://www.criadoresdepassaros.com/f72-passaros-e-pesquisa-descubra-outras-especies-aqui-acesse


Até mais

Você deseja que todos os tópicos neste subfórum apareçam no widget?

Não todos especificos ou aleatorios conforme atualização da pagina ...

Crie um novo widget com o código:

Código:

<div class="fa-topics">
   <h4>Espécies em Destaque</h4>
   <a href="/t45189-beija-flores">Beija-flores</a>
   <a href="/t44144-saiba-tudo-sobre-o-sanhaco-de-fogo">Sanhaço de Fogo</a>
   <a href="/t45183-gaviao-de-cauda-curta">Gavião de cauda-curta</a>
   <a href="/t45175-tucano-tucanucu">Tucano Tucanucu</a>
   <a href="/t45172-tangara-dancarino">Tangará Dançarino</a>
</div>

<style type="text/css">
   .fa-topics {
      width: 100%;
   }
   
   .fa-topics,
   .fa-topics * {
      box-sizing: border-box;
   }
   
   .fa-topics a {
      display: table;
      margin: 10px 15px;
      width: 100%;
      color: #1775bd;
      text-decoration: none;
      border: solid 1px #1775bd;
      padding: 6px 10px;
      border-radius: 2px;
      box-shadow: inset 0 0 6px rgba(26, 117, 187, 0.55);
      -webkit-transition: all linear 200ms;
      transition: all linear 200ms;
   }
   
   .fa-topics a:hover {
      background-color: rgba(26, 117, 187, 0.55);
      color: #104a77;
   }
   
   .fa-topics h4 {
      color: #1775bd;
      border-bottom: solid 1px #1775bd;
      margin: 10px 15px;
      width: 100%;
      margin-right: 0px;
      padding-right: 20px;
   }
</style>

O senhor pode adicionar mais links dentro dessa

<div>

, conforme como fora feito acima:

Código:

<div class="fa-topics">
   <h4>Espécies em Destaque</h4>
   <a href="/t45189-beija-flores">Beija-flores</a>
   <a href="/t44144-saiba-tudo-sobre-o-sanhaco-de-fogo">Sanhaço de Fogo</a>
   <a href="/t45183-gaviao-de-cauda-curta">Gavião de cauda-curta</a>
   <a href="/t45175-tucano-tucanucu">Tucano Tucanucu</a>
   <a href="/t45172-tangara-dancarino">Tangará Dançarino</a>
</div>

Os links já ficaram no estilo correto automaticamente.

o/

Legal , apenas ficou muito largo o contorna azul que o nome da especie fica dentro como diminuir

Troque todo o código por:

Código:

<div class="fa-topics">
  <h4>Espécies em Destaque</h4>
  <a href="/t45189-beija-flores">Beija-flores</a>
  <a href="/t44144-saiba-tudo-sobre-o-sanhaco-de-fogo">Sanhaço de Fogo</a>
  <a href="/t45183-gaviao-de-cauda-curta">Gavião de cauda-curta</a>
  <a href="/t45175-tucano-tucanucu">Tucano Tucanucu</a>
  <a href="/t45172-tangara-dancarino">Tangará Dançarino</a>
</div>
 
<style type="text/css">
  .fa-topics {
      width: 100%;
      max-width: 300px;
  }
 
  .fa-topics,
  .fa-topics * {
      box-sizing: border-box;
  }
 
  .fa-topics a {
      display: table;
      margin: 10px 15px;
      width: 100%;
      color: #1775bd;
      text-decoration: none;
      border: solid 1px #1775bd;
      padding: 6px 10px;
      border-radius: 2px;
      box-shadow: inset 0 0 6px rgba(26, 117, 187, 0.55);
      -webkit-transition: all linear 200ms;
      transition: all linear 200ms;
  }
 
  .fa-topics a:hover {
      background-color: rgba(26, 117, 187, 0.55);
      color: #104a77;
  }
 
  .fa-topics h4 {
      color: #1775bd;
      border-bottom: solid 1px #1775bd;
      margin: 10px 15px;
      width: 100%;
      margin-right: 0px;
      padding-right: 20px;
  }
</style>

Legal .. Estou querendo colocar onde coloquei no exemplo e que ficasse um ao lado do outro , pois se repito dois codigos iguais fica um abaixo do outro , veja exemplo :




quero que fique lado a lado .. obrigado

Bom dia!

Acessa seu CSS passado por Luiz, e troca a primeira linha:

Código:

  .fa-topics {
      width: 100%;
  }

Por esta nova:

Código:

.fa-topics {
    float: left;
    width: 50%;
    padding: 5px;
}

Atenciosamente,
Shek

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.

Ficou bugado da uam olhada , segue:

Olá!

Desfaça a mudança do CSS que orientei, e troca o seu HTML por este:

Código:

<table>
   <tr>
      <td style="padding: 5px;">
         <div class="fa-topics">
           <h4>Espécies em Destaque</h4>
           <a href="/t45189-beija-flores">Beija-flores</a>
           <a href="/t44144-saiba-tudo-sobre-o-sanhaco-de-fogo">Sanhaço de Fogo</a>
           <a href="/t45183-gaviao-de-cauda-curta">Gavião de cauda-curta</a>
           <a href="/t45175-tucano-tucanucu">Tucano Tucanucu</a>
           <a href="/t45172-tangara-dancarino">Tangará Dançarino</a>
         </div>
      </td>
      <td style="padding: 5px;">
         <div class="fa-topics">
           <h4>Espécies em Destaque</h4>
           <a href="/t45189-beija-flores">Beija-flores</a>
           <a href="/t44144-saiba-tudo-sobre-o-sanhaco-de-fogo">Sanhaço de Fogo</a>
           <a href="/t45183-gaviao-de-cauda-curta">Gavião de cauda-curta</a>
           <a href="/t45175-tucano-tucanucu">Tucano Tucanucu</a>
           <a href="/t45172-tangara-dancarino">Tangará Dançarino</a>
         </div>
      </td>
   </tr>
</table>

Olá @EDU2010 !

Apague o código passado pelo @Shek, e coloque antes este na sua folha de estilos:

Código:

.fa-topics {
    display: inline-block;
    padding: 5px;
}


Até mais.

inline-block? Nossa... Eu não sabia da existência dessa propriedade @RafaelS.... Obrigado!!

Olá!

Ora essa @Shek !
Vivemos aprendendo não é mesmo?

Sim realmente existe essa propriedade, e como o nome diz "os blocos ficam em linha"

Obrigado eu, até mais.

RafaelS. escreveu:Olá @EDU2010 !

Apague o código passado pelo @Shek, e coloque antes este na sua folha de estilos:

Código:

.fa-topics {
    display: inline-block;
    padding: 5px;
}


Até mais.

Resultou , obrigado !