Quadro de Anúncio no Fórum

[Pixar]

Detalhes da questão

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

Descrição

Boa tarde! Gostaría de saber, como colocar um quadro de anúncio, conforme print:

http://prntscr.com/pl67w5

Link com o que eu quero: http://hogwartshistory.forumeiros.com/

A unica mudança, seria colocar ao invés desse roxo, o "predominante" de meu fórum.

Obrigado.

Até!

[Infected]

Olá Apple',

Vê se está ao teu agrado:

Código:

<style>
#tab-nom {
    background: url(https://i.imgur.com/yofrwzi.png);
 background-attachment: fixed;
    border-bottom: 10px solid #68352d;
    color: #f6f6f6;
    font-family: Oswald;
    font-size: 20px;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
    padding: 10px;
    text-align: right;
    text-shadow: 1px 1px 1px #000;
    text-transform: lowercase;
    width: 220px;
}
#tab-nom:after {
    content: ", ";
}
#tab-amb, #tab-nov, #tab-staff {
    background: #0d0d0d;
    font-size: 11px;
    height: 105px;
    line-height: 12px;
    overflow: hidden;
    padding: 10px;
    text-align: justify;
    width: 220px;
}
#tab-staff a:hover {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #7A2C18;
    transition: all .7s ease-in-out;
}
#nov-fecha {
    -moz-border-radius: 6px;
    background: #7A2C18;
    border-radius: 6px;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 2px;
    padding: 2px 6px;
    text-transform: uppercase;
}
#tab-staff a {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #131313;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 24.8px;
    margin-bottom: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: all .7s ease-in-out;
    width: 220px;
}
</style>
<center>
                                                      
 <table>
                                         <tbody>                            </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tbody><tr style="">
                                                      
 <td>
                                                    
 <div id="tab-nom">
                           Título 1                            
 </div>
                                                                              
 <div id="tab-amb">
                                                                                                       Texto                          
 </div>
                                                                                  
 </td>
                                                      
 <td>
                                                    
 <div id="tab-nom">
                           Título 2                            
 </div>
                                                    
 <div id="tab-amb">
                        Texto                    
 </div>
                                                      
 </td>
                                                      
 <td>
                                                    
 <div id="tab-nom">
                           Títulos 3                          
 </div>
                                                    
 <div id="tab-nov">
                                        
 <div id="nov-fecha">
                     dia                      
 </div>
                       acontecimento<br>                    
 <div id="nov-fecha">
                     dia                      
 </div>
                       acontecimento<br>                    
 <div id="nov-fecha">
                     dia                      
 </div>
                       acontecimento<br>                                              
 <div id="nov-fecha">
                     dia                      
 </div>
                       acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy"><br>                                    
 <div id="nov-fecha">
                     dia                      
 </div>
                     acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy"><br>                    
 <div id="nov-fecha">
                     dia                      
 </div>
                       acontecimento  <br>                          
 </div>
                                                      
 </td>
                                                      
 <td>
                                                    
 <div id="tab-nom">
                           Título 4                          
 </div>
                              
 <div id="tab-staff">
                 <a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a>                  
 </div>
                                                                                      
 </td>
                                                      
 </tr></tbody>                                        
 </table>
</center>

Pré-visualização: https://prnt.sc/plsqdv

Se pretenderes colocar como mensagem inicial do fórum, é só ires a Painel de Controle Visualização Página inicial Geral

Cordialmente,
Infected

[Pixar]

Boa tarde.

Sim, ficou ótimo!! Teria como me ajudar somente em uma alteração, caso possível? Teria como colocar os últimos tópicos (assuntos) em um scroll na primeira aba? Como não tenho essa opção em qualquer parte do fórum, acho que ficaria legal ai... Mas muito obrigado, por enquanto!!

Atenciosamente,

[Infected]

Sim, concerteza. Troca o código HTML que passei anteriormente por:

Código:

