Organizar Icones

Bom dia a todos!
Gostaria de saber se é possível organizar os Ícones do Fórum e os Ícones dos Tópicos, caso tenham duvida no que estou dizendo, observem a imagem abaixo (é apenas uma ilustração)


Gostaria que fica-se assim: (ilustração - não existe)


Se possivel é claro, deixar com aquela borda, posicionando os ícones alinhados e o titulo (novas mensagens, não há novas mensagens e fórum bloqueado) no centro ao lado de cada ícones, deixando provavelmente um espaço maior do que ilustrado na imagem!
Além de implementar isso nos Ícones do Fórum, gostaria que também fossem implementadas nos Ícones de Tópicos.

Versão do Fórum: PUNBB
Fórum: kawaiibr.forumeiros.org

desde já agradeço pela atenção e pela disposição!

Olá!

Vá em:

Painel de Controle Visualização Cores Folha de estilos CSS

E adicione este código:

Código:

.pun fieldset, .pun img {
  padding-top: 25px;
}

Cumprimentos.
Fraise

Fraise, gostaria de organizar os ícones que ficam lá em baixo (que servem como legenda), o code que você postou altera a posição dos ícones no fórum, no entanto, gostaria de organizar as legendas (Ícones) do Fórum e dos Tópicos, como mostra a imagem do post anterior!

desde já agradeço pela sua disposição em me ajudar!

Olá!

Tente este.

Código:

ul#pun-legend, ul.pun-legend {
  padding-top:25px!important;
}

Cumprimentos.
Fraise

não resultou.

Olá!

Poderá fornecer o seu index_body, por gentileza?
Localização:

Painel de Controle Visualização Templates Geral

Cumprimentos.
Fraise

Olá كوي Tente usar esté codigo CSS

Código:

.pun fieldset, .pun img {
  border: none;
  margin-bottom: -20px;
}

Creio que ira funcionar pois testei em meu Fórum de testes e deu certinho

Até  

Olá!

Remova todos os códigos aqui passados e substitua por este:

Código:

#pun-legend img {
    vertical-align: middle;
    padding-left: 23px;
}
#pun-legend {
    border: 1px solid #D4D2D2;
    padding: 8px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center;
    width: 63%;
}

Atenciosamente,
Raffy

Minha sugestão de código:

Código:

#pun-legend > li > img {
  margin-bottom: -20px !important;
  margin-left: 20px !important;
}
ul#pun-legend {
  margin-top: -20px !important;
  margin-bottom: 40px !important;
}

Grande abraço,
Jp.

Saudações,

Aceda ao teu painel administrativo:
Cpainel ->> Visualização ->> Gestão de imagens ->> Cores ->> Folha de Estilo CSS

Código:

ul#pun-legend img {
  margin-top: -20px!important;
}
ul#pun-legend, ul.pun-legend {
  padding-top: 23px!important;
  margin-left: 16pc;
}

ul#pun-legend li {
  display: flex;
}
ul#pun-legend, ul.pun-legend {
  padding-top: 23px!important;
  margin-left: 16pc;
}

Meta o código acima no inicio de teu CSS.
Até mais.
Sennior

fiquei muito contente ao ver todas essas respostas! antes de mais nada agradeço a todos pela disposição e pelo empenho em me ajudar, obrigado Fraise, Luiis_., Raffy, Jpjupa, Sennior!
no entanto, os códigos funcionam, porém não obteve efeito nos Ícones dos Tópicos, somente nos Ícones do Fórum! se possivel, me ajude com este que faltou, pois o resta está como esperado!

mais uma vez, obrigado a todos! estarei aguardando respostas para o código de imagem de tópicos, ansiosamente كوي

Saudações querido,
Meta este código CSS,
Não exclua outros lá cima,

Código:

.activeusers .ul-icons:first-of-type {
   margin-left: -500px !important;
   margin-bottom: -95px;
}
.activeusers  {
   padding-left: 20% !important;
}

Cumprimentos,

Saudações,

Utilize este código CSS:

Código:

a.forumtitle.tool-tip {
  position: relative;
  margin-top: 4px;
  top: 15px;
  left: 7px;
}

Coloque no inicio de teu CSS.
Até mais.
Sennior

mais uma vez agradeço! no entanto ainda não surtiu efeito nas imagens, nos Ícones dos Tópicos.

Olá,

Normalmente o código que eu lhe passei acima funciona na perfeição, mas adicione este:

Código:

#pun-legend img, .pun-legend img {
    vertical-align: middle;
    padding-left: 23px;
}
#pun-legend, .pun-legend {
    border: 1px solid #D4D2D2;
    padding: 8px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center;
    width: 63%;
}

Atenciosamente.

sim funcionou! no entanto, poderia fazer com que a legenda (a parte escrita) fica-se ao lado do Ícone (digo, no centro), dê uma olhada para ver como ficou clicando aqui! e se possível, teria como deixar somente um quadrado para as legendas!
obrigado pela atenção!

Olá,

Infelizmente não consigo ver, pois não está visível para visitantes. Além disso o cadastro está bloqueado.

Mas veja que na página inicial a legenda ficou perfeitamente, como queira.

Atenciosamente.

Raffy, me perdoe pela minha falta de atenção, no entanto eu postar um print de como está, veja:

Se possível, deixar a escrita no centro, como nos outros, e também, se possível é claro, organiza-los!

كوي escreveu:Raffy, me perdoe pela minha falta de atenção, no entanto eu postar um print de como está, veja:

Se possível, deixar a escrita no centro, como nos outros, e também, se possível é claro, organiza-los!

Olá!

