Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Júnior Duarte Júnior Duarte  • Sex 21 Ago 2015 - 17:08

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sex 21 Ago 2015 - 17:08


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

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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

  • Informações:



Fórum:[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]Versão:PUNBB

Diapt Diapt  • Sex 21 Ago 2015 - 17:51

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty Re: [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sex 21 Ago 2015 - 17:51

Reputação da mensagem: 100% (1 votos)
Painel de Controle  Seta 2 Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Imagens & Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] 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:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Diapt

Júnior Duarte Júnior Duarte  • Sex 21 Ago 2015 - 17:57

Diapt Diapt  • Sex 21 Ago 2015 - 18:04

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty Re: [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sex 21 Ago 2015 - 18:04

Reputação da mensagem: 100% (1 votos)
É porquê você não tem essas imagens forma de relevo, era só posicionar a questão do ícone.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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

Júnior Duarte Júnior Duarte  • Sex 21 Ago 2015 - 18:08

Hawk Hawk  • Sex 21 Ago 2015 - 18:40

Júnior Duarte Júnior Duarte  • Sex 21 Ago 2015 - 18:44

Je4n Je4n  • Sex 21 Ago 2015 - 18:55

Júnior Duarte Júnior Duarte  • Sex 21 Ago 2015 - 22:23

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty Re: [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sex 21 Ago 2015 - 22:23

Fala [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] 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>

Je4n Je4n  • Sáb 22 Ago 2015 - 1:12

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty Re: [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sáb 22 Ago 2015 - 1:12

Reputação da mensagem: 100% (1 votos)
Indexbox: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
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.

Júnior Duarte Júnior Duarte  • Sáb 22 Ago 2015 - 1:29

Je4n Je4n  • Sáb 22 Ago 2015 - 1:40

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty Re: [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sáb 22 Ago 2015 - 1:40

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 ([Tens de ter uma conta e sessão iniciada para poderes visualizar este link] 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

Júnior Duarte Júnior Duarte  • Sáb 22 Ago 2015 - 2:34

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty Re: [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sáb 22 Ago 2015 - 2:34

Reputação da mensagem: 100% (1 votos)
Agradeço grandemente ao [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] pela ajuda, o fórum ficou espetacular. Valeu cara você é foda demais.


@edit

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] apenas mais um ajuste, veja os sub-fóruns ainda estão com os ícones sobrepondo as títulos.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Diapt Diapt  • Sáb 22 Ago 2015 - 8:16

Cepheus Cepheus  • Sáb 22 Ago 2015 - 10:56

[CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Empty Re: [CSS] Borda nos Ícones dos Tópicos e Ícones de aviso em relevo. Sáb 22 Ago 2015 - 10:56

Reputação da mensagem: 100% (2 votos)
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;
}

Júnior Duarte Júnior Duarte  • Sáb 22 Ago 2015 - 13:49

Daemon Daemon  • Sáb 22 Ago 2015 - 14:08

Conteúdo patrocinado  • 

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

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