<style>
#tab-nom {
    background: url(https://i.imgur.com/yofrwzi.png);
 background-attachment: fixed;
    border-bottom: 10px solid #68352d;
    color: #f6f6f6;
    font-family: Oswald;
    font-size: 20px;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
    padding: 10px;
    text-align: right;
    text-shadow: 1px 1px 1px #000;
    text-transform: lowercase;
    width: 220px;
}
#tab-nom:after {
    content: ", ";
}
#tab-amb, #tab-nov, #tab-staff {
    background: #0d0d0d;
    font-size: 11px;
    height: 105px;
    line-height: 12px;
    overflow: hidden;
    padding: 10px;
    text-align: justify;
    width: 220px;
}
#tab-staff a:hover {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #7A2C18;
    transition: all .7s ease-in-out;
}
#nov-fecha {
    -moz-border-radius: 6px;
    background: #7A2C18;
    border-radius: 6px;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 2px;
    padding: 2px 6px;
    text-transform: uppercase;
}
#tab-staff a {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #131313;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 24.8px;
    margin-bottom: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: all .7s ease-in-out;
    width: 220px;
}
</style>
<center>
                                                            
   <table>
                                                <tbody>                            </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
      <tr style="">
                                                                  
         <td>
                                                                   
            <div id="tab-nom">
                                           Título 1                                 
            </div>
                                                                                             
            <div id="tab-amb">
                  
               <div class="tab-recent-topics">
 
               </div>
                                      
            </div>
                                                                                                 
         </td>
                                                                  
         <td>
                                                                   
            <div id="tab-nom">
                                           Título 2                             
            </div>
                                                                   
            <div id="tab-amb">
                                       Texto                     
            </div>
                                                                     
         </td>
                                                                  
         <td>
                                                                   
            <div id="tab-nom">
                                           Títulos 3                           
            </div>
                                                                   
            <div id="tab-nov">
                                                          
               <div id="nov-fecha">
                                        dia                       
               </div>
                                       acontecimento<br />                     
               <div id="nov-fecha">
                                        dia                       
               </div>
                                       acontecimento<br />                     
               <div id="nov-fecha">
                                        dia                       
               </div>
                                       acontecimento<br />                                               
               <div id="nov-fecha">
                                        dia                       
               </div>
                                       acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy" /><br />                                     
               <div id="nov-fecha">
                                        dia                       
               </div>
                                     acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy" /><br />                     
               <div id="nov-fecha">
                                        dia                       
               </div>
                                       acontecimento  <br />                           
            </div>
                                                                     
         </td>
                                                                  
         <td>
                                                                   
            <div id="tab-nom">
                                           Título 4                           
            </div>
                                             
            <div id="tab-staff">
                                 <a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a>                   
            </div>
                                                                                                     
         </td>
                                                                  
      </tr><tbody></tbody><tbody></tbody>                                         
   </table>
</center>

Seguidamente, cria um novo JavaScript investido em todas as páginas com:

Código:

(function($) {
  'use strict';
 
  $(function() {
$('.tab-recent-topics').load('/latest .dterm');
  });
})(jQuery);

[Pixar]

Opa, foi quase!

Olha só: http://prntscr.com/pmft3w

As fontes ficaram meia "bugadas".

E se tiver como, teria como colocar aquela movimentação de baixo para cima?

Obrigado novamente!!

[Infected]

Ups! Sorry.

Podes retirar o modo de manutenção para que eu possa ver que alterações são necessárias efetuar ao código?

[Pixar]

Posso sim, retirado!

[Infected]

Não consegui colocar o "scroll" automaticamente, portanto coloquei uma barra, desculpa... foi o que consegui.
Troca o HTML por este:

Código:

<style>
#tab-nom {
    background: url(https://i.imgur.com/yofrwzi.png);
 background-attachment: fixed;
    border-bottom: 10px solid #68352d;
    color: #f6f6f6;
    font-family: Oswald;
    font-size: 20px;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
    padding: 10px;
    text-align: right;
    text-shadow: 1px 1px 1px #000;
    text-transform: lowercase;
    width: 220px;
}
#tab-nom:after {
    content: ", ";
}
#tab-amb, #tab-ambb, #tab-nov, #tab-staff {
    background: #0d0d0d;
    font-size: 11px;
    height: 105px;
    line-height: 12px;
    overflow: hidden;
    padding: 10px;
    text-align: justify;
    width: 220px;
}
#tab-staff a:hover {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #7A2C18;
    transition: all .7s ease-in-out;
}
#nov-fecha {
    -moz-border-radius: 6px;
    background: #7A2C18;
    border-radius: 6px;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 2px;
    padding: 2px 6px;
    text-transform: uppercase;
}
#tab-staff a {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #131313;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 24.8px;
    margin-bottom: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: all .7s ease-in-out;
    width: 220px;
}
.tab-recent-topics a.topictitle {
    font-size: 13px;
}

.tab-recent-topics .dterm {
    margin: 0 0 10px 0;
}

.tab-recent-topics .dterm img {
    display: none;
}
#tab-ambb {
    overflow-y: scroll;
}
</style>
<center>
                                                           
  <table>
                                                <tbody>                            </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
      <tr style="">
                                                                 
        <td>
                                                                 
            <div id="tab-nom">
                                          Título 1                               
            </div>
                                                                                           
            <div id="tab-ambb">
                 
              <div class="tab-recent-topics">
 
              </div>
                                     
            </div>
                                                                                               
        </td>
                                                                 
        <td>
                                                                 
            <div id="tab-nom">
                                          Título 2                           
            </div>
                                                                 
            <div id="tab-amb">
                                      Texto                   
            </div>
                                                                   
        </td>
                                                                 
        <td>
                                                                 
            <div id="tab-nom">
                                          Títulos 3                         
            </div>
                                                                 
            <div id="tab-nov">
                                                         
              <div id="nov-fecha">
                                        dia                     
              </div>
                                      acontecimento<br />                   
              <div id="nov-fecha">
                                        dia                     
              </div>
                                      acontecimento<br />                   
              <div id="nov-fecha">
                                        dia                     
              </div>
                                      acontecimento<br />                                             
              <div id="nov-fecha">
                                        dia                     
              </div>
                                      acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy" /><br />                                   
              <div id="nov-fecha">
                                        dia                     
              </div>
                                    acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy" /><br />                   
              <div id="nov-fecha">
                                        dia                     
              </div>
                                      acontecimento  <br />                         
            </div>
                                                                   
        </td>
                                                                 
        <td>
                                                                 
            <div id="tab-nom">
                                          Título 4                         
            </div>
                                           
            <div id="tab-staff">
                                <a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a>                 
            </div>
                                                                                                   
        </td>
                                                                 
      </tr><tbody></tbody><tbody></tbody>                                       
  </table>
</center>

[Pixar]

Sem problemas! Prometo que é a última alteração que peço rsrs.

Ao invés de deixar essa barra, com tudo isso de últimos tópicos, teria como deixar somente 3?

[Infected]

Desculpa a demora. É assim que queres?

Código:

<style>
#tab-nom {
    background: url(https://i.imgur.com/yofrwzi.png);
 background-attachment: fixed;
    border-bottom: 10px solid #68352d;
    color: #f6f6f6;
    font-family: Oswald;
    font-size: 20px;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
    padding: 10px;
    text-align: right;
    text-shadow: 1px 1px 1px #000;
    text-transform: lowercase;
    width: 220px;
}
#tab-nom:after {
    content: ", ";
}
#tab-amb, #tab-ambb, #tab-nov, #tab-staff {
    background: #0d0d0d;
    font-size: 11px;
    height: 105px;
    line-height: 12px;
    overflow: hidden;
    padding: 10px;
    text-align: justify;
    width: 220px;
}
#tab-staff a:hover {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #7A2C18;
    transition: all .7s ease-in-out;
}
#nov-fecha {
    -moz-border-radius: 6px;
    background: #7A2C18;
    border-radius: 6px;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 2px;
    padding: 2px 6px;
    text-transform: uppercase;
}
#tab-staff a {
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    background: #131313;
    color: #aaa;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 24.8px;
    margin-bottom: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: all .7s ease-in-out;
    width: 220px;
}
.tab-recent-topics a.topictitle {
    font-size: 13px;
}
 
.tab-recent-topics .dterm {
    margin: 0 0 10px 0;
}
 
.tab-recent-topics .dterm img {
    display: none;
}
</style>
<center>
                                                         
  <table>
                                                <tbody>                            </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
      <tr style="">
                                                               
        <td>
                                                               
            <div id="tab-nom">
                                          Título 1                             
            </div>
                                                                                         
            <div id="tab-ambb">
               
              <div class="tab-recent-topics">
 
              </div>
                                   
            </div>
                                                                                             
        </td>
                                                               
        <td>
                                                               
            <div id="tab-nom">
                                          Título 2                         
            </div>
                                                               
            <div id="tab-amb">
                                      Texto                 
            </div>
                                                                 
        </td>
                                                               
        <td>
                                                               
            <div id="tab-nom">
                                          Títulos 3                       
            </div>
                                                               
            <div id="tab-nov">
                                                       
              <div id="nov-fecha">
                                        dia                   
              </div>
                                      acontecimento<br />                 
              <div id="nov-fecha">
                                        dia                   
              </div>
                                      acontecimento<br />                 
              <div id="nov-fecha">
                                        dia                   
              </div>
                                      acontecimento<br />                                           
              <div id="nov-fecha">
                                        dia                   
              </div>
                                      acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy" /><br />                                 
              <div id="nov-fecha">
                                        dia                   
              </div>
                                    acontecimento<img src="https://web.archive.org/web/20180224041932im_/http://ccfgroup.com/images/new.gif" border="0" alt="Hogwarts History New" loading="lazy" /><br />                 
              <div id="nov-fecha">
                                        dia                   
              </div>
                                      acontecimento  <br />                       
            </div>
                                                                 
        </td>
                                                               
        <td>
                                                               
            <div id="tab-nom">
                                          Título 4                       
            </div>
                                         
            <div id="tab-staff">
                                <a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a>               
            </div>
                                                                                                 
        </td>
                                                               
      </tr><tbody></tbody><tbody></tbody>                                     
  </table>
</center>

[Pixar]

Ótimo, muito obrigado!!

[tikky]

Questão resolvida Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.