Isso tudo é possível, adicione este CSS:

Código:

#pun-legend img {
    vertical-align: middle;
    padding-left: 23px;
}
#pun-legend {
    border: 1px solid #D4D2D2;
    padding: 8px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center;
    width: 63%;
}

Este código é para a legenda da página inicial.

Para as legendas dos tópicos irei precisar do seu template viewforum_body.

Atenciosamente.

Ok, o Código que você solicitou faz exatamente a proposta nos Ícones do Fórum, no entanto os Ícones dos Tópicos voltam a como estavam antes (sem a organização e a barra).

Segue o viewforum_body

Código:

<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li>
 <script type="text/javascript">//<![CDATA[
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu_new('f{FORUM_ID}&amp;f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 </li>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

{BOARD_INDEX}

<div class="main paged">
 <div class="paged-head clearfix">
 <p class="paging">{PAGINATION}</p>
 <!-- BEGIN switch_user_authpost -->
 <p class="posting"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></p>
 <!-- END switch_user_authpost -->
 </div>

 {TOPICS_LIST_BOX}

 <div class="paged-foot clearfix">
 <p class="paging">{PAGINATION}</p>
 <!-- BEGIN switch_user_authpost -->
 <p class="posting"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></p>
 <!-- END switch_user_authpost -->
 </div>

</div>
<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>

<div id="pun-info" class="main">
 <div class="main-content">
 <div id="stats">
 <p class="right">{L_MODERATOR} : {MODERATORS}</p>
 {LOGGED_IN_USER_LIST}
 </div>
 <div id="onlinelist">
 <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
 </div>
 </div>
</div>

<!-- BEGIN switch_legend -->
<ul class="pun-legend">
 <li><img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" />&nbsp;{L_FOLDER_NEW_IMG}</li>
 <li><img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" />&nbsp;{L_FOLDER_HOT_NEW_IMG}</li>
 <li><img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" />&nbsp;{L_FOLDER_LOCKED_NEW_IMG}</li>
</ul>
<ul class="pun-legend">
 <li><img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" />&nbsp;{L_FOLDER_IMG}</li>
 <li><img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" />&nbsp;{L_FOLDER_HOT_IMG}</li>
 <li><img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" />&nbsp;{L_FOLDER_LOCKED_IMG}</li>
</ul>
<ul class="pun-legend">
 <li><img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_ANNOUNCE_IMG}</li>
 <li><img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" />&nbsp;{L_FOLDER_STICKY_IMG}</li>
 <li><img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</li>
</ul>
<!-- END switch_legend -->

mais uma vez, obrigado pela atenção e pela disposição!

Olá amigo!

Eu sei que os ícones dos tópicos não ficaram personalizados, eu o fiz prepositalmente.

Mas agora eles também irão ficar personalizados, troque o seu viewforum_body por este:

Código:

<style>
#legendaraffy {
    border: 1px solid rgb(184, 184, 197);
    padding: 9px;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 78%;
}   
#legendaraffy img {
    vertical-align: middle !important;
}
</style>
<!-- BEGIN switch_user_logged_in -->
    <div id="pun-visit" class="clearfix">
    <ul>
    <li>
    <script type="text/javascript">//<![CDATA[
    var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
    var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
    var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
    var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
    var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
    insert_plus_menu_new('f{FORUM_ID}&amp;f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
    //]]>
    </script>
    </li>
    <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
    <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
    <li><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></li>
    </ul>
    <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
    </div>
    <!-- END switch_user_logged_in -->
    <!-- BEGIN switch_user_logged_out -->
    <div id="pun-visit">
    <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
    </div>
    <!-- END switch_user_logged_out -->

    {BOARD_INDEX}

    <div class="main paged">
    <div class="paged-head clearfix">
    <p class="paging">{PAGINATION}</p>
    <!-- BEGIN switch_user_authpost -->
    <p class="posting"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></p>
    <!-- END switch_user_authpost -->
    </div>

    {TOPICS_LIST_BOX}

    <div class="paged-foot clearfix">
    <p class="paging">{PAGINATION}</p>
    <!-- BEGIN switch_user_authpost -->
    <p class="posting"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></p>
    <!-- END switch_user_authpost -->
    </div>

    </div>
    <div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
    </div>

    <div id="pun-info" class="main">
    <div class="main-content">
    <div id="stats">
    <p class="right">{L_MODERATOR} : {MODERATORS}</p>
    {LOGGED_IN_USER_LIST}
    </div>
    <div id="onlinelist">
    <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
    </div>
    </div>
    </div>

    <!-- BEGIN switch_legend -->
<div id="legendaraffy">
    <ul class="pun-legend">
    <li><img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" />&nbsp;{L_FOLDER_NEW_IMG}</li>
    <li><img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" />&nbsp;{L_FOLDER_HOT_NEW_IMG}</li>
    <li><img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" />&nbsp;{L_FOLDER_LOCKED_NEW_IMG}</li>
    </ul>
    <ul class="pun-legend">
    <li><img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" />&nbsp;{L_FOLDER_IMG}</li>
    <li><img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" />&nbsp;{L_FOLDER_HOT_IMG}</li>
    <li><img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" />&nbsp;{L_FOLDER_LOCKED_IMG}</li>
    </ul>
    <ul class="pun-legend">
    <li><img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_ANNOUNCE_IMG}</li>
    <li><img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" />&nbsp;{L_FOLDER_STICKY_IMG}</li>
    <li><img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</li>
    </ul>
</div>
    <!-- END switch_legend -->

Lhe agrada?

Atenciosamente.

gostaria de agradecer a todos que me ajudaram! problema resolvido!