JScript

Programação & Desenvolvimento


[Suporte] Ajuda em adaptação de tema

IsmaelS.
IsmaelS.
Membro
Membro

Time Online : 56d 18h 55m 47s
Mensagens : 70
Data de inscrição : 22/02/2014

[Suporte] Ajuda em adaptação de tema Empty [Suporte] Ajuda em adaptação de tema

Mensagem por IsmaelS. em Qua 09 Abr 2014, 8:55 pm

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

[Suporte] Ajuda em adaptação de tema 238

E desejava colocar como mostra nesta print:

[Suporte] Ajuda em adaptação de tema 145

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]


waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por waghcwb em Qui 10 Abr 2014, 11:36 am

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



The quieter you become, the more you are able to hear

[Suporte] Ajuda em adaptação de tema Btn_viewmy_160x25_pt_BR



study
IsmaelS.
IsmaelS.
Membro
Membro

Time Online : 56d 18h 55m 47s
Mensagens : 70
Data de inscrição : 22/02/2014

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por IsmaelS. em Qui 10 Abr 2014, 11:41 am

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 :/
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por waghcwb em Qui 10 Abr 2014, 12:01 pm

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:
[Suporte] Ajuda em adaptação de tema Stats_10
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?



The quieter you become, the more you are able to hear

[Suporte] Ajuda em adaptação de tema Btn_viewmy_160x25_pt_BR



study
IsmaelS.
IsmaelS.
Membro
Membro

Time Online : 56d 18h 55m 47s
Mensagens : 70
Data de inscrição : 22/02/2014

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por IsmaelS. em Qui 10 Abr 2014, 12:11 pm

Olá,

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

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por waghcwb em Qui 10 Abr 2014, 12:46 pm

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



The quieter you become, the more you are able to hear

[Suporte] Ajuda em adaptação de tema Btn_viewmy_160x25_pt_BR



study
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por waghcwb em Sab 12 Abr 2014, 10:10 pm

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



The quieter you become, the more you are able to hear

[Suporte] Ajuda em adaptação de tema Btn_viewmy_160x25_pt_BR



study
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por JScript em Dom 13 Abr 2014, 12:45 am

@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



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...



Conteúdo patrocinado

[Suporte] Ajuda em adaptação de tema Empty Re: [Suporte] Ajuda em adaptação de tema

Mensagem por Conteúdo patrocinado


    Data/hora atual: Qui 14 Nov 2019, 3:06 pm