[ul]
[li]Descrição:[/li]
[/ul]

Olá,

Eu não sei se vai ser permitido colocar todas as minhas dúvidas neste tópico ou terei que criar tópico a tópico, pois eu irei pedir ajuda aqui mesmo para adaptar um tema e que não queria que acontece-se o mesmo problema que deu no primeiro ter códigos a mais ...

Por isso aqui vai neste momento o efeito das categorias está desta forma:

E desejava colocar como mostra nesta print:

Queria colocar o efeito de "Tópicos" e "Mensagens" como mostra na print e também colocar uma linha a separar cada secção mas deixar a categoria verde como está.

Tema em adaptação: http://sdtema.forumeiros.eu/forum
Fórum Oficial: http://suportedesign.forumeiros.com/forum

Agradeço a ajuda até mais! 

---

[ul]
[li]Fórum: www.SuporteDesign.forumeiros.com[/li]
[li]Versão: PUNBB[/li]
[li]Tipo: Erros diversos[/li]
[li]Tags: suporte design ajuda em adaptacao[/li]
[/ul]

---

Bom.. Vamos lá

Para o efeito de categorias lado a lado eu faria dessa maneira:

Nome do Fórum:

Código:

<span></span>

Endereço da imagem:
Nenhuma

Descrição:

Código:


<div class="category">
<div class="category-main">
<img src="http://i70.servimg.com/u/f70/18/07/03/67/gift11.png" alt="icon">
<a href="/">Category title</a>
<div class="category-desc">Category description</div>
</div>
</div>

Mude o link da imagem para o desejado e o link da categoria também.. Fiz de maneira a caber 2 itens ali.. Igual está no seu fórum.. Para adicionar o outro basta repetir o código acima...

E adicione isso no seu CSS

Código:

.category{
width: 50%;
}
.category, .category-main, .category img{
float: left;
}

.category img{
vertical-align: top;
}
.category-desc{
color: #999;
padding: .5em .7em;
float: left;
}
.category-main a{
font-weight: bold;
float: left;
margin: 0 .5em;
}

No .category definimos o tamanho do bloco para 50%, ou seja metade do espaço disponível... Caso queira inserir outros elementos (4 blocos por exemplo) você deve fazer a divisão de 100 pelo número de blocos desejados, é preferível que sejam número pares para não ter números quebrados, ai você vai ter que fazer alguns ajustes..

Por exemplo, no caso de 4 blocos fazemos a divisão 100 / 4 = 25
Neste caso o valor ali seria 25%...

.category-desc eu definir para a descrição ter uma cor mais clara.. Mas você pode modificar a vontade, caso não conheça os atributos ali basta mudar o valor do "color" para a cor desejada...

No .category-main a defini um font-weight: bold para ficar em negrito, caso não deseje isso, basta retirar aquela propriedade..


Para o efeito dos números, bom este não é um tutorial de minha autoria, muito menos deste fórum.. Não sei se é permitido postar o link por aqui, então lhe enviarei por MP..

E por último a borda para separar é bem simples de ser feito..

Código:

tbody.statused tr {
   border-top: 1px solid #RGB;
}

Veja qual estilo de borda se adeque mais para sua situação, e se prefere a borda no topo ou em baixo..

Para borda em baixo troque o "top" por "bottom"

E para o estilo das bordas, confira este ótimo artigo do Maujor
http://www.maujor.com/tutorial/bordertut.php

É isso, espero que de tudo certo..

@Off: Uma coisa que notei que você sempre usa em seus tópicos é colocar o tipo de tópico em colchetes ( [Suporte] ), creio que isso não seja necessário meu amigo.. Basta inserir o título do mesmo..

Olá,

Colocar as categorias lado a lado eu sei, mas agora o tal risco em dividir cada secção não resultou pode confirmar: http://sdtema.forumeiros.eu/forum

E enquanto ao efeito de "Tópicos" e "Mensagens" você me passou um link mas como lhe disse ele apenas pede o index_box e não explica como modificar :/

A respeito do efeito da borda, adicione isso no final do seu CSS

Código:

.pun table.table {
    border-collapse: collapse;
}

Sobre o efeito que ele faz lá, é bem simples na verdade.. Veja:
Nas class tc2 e tc3 temos o número de tópicos e mensagens contidos em determinado fórum.. Tudo que ele fez foi adicionar uma imagem com transparência logo abaixo deste número, que no caso é esta:

