Descrição dos Tópicos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Descrição dos Tópicos

Mensagem por Angel' em 21/09/14, 11:22 pm

Hey....

Gostaria de pedir ajuda com um código.. Vamos lá...

A descrição do meu fórum está assim > Imagem

Eu gostaria de adicionar codes para que ela ganhe Isso e Isso

Vejam o efeito > Aqui

Enfim.. kkk O resultado final que eu tenho em mente é o seguinte > Resultado

Alguém pode me ajudar?

Agradeço desde já!!! *uuu*


Última edição por Alicia Vërmont em 01/10/14, 09:39 pm, editado 2 vez(es)
avatar

Angel'
Nível 5

Feminino
Inscrito dia : 07/02/2012
Mensagens : 53
Pontos Ativos : 90

Ver perfil do usuário http://rpg-vampire-diaries.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Sennior em 22/09/14, 01:04 pm

Boas,

Meta o código abaixo em uma das suas categorias:
Código:
<div id="pw-ds-botones">
    
   <div class="pw-ds-b1 selec">
       
   </div>
    
   <div class="pw-ds-b2">
       
   </div>
    
   <div class="pw-ds-b3">
       
   </div>
    
</div>
<div id="pw-quicklinks">
     <a href="Link Ambient">Ambientación</a> <a href="Link reglas">Reglas</a> <a href="Link registros">Registros</a><a href="Link normas afis">Afílianos</a> <a href="Link normas créditos">Créditos</a> 
</div><style>#pw-dexstarr a {
text-decoration: none;
}
#pw-dexstarr, #pw-quicklinks a {
color: #ddd;
}
#pw-quicklinks a {
background: rgba(51,51,51,0.6);
display: block;
font-family: calibri;
font-size: 9px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 3px;
margin-left: 107px;
margin-top: 1px;
opacity: .7;
padding: 1.65px 0;
text-align: center;
text-transform: uppercase;
}
#pw-quicklinks *, .pw-ds-award * {
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}#pw-quicklinks {
height: 100px;
margin-top: 3px;
}#pw-ds-botones {
bottom: 0;
left: -312px;
position: absolute;
}</style>

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Descrição dos Tópicos

Mensagem por Angel' em 23/09/14, 01:30 pm

Isso!! Mas esse code deixou uma linha inteira para cada link, e eu gostaria q fosse repartido em três colunas, como nessa img > http://i39.servimg.com/u/f39/17/90/44/70/final10.jpg

A imagem é que deve prevalecer na apresentação do tópico, só quero que os links apareçam quando eu clicar no quadradinho do lado esquerdo.

*-*
avatar

Angel'
Nível 5

Feminino
Inscrito dia : 07/02/2012
Mensagens : 53
Pontos Ativos : 90

Ver perfil do usuário http://rpg-vampire-diaries.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Angel' em 28/09/14, 11:18 am

UP

?? Gentemmm ;(
avatar

Angel'
Nível 5

Feminino
Inscrito dia : 07/02/2012
Mensagens : 53
Pontos Ativos : 90

Ver perfil do usuário http://rpg-vampire-diaries.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por iPrompt em 28/09/14, 11:50 am

Olá,

Poderia me informar se o código esta ativo no fórum para eu ver qual e o erro ?
E se possível tire um print do erro e deixe o código ativo no fórum

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Angel' em 29/09/14, 12:21 am

A img é esta: http://i.imgur.com/iIiPpNA.png

O code está ativo na área "Mundo - Inglaterra"
avatar

Angel'
Nível 5

Feminino
Inscrito dia : 07/02/2012
Mensagens : 53
Pontos Ativos : 90

Ver perfil do usuário http://rpg-vampire-diaries.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por iPrompt em 29/09/14, 08:08 am

Olá,

Seria algo assim ?

Código:
<div id="pw-ds-botones">
                            
   <div class="pw-ds-b1 selec">
                                   
   </div>
                            
   <div class="pw-ds-b2">
                                   
   </div>
                            
   <div class="pw-ds-b3">
                                   
   </div>
                          
</div>
   
<div id="pw-quicklinks">
                 <a href="Link Ambient">Ambientación</a> <a href="Link reglas">Reglas</a> <a href="Link registros">Registros</a><a href="Link normas afis">Afílianos</a> <a href="Link normas créditos">Créditos</a>     
</div>
<div id="pw-quicklinkss">
                 <a href="Link Ambient">Ambientación</a> <a href="Link reglas">Reglas</a> <a href="Link registros">Registros</a><a href="Link normas afis">Afílianos</a> <a href="Link normas créditos">Créditos</a>     
</div><style>#pw-dexstarr a {
    text-decoration: none;
    }
    #pw-dexstarr, #pw-quicklinks a {
    color: #ddd;
    }
    #pw-quicklinks a {
  background: none repeat scroll 0% 0% #AD0D0D;
    display: block;
    font-family: calibri;
    font-size: 9px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 3px;
    margin-left: 107px;
    margin-top: 1px;
    opacity: .7;
    padding: 1.65px 0;
    text-align: center;
    text-transform: uppercase;
    }
#pw-quicklinkss a {
  background: none repeat scroll 0% 0% #AD0D0D;
    display: block;
    font-family: calibri;
    font-size: 9px;
color: #DDD;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 3px;
    margin-left: 107px;
    margin-top: 1px;
    opacity: .7;
    padding: 1.65px 0;
    text-align: center;
    text-transform: uppercase;
    }
    #pw-quicklinks *, .pw-ds-award * {
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    }#pw-quicklinks {
    height: 100px;
    margin-top: 1px;
    float: left;
    width: 88%;
    margin-left: -100px;
}
#pw-quicklinkss {
    margin-left: 120px;
margin-top: -0px;
    height: 100px;
    width: 88%;
}
#pw-ds-botones {
    bottom: 0;
    left: -312px;
    position: absolute;
    }</style>

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Angel' em 30/09/14, 10:38 pm

Ficou bugado rs' > http://i.imgur.com/kP6N8cS.png

Mas não era isso não....

Vê se vcs entendem agora por essa img > http://i.imgur.com/XdyWCVh.jpg
avatar

Angel'
Nível 5

Feminino
Inscrito dia : 07/02/2012
Mensagens : 53
Pontos Ativos : 90

Ver perfil do usuário http://rpg-vampire-diaries.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Alex Habilidade em 01/10/14, 07:28 pm

Olá,

Por favor me forneça os botões para que eu poça fazer o código do geito que pretende.
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Angel' em 01/10/14, 08:03 pm

*uu*

Está tudo no tablón desse fórum >> http://coven.forumeiros.com/

avatar

Angel'
Nível 5

Feminino
Inscrito dia : 07/02/2012
Mensagens : 53
Pontos Ativos : 90

Ver perfil do usuário http://rpg-vampire-diaries.forumeiros.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Alex Habilidade em 01/10/14, 09:07 pm

Oi,

Criei algo aqui para você, espero que seja isto, antes de mais nada quero deixar avisado que pode acontecer alguns erros de ajuste, pois eu fiz no meu fórum de teste, sendo assim caso haja algum erro de ajuste peço que permaneça com os códigos adicionados em seu fórum.

Primeiro vamos criar uma página de javascript com investimento no índice e colocaremos o código abaixo:
Código:

$(function(){
var conteudo2 = $('#conteudo2');
var quadrado2 = $('.quadrado2');
var quadrado1 = $('.quadrado1');
conteudo2.hide();
quadrado2.click(function(){
conteudo2.show('slow');
quadrado1.css('background','#333');
quadrado2.css('background','#3ac3c3');
});
quadrado1.click(function(){
conteudo2.hide('slow');
$('#categoria-img-alex').show('slow');
quadrado1.css('background','#3ac3c3');
quadrado2.css('background','#333');
});
});

Salve.

Agora vá na descrição da categoria que deseja colocar o efeito, na descrição coloque o código abaixo:

Código:


<div id="conteudo">

    <div class="botão-alex">    
        <div class="quadrado1"></div>
        <div class="quadrado2"></div>
    </div>

 <div id="categoria-img-alex">
  <img src="http://i.imgur.com/W8Sqo9U.png" />  
 </div>

 <div id="conteudo2">
 <table>
             <tr>

 <td id="pw-quicklinks">
              <a href="Link Ambient">Ambientación</a> <a href="Link reglas">Reglas</a> <a href="Link registros">Registros</a><a href="Link normas afis">Afílianos</a> <a href="Link normas créditos">Créditos</a>    
 </td>

                 <td id="pw-quicklinks">
              <a href="Link Ambient">Ambientación</a> <a href="Link reglas">Reglas</a> <a href="Link registros">Registros</a><a href="Link normas afis">Afílianos</a> <a href="Link normas créditos">Créditos</a>    
 </td>

                 <td id="pw-quicklinks">
              <a href="Link Ambient">Ambientación</a> <a href="Link reglas">Reglas</a> <a href="Link registros">Registros</a><a href="Link normas afis">Afílianos</a> <a href="Link normas créditos">Créditos</a>    
 </td>
                
                 </tr>
        </table>
        
<style>
    #conteudo2 {
        background-color: #ad0d0d;
        padding: 8px;
            position: absolute;
        margin-left: 20px;
    }
    div#categoria-img-alex img {
float: left;
margin-left: 20px;
}
    div#categoria-img-alex img {
float: left;
}.botão-alex {
float: left;
margin-top: 90px;
position: absolute!important;
}
    .quadrado1 {
     background-color: #3ac3c3;  
    }
    .quadrado2{
    background-color: #333;    
    }
        .quadrado1, .quadrado2 {
            height: 10px;
            width: 10px;
            cursor: pointer;
            border: 1px solid #000;
        }
    .quadrado2 {
        margin-top: 2px;    
    }
        
    .botao-alex
#pw-dexstarr a {
text-decoration: none;
}
#pw-dexstarr, #pw-quicklinks a {
color: #ddd;
}
#pw-quicklinks a {
background: rgba(51,51,51,0.6);
display: block;
font-family: calibri;
font-size: 9px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 3px;
margin-top: 1px;
opacity: .7;
text-align: center;
text-transform: uppercase;
    padding: 2px 24px 0;
    margin-right: 20px;
    height: 17px;
    text-decoration: none;
}#pw-quicklinks a:hover {
opacity: 1;
}
#pw-quicklinks *, .pw-ds-award * {
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}#pw-quicklinks {
margin-top: 3px;
}#pw-ds-botones {
bottom: 0;
left: -312px;
position: absolute;
}</style>  
 </div>
</div>

Salve e teste!
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Descrição dos Tópicos

Mensagem por Angel' em 01/10/14, 09:18 pm

Festa rosa Ai para tudo... Vou me declarar pra vc agora....  Festa rosa


<333333333333333333333333333333333333333333333

kkkk

Muitíssimo obrigada!!!!!!!! *--------------------*
avatar

Angel'
Nível 5

Feminino
Inscrito dia : 07/02/2012
Mensagens : 53
Pontos Ativos : 90

Ver perfil do usuário http://rpg-vampire-diaries.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum