Júnior Duarte • Sex 21 Ago 2015 - 17:08
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.
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Diapt • Sex 21 Ago 2015 - 17:51
Reputação da mensagem: 100% (1 votos)
Painel de Controle
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
Diapt
Membro
Membro desde : 04/06/2015
Mensagens : 71
Reputação : 47
Reputação da mensagem: 100% (1 votos)
Júnior Duarte • Sex 21 Ago 2015 - 17:57
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Diapt • 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
Diapt
Membro
Membro desde : 04/06/2015
Mensagens : 71
Reputação : 47
Reputação da mensagem: 100% (1 votos)
Júnior Duarte • Sex 21 Ago 2015 - 18:08
Entendi, vi nesse Fórum http://www.punbb.biz/
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Hawk • Sex 21 Ago 2015 - 18:40
Reputação da mensagem: 100% (1 votos)
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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Abraço!
Hawk
Novo Membro
Membro desde : 14/08/2015
Mensagens : 5
Reputação : 3
Reputação da mensagem: 100% (1 votos)
Júnior Duarte • Sex 21 Ago 2015 - 18:44
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.
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Je4n • Sex 21 Ago 2015 - 18:55
Reputação da mensagem: 100% (1 votos)
Me envie o seu template index_box .
Je4n
Membro
Membro desde : 22/11/2013
Mensagens : 221
Reputação : 102
Reputação da mensagem: 100% (1 votos)
Júnior Duarte • 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>
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Je4n • 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.
Je4n
Membro
Membro desde : 22/11/2013
Mensagens : 221
Reputação : 102
Reputação da mensagem: 100% (1 votos)
Júnior Duarte • Sáb 22 Ago 2015 - 1:29
Fala amigão, ficou bom, bora só alinhar agora. hehehe
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Je4n • 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
Je4n
Membro
Membro desde : 22/11/2013
Mensagens : 221
Reputação : 102
Júnior Duarte • 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]
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Reputação da mensagem: 100% (1 votos)
Diapt • Sáb 22 Ago 2015 - 8:16
Diapt
Membro
Membro desde : 04/06/2015
Mensagens : 71
Reputação : 47
Cepheus • 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; }
Cepheus
Membro Experiente
Membro desde : 31/07/2013
Mensagens : 547
Reputação : 1855
500 mensagens
Por ter publicado 500 mensagens no best Skins!
Reputação da mensagem: 100% (2 votos)
Júnior Duarte • Sáb 22 Ago 2015 - 13:49
Júnior Duarte
Membro Experiente
Membro desde : 07/12/2013
Mensagens : 476
Reputação : 52
Daemon • Sáb 22 Ago 2015 - 14:08
[alerta="Mensagem automática"][/alerta] Este tópico foi movido de "CSS " para "Arquivos ".
Daemon
Membro desde : 21/01/2013
Mensagens : 3341
Reputação : 2583
1000 mensagens
Por ter publicado 1000 mensagens no best Skins!
Conteúdo patrocinado •
Permissões neste sub-fórum
Não podes responder a tópicos