Modificar a aparência das categorias

Detalhes da questão

Endereço do fórum: https://policedop.forumeiros.com
Versão do fórum: ModernBB

Descrição

Gostaria de saber se é possível realizar uma mudança visual nas categorias e fóruns para que o visual delas fique algo parecido com isso daqui: https://i.servimg.com/u/f38/20/33/81/30/fzrum210.png

Atualmente o visual delas é o padrão da forumeiros: https://i.servimg.com/u/f38/20/33/81/30/forum110.png

Olá @GuerreiroBR13!

Poderia, por gentileza, fornecer o endereço do fórum onde viu o desejado?

Atenciosamente,
Fraise.

@Fraise eu peguei de exemplo o que tem em um antigo fórum nosso (https://pdop.forumeiros.com) e editei no Photoshop.

Olá, boa tarde.

Procura toda a parte entre o <!-- BEGIN catrow -->, e substitua por esse código:

Código:

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dd class="dterm"><div class="table-title">&nbsp;</div></dd>
                  <dd class="topics">&nbsp;</dd>
                  <dd class="posts">&nbsp;</dd>
                  <dd class="lastpost">&nbsp;</dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        {catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                        <div name="shekCrowley" class="forumlHeader">
                           <p>{catrow.forumrow.TOPICS} {L_TOPICS} e {catrow.forumrow.POSTS} {L_POSTS}</p>
                        </div>
                     </div>
                  </dd>
                  
                  <dd class="lastpost">
                     <!-- BEGIN ads -->
                     <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                     </span>
                            <!-- END ads -->
                     
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span class="lastpost-infos">
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </dd>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

Depois, vá no seu CSS e insira o novo CSS:

Código:

div[name="shekCrowley"] {
    background-color: #c3c3c3;
    padding: 2px;
    border-radius: 2px;
    text-align: center;
    width: 50%;
}

Quanto a imagem de fundo da categoria, escolha pedir o background dela no setor gráfico: https://ajuda.forumeiros.com/f17-criacoes-graficas

Atenciosamente,
Shek

Boa noite. Os códigos funcionaram certinho, mas teve alguns "probleminhas" no processo. Poderia arrumar eles pra mim, por favor?

- O nome das categorias sumil;
- A parte onde fica a quantidade dos tópicos e das mensagens está cortando atrás dos ícones;
- A "coluna" com as últimas mensagens ficou muito centralizada, teria como deixar ela espaçada pra direita?
- E as legendas dos sub-fóruns estão muito coladas nos ícones, teria como deixar um pequeno espaço entre eles? Só pra não ficar muito colado um no outro.

Imagem da situação atual: https://i.servimg.com/u/f38/20/33/81/30/fzrum11.png

E eu queria aproveitar pra pedir que os números da quantidade de Tópicos e Mensagens fossem em negrito, e colocar o cinza um pouquinho mais claro nessa área onde eles estão.

GuerreiroBR13 escreveu:- O nome das categorias sumil;

É só o {catrow.tablehead.L_FORUM} no lugar do &nbsp; na linha 26.

GuerreiroBR13 escreveu:- A parte onde fica a quantidade dos tópicos e das mensagens está cortando atrás dos ícones;

Você tentou incluir no CSS o margin-left e margin-top? Porque, eu inclui e funcionou.

Código:

margin-left: 0;
    margin-top: 25px;

GuerreiroBR13 escreveu:- A "coluna" com as últimas mensagens ficou muito centralizada, teria como deixar ela espaçada pra direita?

Inclua antes do <dd class="lastpost">:

Código:

                  <dd class="topics">&nbsp; <dfn>&nbsp;</dfn></dd>
                                               <dd class="posts">&nbsp; <dfn>&nbsp;</dfn></dd>

GuerreiroBR13 escreveu:- E as legendas dos sub-fóruns estão muito coladas nos ícones, teria como deixar um pequeno espaço entre eles? Só pra não ficar muito colado um no outro.

A modificação que fiz no template não afeta os ícones das mensagens nos subfóruns. Isso tem algo relacionado ao código, ou é outro assunto?

Shek escreveu:Você tentou incluir no CSS o margin-left e margin-top? Porque, eu inclui e funcionou.

Eu tentei colocar o magin-top e em alguns lugares o espaço acabou ficando muito grande.

Shek escreveu:Inclua antes do <dd class="lastpost">:

Eu troquei os códigos e não funcionou.

Shek escreveu:A modificação que fiz no template não afeta os ícones das mensagens nos subfóruns. Isso tem algo relacionado ao código, ou é outro assunto?

Ah sim, achei que tinha relação com o código. Então deixa quieto kkk

Bom dia.

Acho que isso ocorreu porque está dentro do quadro errado. Eu fiz um teste e me parece ter dado certo agora. Pega a div shek:

Código:

                    <div name="shekCrowley" class="forumlHeader">
                          <p>{catrow.forumrow.TOPICS} {L_TOPICS} e {catrow.forumrow.POSTS} {L_POSTS}</p>
                    </div>

E coloca após a </div>. É para ficar assim:

Quando a questão do lastpost, eu refiz a aplicação e funciona:
Por gentileza, poderia deixar os códigos ativados? Porque, pelo que vi no seu código fonte, a aplicação não foi publicada.

Atenciosamente,
Shek

Boa tarde.
Eu publiquei as mudanças nos templates e o lastpost funcionou, mas a situação com a div shekCrowley continua igual mesmo após a mudança.

Bom dia.

Apague seu template por completo, e vamos recomeçar. Troque seu CSS por esse:

Código:

dl[name="shekCrowley"] {
    background-color: #c3c3c3;
    border-radius: 2px;
    text-align: center;
    width: 25%;
    margin: 5px 0px 5px 25px;
}

O template, substitua por esse:

Código:

<ul class="linklist">
   <!-- BEGIN switch_user_logged_in -->
   <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;•&nbsp;</li>
   <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;•&nbsp;</li>
   <!-- END switch_user_logged_in -->
   <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
   <!-- BEGIN switch_user_logged_in -->
   <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="forabg">
        <ul class="topiclist">
            <li class="header">
              <dl class="icon">
                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="topics">&nbsp;</dd>
                  <dd class="posts">&nbsp;</dd>
                  <dd class="lastpost">&nbsp;</dd>
              </dl>
            </li>
        </ul>
        <ul class="topiclist forums">
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
            <li class="row">
              <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                    <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        {catrow.forumrow.FORUM_DESC}
 
                        <!-- BEGIN switch_moderators_links -->
                          {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                    </div>
                  </dd>
                  <dd class="topics">&nbsp; <dfn>&nbsp;</dfn></dd>
              <dd class="posts">&nbsp; <dfn>&nbsp;</dfn></dd>
                  <dd class="lastpost">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                   
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->
 
                    <span class="lastpost-infos">
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </dd>
              </dl>
            <dl name="shekCrowley" class="forumlHeader">
               <p>{catrow.forumrow.TOPICS} {L_TOPICS} e {catrow.forumrow.POSTS} {L_POSTS}</p>
            </dl>
            </li>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
            </ul>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_forum_images -->
<div class="forabg">
   <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header">
            <dl class="icon">
               <dd class="dterm"><div class="table-title"><h2>{switch_forum_images.TITLE}</h2></div></dd>
            </dl>
         </li>
      </ul>
      <div class="container-imgs-list" style="max-height: 500px" id="imageList">
         {switch_forum_images.SCRIPTS}
      </div>
   </div>
   <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_images -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
   <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>&nbsp;•&nbsp;</li>
   <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>&nbsp;•&nbsp;</li>
   <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   <!-- BEGIN switch_delete_cookies -->
   <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

Em tese, é para ficar próximo a isso:

Bom dia.
Agora funcionou certinho, mas acabou tirando a opção de ocultar as categorias. Sabe me dizer como faz pra voltar com elas?

Alias, eu queria aproveitar e perguntar se tem como deixar cores diferentes pra quando a categoria estiver aberta/fechada e trocar o ícone dessa opção. A minha ideia seria algo parecido com isso:

Agradecia que criasse um novo tópico para a sua nova questão, tendo em vista que apenas tratamos de um assunto por tópico.

Tópico resolvido Movido para "Questões resolvidas".