Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
>
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.
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>
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?