Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Chead

Alternativos Stylesheets

Por , em Desenvolvimento frontend

Recommended Posts

Chead    1

Chead
Postado

Galera, venho aqui novamente pedir a ajuda de vocês.

 

Estou precisando criar um painel de mudança de stylesheet como este:

 

http://theme-fusion.com/avada/about-us/

 

Até agora, ja criei o painel e todas as informações, inclusive utilizando o script styleswitcher.js( http://www.alistapart.com/d/alternate/styleswitcher.js ).

 

Até o momento está assim:

 


<!--stylesheets!-->
<link rel="alternate stylesheet" href="css/style-wide.css" title="wide" />
<link rel="alternate stylesheet" href="css/style-boxed.css" title="boxed" />

<link rel="alternate stylesheet" href="css/patterns/style-pattern1.css" title="pattern1" />
<link rel="alternate stylesheet" href="css/patterns/style-pattern2.css" title="pattern2" />
<link rel="alternate stylesheet" href="css/patterns/style-pattern3.css" title="pattern3" />

<link rel="alternate stylesheet" href="css/backgrounds/style-background1.css" title="background1" />
<link rel="alternate stylesheet" href="css/backgrounds/style-background2.css" title="background2" />
<link rel="alternate stylesheet" href="css/backgrounds/style-background3.css" title="background3" />

<link rel="alternate stylesheet" href="css/color_picker/style_color1.css" title="color1" />
<link rel="alternate stylesheet" href="css/color_picker/style_color2.css" title="color2" />
<link rel="alternate stylesheet" href="css/color_picker/style_color3.css" title="color3" />

 

Porém, quando eu troco de um para o outro, eu perco a função de boxed(por exemplo).

 

Eu precisaria que ele ADICIONASSE um stylesheet ao outro e não trocasse definitivamente. Exemplo: Quando clicasse em style_color2 e logo em seguida style_color3, ele adicionasse os códigos CSS do style_color3 ao style_color2.

 

Não sei se estou sendo bem claro quanto minha questão, mais gostaria de uma possivel ajuda para meu caso.

 

Espero que me ajudem. Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

O que você está querendo é deixar os css padrões no topo e abaixo deles só os escolhidos de forma a sobrescrever as informações padrões? é essa a lógica do script?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Chead    1

Chead
Postado

O que você está querendo é deixar os css padrões no topo e abaixo deles só os escolhidos de forma a sobrescrever as informações padrões? é essa a lógica do script?

 

Mais ou menos. Na verdade o script esta trocando um css pelo outro. Eu preciso q sobrescreva.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

tenta assim:

 


$(document).ready(function(){

$("#pattern1").click(function(){

$(body).addClass('pattern1');

  });
});

 

 

No seu CSS você define uma classe e faz o seu estilo.

 

Fiz um exemplo para você, segue:

 

Acho que é isso que quer amigão. :natalbiggrin:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">

body {
background-image:url(bg.png);
background-repeat:repeat;
}
.pattern1 {
background-image:url(pattern1.png);
background-repeat:repeat;
}

.pattern2{
background-image:url(pattern2.jpg);
background-repeat:repeat;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#p1").click(function(){
$('body').removeClass('pattern2');	
$('body').addClass('pattern1');
});
$("#p2").click(function(){
$('body').removeClass('pattern1');
$('body').addClass('pattern2');
});
});
</script>
</head>

<body>
<p id="p1">MODELO 1</p>
<p id="p2">MODELO 2</p>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito