Organizar Icones

+3
Luiis_.
Fraise
كوي
7 participantes

Ir para baixo

Tópico resolvido Organizar Icones

Mensagem por كوي 18.07.15 15:22

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)
Organizar Icones 6ghcw9

Gostaria que fica-se assim: (ilustração - não existe)
Organizar Icones 2noi01

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!


Última edição por كوي em 19.07.15 18:36, editado 1 vez(es)
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Fraise 18.07.15 15:30

Olá!

Vá em:
Painel de Controle Flecha ajudeiros Visualização Flecha ajudeiros Cores Flecha ajudeiros Folha de estilos CSS

E adicione este código:
Código:
.pun fieldset, .pun img {
  padding-top: 25px;
}

Cumprimentos.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Ícones

Mensagem por كوي 18.07.15 15:36

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!
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Fraise 18.07.15 15:44

Olá!

Tente este.
Código:
ul#pun-legend, ul.pun-legend {
  padding-top:25px!important;
}

Cumprimentos.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Ícones

Mensagem por كوي 18.07.15 15:51

não resultou.
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Fraise 18.07.15 15:55

Olá!

Poderá fornecer o seu index_body, por gentileza?
Localização:
Painel de Controle Flecha ajudeiros Visualização Flecha ajudeiros Templates Flecha ajudeiros Geral

Cumprimentos.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Luiis_. 18.07.15 17:56

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 Positivo

Até  Tchau
Luiis_.
Luiis_.
***

Membro desde : 12/07/2015
Mensagens : 123
Pontos : 198

http://...

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por RafaelS. 18.07.15 18:15

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
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Jpjupa 18.07.15 18:30

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.
Jpjupa
Jpjupa
Super Membro

Membro desde : 15/11/2010
Mensagens : 1369
Pontos : 1977

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Sennior 18.07.15 19:35

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
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Ícone

Mensagem por كوي 18.07.15 22:44

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 كوي
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Mshas 18.07.15 22:49

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,
Mshas
Mshas
****

Membro desde : 14/07/2015
Mensagens : 318
Pontos : 438

http://www.mservicos.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por Sennior 18.07.15 22:52

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
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Ícones

Mensagem por كوي 18.07.15 23:00

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

كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por RafaelS. 18.07.15 23:06

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.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Ícone

Mensagem por كوي 18.07.15 23:13

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!
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por RafaelS. 18.07.15 23:21

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.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Ícone

Mensagem por كوي 18.07.15 23:26

Raffy, me perdoe pela minha falta de atenção, no entanto eu postar um print de como está, veja:
Organizar Icones 2gtc6jl
Se possível, deixar a escrita no centro, como nos outros, e também, se possível é claro, organiza-los!
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por RafaelS. 19.07.15 1:02

كوي escreveu:Raffy, me perdoe pela minha falta de atenção, no entanto eu postar um print de como está, veja:
Organizar Icones 2gtc6jl
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.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Ícones

Mensagem por كوي 19.07.15 1:07

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!
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por RafaelS. 19.07.15 13:02

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 -->

Flecha ajudeiros Lhe agrada?

Atenciosamente.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Resolvido

Mensagem por كوي 19.07.15 18:36

gostaria de agradecer a todos que me ajudaram! problema resolvido!
كوي
كوي
****

Membro desde : 26/08/2012
Mensagens : 366
Pontos : 739

http://help.ahlamontada.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Organizar Icones

Mensagem por RafaelS. 19.07.15 18:57

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos