Descrição dos Tópicos

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*

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.

Isso!! Mas esse code deixou uma linha inteira para cada link, e eu gostaria q fosse repartido em três colunas, como nessa img > https://i.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.

*-*

UP

?? Gentemmm ;(

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é

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

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

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é

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

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

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

Olá,

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

*uu*

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

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!

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


<333333333333333333333333333333333333333333333

kkkk

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