Modificar as Categorias do Fórum

[IsmaelS.]

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Problema começou : Desde 10/11/2014
Endereço do fórum : http://publica.ativoforum.com/forum

Descrição do problema

Bem eu gostava de colocar as categorias do meu fórum assim:
- https://i.servimg.com/u/f59/19/05/39/37/sem_ty11.png

Fórum em que vi:
- https://i.servimg.com/u/f59/19/05/39/37/sem_ty11.png

Fórum onde desejo:
- http://publica.ativoforum.com/forum

[Reset]

Fórum em que vi:
- https://i.servimg.com/u/f59/19/05/39/37/sem_ty11.png

Está praticamente a mesma imagem do print amigo..

Até mais,
Reset.

[IsmaelS.]

Olá,

Essa print é a forma das categorias que desejo colocar no meu fórum:
- http://publica.ativoforum.com/forum

[Troubleshoot]

Olá!

O que o Reset mencionou, foi que você adicionou a mesma url do print em "Fórum em que vi:".
Preciso saber o link do fórum onde viu esse modelo de categoria.


Até!

[IsmaelS.]

Olá,

Peço desculpa a ambos não reparei:
- http://www.foxdesigner.biz/

[Reset]

Olá!

Poderia enviar sua index_box?

Até mais,
Reset.

[Konai]

Saudações!

Adicione este código no início da tua CSS:

Código:

.main .main-head {
background-color: #2a2c33;
border-bottom: 1px solid #de9700;
border-radius: 2px 2px 0 0;
box-shadow: #fa0 0 -2px 0 inset;
color: #fff;
padding: 1em;
text-shadow: none;
}
.main-content_board_index {
background: #E5E4E3;
padding: 9px;
}
.pun .main-content_board_index table.table {
background: #fff;
border: 1px solid #DDD;
border-collapse: separate;
}
.pun table.table {
border-collapse: collapse;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.pun table.table td {
background-color: #f2f2f2!important;
border-bottom: 1px solid #E1E1E1;
border-top: 1px solid #fff;
border-width: 1px 0;
color: #AAA;
font-family: Helvetica, helvetica, arial, sans-serif;
font-size: 12px;
}
.pun .table .tc2, .pun .table .tc3 {
text-align: center;
width: 10%;
}
.pun tbody.statused span.status {
position: absolute;
}
.status {
width: 16px;
}
.status img {
margin-left: -6px;
}

Caminho: Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS

Atenciosamente,
Hakuouki

[IsmaelS.]

Olá,

@Hakuiuki, veja que ficou muito incompleto: http://publica.ativoforum.com/forum

@Reset, aqui está:

Código:

<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <thead>

            </thead>
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle" style="color: #333 !important;font-family: Lato !important;font-size: 14px !important;font-weight: 400 !important;">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     {catrow.forumrow.FORUM_DESC}
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {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}
                  </td>
                  <td class="tc3"><strong>{catrow.forumrow.TOPICS}</strong> topics<br /><strong>{catrow.forumrow.POSTS}</strong> replies</td>
                  <td class="tcr">
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span>
                     <!-- 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>
                  </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
      </div><br><br>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

[IsmaelS.]

UP!

[IsmaelS.]

UP!

[Reset]

Olá!

Troque por este, apenas um teste veja se fique como deseja:

Código:

<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                                                <td class="tc_icon">
                     <span class="status">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                                                </td>
                  <td class="tc_forum" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT};">
                                                        <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     {catrow.forumrow.FORUM_DESC}
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {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}
                  </td>
                                          <td class="tc3"><strong>{catrow.forumrow.TOPICS}</strong> tópicos<br /><strong>{catrow.forumrow.POSTS}</strong> respostas</td>
                  <td class="tcr">
                     <span>
                     <!-- 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>
                  </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
   <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   </ul>
   <!-- BEGIN switch_delete_cookies -->
   <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Até mais,
Reset.

[IsmaelS.]

Não ficou lá muito bem veja:
- http://publica.ativoforum.com/forum

[Duel]

@IsmaelS:
Este tema, ja possui uma categoria própria da IPB, e o senhor não a retirou.. Se fosse a padrão, com alguns ajustes do painel mesmo ficaria perfeito. Vamos lá..
Troque o CSS:

Código:

.main .main-head {
background-color: #2a2c33 !important;
border-bottom: 1px solid #de9700 !important;
border-radius: 2px 2px 0 0 !important;
box-shadow: #fa0 0 -2px 0 inset !important;
color: #fff !important;
padding: 1em !important;
text-shadow: none !important;
}
.main-content_board_index {
background: #E5E4E3 !important;
padding: 9px !important;
}
.pun .main-content_board_index table.table {
background: #fff !important;
border: 1px solid #DDD !important;
border-collapse: separate !important;
}
.pun table.table {
border-collapse: collapse !important;
empty-cells: show !important;
table-layout: fixed !important;
width: 100% !important;
}
.pun table.table td {
background-color: #f2f2f2!important !important;
border-bottom: 1px solid #E1E1E1 !important;
border-top: 1px solid #fff !important;
border-width: 1px 0 !important;
color: #AAA !important;
font-family: Helvetica, helvetica, arial, sans-serif !important;
font-size: 12px !important;
}
.pun .table .tc2, .pun .table .tc3 {
text-align: center !important;
width: 10% !important;
}
.pun tbody.statused span.status {
position: absolute !important;
}
.status {
width: 16px !important;
}
.status img {
margin-left: -6px !important;
}

Adicione-o em primeiro, e deverá ficar assim:

Obs: Sem essa largura toda, o meu fórum de testes que está na sua 'width: 100%'.
Adicione no início da sua CSS!

---

Não mude nada no template, que foi passado pelo Reset!
Ative os avatares nas catégorias!
Link Moderador
É e claro, adicionar os ícones se desejar, do fórum citado.
Se continuar assim, forneça-me a sua CSS.

[IsmaelS.]

Ficou muito grande a barra e falta mais umas coisas veja:
- http://publica.ativoforum.com/forum

.CSS:
- http://pastebin.com/3hF2tusq

[Duel]

Olá!

Substitua o CSS(Que lhe passei), por esse:

Código:

.main .main-head {
background-color: #2a2c33 !important;
border-bottom: 1px solid #de9700 !important;
border-radius: 2px 2px 0 0 !important;
box-shadow: #fa0 0 -2px 0 inset !important;
color: #fff !important;
text-shadow: none !important;
}
.main .main-content {
background: #E5E4E3 !important;
padding: 9px !important;
}.main-head .page-title h2 {
font-family: 'Carrois Gothic', sans-serif;
font-size: 17px;
}
.pun .main-content_board_index table.table {
background: #fff !important;
border: 1px solid #DDD !important;
border-collapse: separate !important;
}
.pun table.table {
border-collapse: collapse !important;
empty-cells: show !important;
table-layout: fixed !important;
width: 100% !important;
}
.pun table.table td {
background-color: #f2f2f2!important !important;
border-bottom: 1px solid #E1E1E1 !important;
border-top: 1px solid #fff !important;
border-width: 1px 0 !important;
color: #AAA !important;
font-family: Helvetica, helvetica, arial, sans-serif !important;
font-size: 12px !important;
}
.pun .table .tc2, .pun .table .tc3 {
text-align: center !important;
width: 10% !important;
}
.pun tbody.statused span.status {
position: absolute !important;
}
.status {
width: 16px !important;
}
.status img {
margin-left: -6px !important;
}

Resulta?

[StaaL]

Ola:
Para Melhora do Seu Efeito Utilize esse Code em Folha de Estilo Css

Código:

.pun .main-content {
   background: none repeat scroll 0% 0% #E5E4E3;
   padding: 9px;
}
.pun table.table td {
   background: none repeat scroll 0% 0% #FFF;
   border: 1px solid #DDD;
   border-collapse: separate;
}

Alterações? Aguardo

nikerg.