Você não está conectado. Conecte-se ou registre-se

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Júnior Duarte

avatar
Membro elite


  • Descrição:

Fala galera, tudo bem?

Gostaria de aplicar umas melhorias no CSS da Index do Fórum.

Gostaria da estilização que esse Fórum aplicou, veja que os ícones do tópicos estão com um quadrado com bordas quase transparentes. E o título está bem alinhado com a descrição.


Pra somar também gostaria de aplicar esse mesmo efeito que a BS possui com esses ícones de notificações em relevo.


Eu já possuo esses ícones nos tópicos, gostaria que ficassem em relevo também.

  • Informações:



Fórum:http://invitesexpress.omeuforum.net/Versão:PUNBB

Ver perfil do usuário

Diapt

avatar
Membro ativo

Painel de Controle  Seta 2 Visualização  Imagens & Cores  Cores  Aba Folha de Estilo CSS
Código:
.main .main-content .statused td.tcl[style] .status img {
    margin-left: -16px;
    margin-top: 5px;
    position: absolute;
}
.tcl img[alt] {
    max-width: 37px;
}

Olha como ficou:


Diapt

Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Aqui não funcionou.

Ver perfil do usuário

Diapt

avatar
Membro ativo

É porquê você não tem essas imagens forma de relevo, era só posicionar a questão do ícone.



Pede aos seus designers fazer assim igual como tá na imagem e sobre a questão de quadrados poderia me dizer onde você viu?


Diapt

Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Entendi, vi nesse Fórum http://www.punbb.biz/

Ver perfil do usuário

Hawk

avatar
Membro

Olá @Júnior Duarte!
A minha dica é, que quando salvar seu arquivo em png de um espaçamento de pelo menos 2px a mais. no caso sem a borda.


Abraço!

Ver perfil do usuário http://www.forumscode.forumbrasil.net

Júnior Duarte

avatar
Membro elite

Olá amigo eu não faço os ícones eu pego direto do iconfinder. Acredito que esse efeito de borda é feito com CSS, como acontece com os emblemas do Fórum.

Ver perfil do usuário

Je4n

avatar
Membro ativo

Me envie o seu template index_box.



{WASD}
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Fala @Je4n segue como solicitado.

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">
                <thead>
                  <tr>
                      <th class="tcl">{L_FORUM}</th>
                      <th class="tc2">{L_TOPICS}</th>
                      <th class="tc3">{L_POSTS}</th>
                      <th class="tcr">{L_LASTPOST}</th>
                  </tr>
                </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">{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 -->
                        <div class="subforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                      </td>
                      <td class="tc2"><span class="stats_number">{catrow.forumrow.TOPICS}</span><span class="stats_text">tópicos</span></td>
                      <td class="tc3"><span class="stats_number">{catrow.forumrow.POSTS}</span><span class="stats_text">respostas</span></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>
      <!-- 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 -->
<script>$(function () {
    $('.main-head:has(.page-title)').prepend('<style>.collapsee.tcatCollapse img{opacity:0} .collapsee.tcatCollapse img:hover{opacity:.9} .main .main-head.collapsede { opacity: .9!important;margin-bottom:5px }</style><a class="collapsee tcatCollapse" id="collapse_c_cat1" href="#top" style="float: right;margin-top: -3px;"><img src="http://i.imgur.com/d7jXnmJ.png" alt="" height="20px"></a>');
    $('.main-head a.collapsee[id]').click(function (e) {
        e.preventDefault()
    });
    $('.main-head a.collapsee[id]').attr('onclick', " if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/I5HCAxH.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsede')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/LBFBNlE.png'); $(this).closest('.main-head').addClass('collapsede');}");
    $(document).ready(function () {
        $('.main-head a.collapsee[id]').closest('.main-head').each(function () {
            if (my_getcookie($(this).find('.page-title').text() + '_ct') == '1') {
                $(this).next('.main-content:first').css('display', 'none');
                $(this).find('a.collapsee[id] img').attr('src', 'http://i.imgur.com/LBFBNlE.png');
                $(this).closest('.main-head').addClass('collapsede')
            } else {
                $(this).next('.main-content:first').css('display', 'block');
                $(this).find('a.collapsee[id] img').attr('src', 'http://i.imgur.com/I5HCAxH.png');
                $(this).closest('.main-head').removeClass('collapsede')
            }
        })
    })
});</script>

Ver perfil do usuário

Je4n

avatar
Membro ativo

Indexbox: http://pastebin.com/jc7cD9u5
Adicione a sua folha de estilo:
Código:
#title-categoria {
    display: block;
    margin-left: 0px;
    margin-top: 0px;
    text-overflow: ellipsis;
}
#categoria-des {
    display: block;
    font-size: 11px;
}
#categoria-des img {
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 0;
    margin-top: -15px;
    position: relative;
    overflow: hidden;
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
}

Lembrando que só fiz a parte dos ícones. Talvez vá ficar levemente desalinhado, mas é só avisar que eu arrumo.



{WASD}
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Fala amigão, ficou bom, bora só alinhar agora. hehehe

Ver perfil do usuário

Je4n

avatar
Membro ativo

Adicione na folha de estilo:
Código:

.pun table.table td.tcl img[style="float:left"] {
    margin: 3px 10px 0 0;
}
.pun tbody.statused td.tcl h3.hierarchy, .pun tbody.statused td.tcl p.desc {
    margin-left: 50px;
}

Atualiza o anterior (#categoria-des img) por esse:
Código:
#categoria-des img {
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    height: 38px;
    margin-left: 0;
    margin-top: -13px;
    max-height: 38px;
    max-width: 38px;
    overflow: hidden;
    position: relative;
    width: 38px;
}

Atualize o template index_box por esse:http://pastebin.com/WLBUq9sA



{WASD}
Ver perfil do usuário

Júnior Duarte

avatar
Membro elite

Agradeço grandemente ao @Je4n pela ajuda, o fórum ficou espetacular. Valeu cara você é foda demais.


@edit

@Je4n apenas mais um ajuste, veja os sub-fóruns ainda estão com os ícones sobrepondo as títulos.




Ver perfil do usuário

Diapt

avatar
Membro ativo

Senhor @Krenisk
Aqui tá normal.
http://prntscr.com/87k5hw

Diapt

Ver perfil do usuário

Cepheus

avatar
Admin

Procure essa linha no seu css:
Código:
.pun tbody.statused td.tcl h3.hierarchy, .pun tbody.statused td.tcl p.desc {
    margin-left: 50px;
}

E Substitua por:

Código:
.pun tbody.statused td.tcl h3.hierarchy, .pun tbody.statused td.tcl h2.hierarchy, .pun tbody.statused td.tcl p.desc {
    margin-left: 50px;
}





  • Gostou?
     não esqueça de
  • Reputar!



    Ver perfil do usuário

    Júnior Duarte

    avatar
    Membro elite

    Grande @Cepheus , agora sim. Está tudo 100%.

    Ver perfil do usuário

    Daemon

    avatar
    Admin

    [alerta="Mensagem automática"][/alerta]



    Este tópico foi movido de "CSS" para "Arquivos".

    Ver perfil do usuário http://zz1856.com

    Conteúdo patrocinado


    Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

    Permissão deste fórum:
    Você não pode responder aos tópicos neste fórum