https://i.servimg.com/u/f74/18/12/37/46/stats_10.png

E adicionar algumas propriedades para que essa imagem sobreponha o texto original, com essas propriedades..

Código:

    .stats_number {
        font-size: 16px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        display: block;
        text-align: center;
        color: #BBB;
        position: relative;
        overflow: hidden;
    }
    .stats_number img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 15px;
    }
    .stats_text {
        font-size: 10px;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        display: block;
        text-align: center;
        color: #DDD;
    }

A únicas formatações importantes que tem ai são um position relative no elemento "pai" dessa categoria, e um position absolute e top:0 na imagem adicionada..

Note essa parte do código dele

Código:

<td class="tc2">
  <span class="stats_number">
    {catrow.forumrow.TOPICS}
    <img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" />
  </span>
  <span class="stats_text">
    tópicos
  </span>
</td>
<td class="tc3">
  <span class="stats_number">
    {catrow.forumrow.POSTS}
    <img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" />
  </span>
  <span class="stats_text">
    respostas
  </span>
</td>

Com esse código notamos a ultima modificação que ele fez, que foi incluir um span dentro do td.. Para que ele possa assumir o position: relative que eu citei...

Ficou claro como é feito o efeito?

Olá,

Sim percebi, coloquei na .CSS ou é para colocar na index_box? Pois coloquei na .CSS e nada aconteceu caro amigo!

Não funcionou porque não te entreguei o código pronto amigo apenas te dei o exemplo que o Daemon fez no efeito dele.. Como o JScript disse aqui nosso objetivo é te ensinar, e não te entregar as coisas ja feitas!!

Vamos tentar denovo.. Como eu disse, nosso objetivo é inserir uma imagem abaixo do nosso texto e mover essa imagem para cima sobrepondo o texto.. Lembrando que a imagem é com transparência para conseguir o efeito..

Veja um exemplo prático aqui:
http://jsfiddle.net/Wagner/jc69Y/embedded/result/

Vamos a explicação do código:

Código:

<div class="wrap">
  <div class="effect">Texto sem o efeito</div>
  <div class="effect">Texto com o efeito
  <img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></div>
</div>

Primeiro criei um .wrap somente para simular o efeito.. Ele não é importante..

Dentro dele é que vem o segredo:

Código:

  <div class="effect">Texto sem o efeito</div>
  <div class="effect">Texto com o efeito
  <img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></div>

Note que em uma das divs eu não inseri a imagem e na outra eu inseri.. Formatei ela da seguinte maneira:

Código:

.effect{
  width: 50%;
  float: left;
  text-align: center;
  color: #bbb;
  font: bold 16px Arial, Helvetica, sans-serif;
  position: relative;
}

Onde deixei as parte mais importantes no final do código, que são o position:relative, e as formatações na fonte foram usadas para simular o efeito, faça uns testes mudando tamanhos e nome da fonte para ver qual efeito fica melhor para você..
O position relative é importante para que esse elemento passe a ser o "wrap".. Caso você não faça isso a imagem vai procurar o próximo elemento pai que tenha algum atributo "position" que geralmente é o body, caso isso não seja feito a imagem vai ir para o topo da tela e não permanecer dentro do nosso wrap..

E o último efeito feito na imagem:

Código:

.effect img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
}

Onde colocamos o position:absolute para que a imagem sobreponha o texto, e depois o top:0 e left:0, para ele ir ao topo de se manter a esquerda do nosso wrap.. A ultima formatação é o height 15px apenas para definir uma altura para a image não extrapolar os limites...

Entendeu como é feito amigo? Não se sinta tímido em perguntar a respeito, todos queremos que você aprenda

@IsmaelS, notei que você foi pedir suporte em outro fórum a respeito deste assunto.. Porque não tirou suas dúvidas conosco? Me senti chateado com isso, foi meio que eu digitar tudo isso e fazer os exemplos para você a toa!! Se você está aqui é para aprender não é? Se a única coisa que você quer é códigos prontos já sabe onde conseguir, e não é aqui!

Desculpem desabafar assim, mas é que é sempre a mesma coisa...

@Wagner

É bom ir se acostumando amigo, pode ter certeza de que ele, assim como tantos outros, não se preocupa em entender, quem dirá em aprender, só quer um código pronto!

*Click*

JS