[Suporte] Ajuda em adaptação de tema
3 participantes
Página 1 de 1
[Suporte] Ajuda em adaptação de tema
[ul]
[li]Descrição:[/li]
[/ul]
[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]
[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]
IsmaelS.- Membro
- Time Online : 56d 18h 55m 47s
Mensagens : 70
Data de inscrição : 22/02/2014
Re: [Suporte] Ajuda em adaptação de tema
Bom.. Vamos lá
Para o efeito de categorias lado a lado eu faria dessa maneira:
Nome do Fórum:
Endereço da imagem:
Nenhuma
Descrição:
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
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..
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..
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..
Re: [Suporte] Ajuda em adaptação de tema
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 :/
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 :/
IsmaelS.- Membro
- Time Online : 56d 18h 55m 47s
Mensagens : 70
Data de inscrição : 22/02/2014
Re: [Suporte] Ajuda em adaptação de tema
A respeito do efeito da borda, adicione isso no final do seu CSS
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..
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
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?
- 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?
Re: [Suporte] Ajuda em adaptação de tema
Olá,
Sim percebi, coloquei na .CSS ou é para colocar na index_box? Pois coloquei na .CSS e nada aconteceu caro amigo!
Sim percebi, coloquei na .CSS ou é para colocar na index_box? Pois coloquei na .CSS e nada aconteceu caro amigo!
IsmaelS.- Membro
- Time Online : 56d 18h 55m 47s
Mensagens : 70
Data de inscrição : 22/02/2014
Re: [Suporte] Ajuda em adaptação de tema
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:
Primeiro criei um .wrap somente para simular o efeito.. Ele não é importante..
Dentro dele é que vem o segredo:
Note que em uma das divs eu não inseri a imagem e na outra eu inseri.. Formatei ela da seguinte maneira:
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:
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
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;
}
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
Re: [Suporte] Ajuda em adaptação de tema
@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...
Desculpem desabafar assim, mas é que é sempre a mesma coisa...
Re: [Suporte] Ajuda em adaptação de tema
@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
É 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
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos