2

Galera, possuo um site que toda a cor dele é em dourado e preto. Algumas cores de fonte em dourado, logo em dourado, barra lateral dourada, etc...

Como faço para, quando eu colocar um botão na lateral do meu site, escrito "versão roxa", e o visitante clicar neste botão, mudar esse CSS atual, e substituir por um novo CSS que terei criado, numa versão do site inteiro na cor "roxa".

Como se o site tivesse 2 estilos de cores, e o visitante pudesse escolher qual cor ele quer navegar no site.

1 Resposta 1

0

Você pode usar o comando do jquery .attr("href") com o comando .on("click") no botão, para alterar o link do seu css.

Veja um exemplo que fiz abaixo, onde criei dois links um para alterar o meu tema de dourado para roxo, e outro para alterar o tema para azul.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link id="temacss" href="temadourado.css" rel="stylesheet" type="text/css"/> 
</head>

<body>

<div id="quadrado">Bla bla bla</div>

<a href="temaroxo.css" class="trocacssbtn">Trocar para Roxo</a>
<a href="temaazul.css" class="trocacssbtn">Trocar para Azul</a>


<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

<script>
$(document).ready(function() {
    // Ao pressionar qualquer link ou botão que contém
    // a class "trocacssbtn", executar a função.
    $(".trocacssbtn").on("click", function() {

    // Pega o atributo do link clicado para definir qual será o valor a ser trocado.
        var cssclass = $(this).attr("href"); 

       // Faz a troca do arquivo de css tema
       $("#temacss").attr("href", cssclass);

       // Retorna false para manter na mesma tela e finalizar a função.
        return false;
    });
});
</script>
</body>
</html>

temadourado.css

div#quadrado {
    width: 500px;
    height: 500px;
    background-color: #ff9600;
}

temaroxo.css

div#quadrado {
    width: 500px;
    height: 500px;
    background-color: #783486;
}

temaazul.css

div#quadrado {
    width: 500px;
    height: 500px;
    background-color: #072794;
}

Unica coisa que você precisa pensar depois é como você quer fixar isso. O usuário vai mudar ao clicar, mas se atualizar a página voltará tudo original.

Então você tem que ver na sua utilização, qual melhor maneira de atualizar e manter as alterações. Tem gente que utiliza cookies, outros salva as preferencias em banco de dados no cadastro do usuário. Ai é com você.

12
  • Bom, acredito que não precisaria fixar isso... Se atualizar, nao tem problema em voltar a cor original. Só estou pensando uma coisa, meu site vai ser one page isso facilitaria muito, porém, ainda assim tem algumas paginas secundarias. E quando eu clicasse no link pra acessar ela, tipo o botao "biografia", aí iria acessar com o fundo dourado ainda... O que vc aconselharia eu fazer para quando eu clicar no botao do tema, ir o tema para todas as paginas (claro que, terei que criar um arquivo css para cada pagina do site)
    – user96296
    10/11/2017 às 13:05
  • Por exemplo se vc estiver usando PHP, vc pode salvar numa session a op escolhida pelo usuario e dai ao ir para as paginas secundarias carregar a op da session 10/11/2017 às 18:41
  • E eu faria um pouco diferente do @Fernando VR eu n criaria 2 css, eu iria trabalhar com o jQuery fazendo 1 class adotar a cor a partida da escolha do usuário por exemplo uma class $(.tema).css("background-color", "#FFFFFF"); acredito q iria reduzir o codigo e ficaria menos trabalhaso caso vc queira colocar no futuro X cores 10/11/2017 às 18:45
  • mas eu iria mudar o background image de umas divs, colors de algumas letras, ia dar muito trabalho... ainda assim prefiro a mudança de css completo
    – user96296
    10/11/2017 às 19:37
  • @LukasMonteiro, você vai usar html puro com javascript ou vai usar em php também?? Se usar o php facilita muito, pq vc pode setar o cookie em javascript quando trocar o tema pelo jquery (w3schools.com/js/js_cookies.asp) e recuperar via php em todas as páginas colocando algo do tipo: <link id="temacss" href="<?php echo (!empty($_COOKIE["meutema"])) ? $_COOKIE["meutema"] : 'temadourado.css'; ?>" rel="stylesheet" type="text/css"/> 10/11/2017 às 20:28

Você deve fazer log-in para responder a esta pergunta.