How to switch between 2 style sheets?

Asked

Viewed 716 times

2

Guys, I own a site that all the color of it is on gold and black. Some font colors in gold, gold logo, gold sidebar, etc...

How do I stop, when I put one button on the side of my website, written "purple version", and the visitor click on this button, change that CSS current, and replace by a new CSS that I have created, in a version of the entire site in the color "purple".

As if the site had 2 color styles, and the visitor could choose which color he wants to browse the site.

javascript jquery html css

1 answer

1


You can use the jquery command .attr("href") with the command .on("click") on the button, to change your css link.

See an example I made below, where I created two links one to change my theme from golden to purple, and another to change the theme to blue.

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>

themed.css

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

css theme.

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

temaazul.css

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

The only thing you need to think about later is how you want to fix it. The user will change when clicking, but if you refresh the page will come back all original.

So you have to see in its usage, what better way to update and maintain the changes. There are people who use cookies, others save the preferences in the database in the user’s registration. There it is with you.

  • Well, I don’t think I’d need to fix it... if I upgrade, it’s okay to go back to the original color. I’m just thinking one thing, my site will be one page that would make it much easier, however, still have some secondary pages. And when I clicked on the link to access her, type the button "biography", then would access with the golden background still... What you would advise me to do for when I click on the button of the theme, go the theme to all pages (of course, I will have to create a css file for each page of the site)

  • For example if you are using PHP, you can save a user-chosen op in a Session and then by going to the secondary pages load the Session op

  • And I would do a little different from @Fernando VR I would n create 2 css, I would work with jQuery making 1 class adopt the starting color of user’s choice for example a class $(.tema).css("background-color", "#FFFFFF"); believe q would reduce the code and would be less work if you want to put in future X colors

  • but I would change the background image of some Ivs, some letters Olors, it would take a lot of work... still I prefer the complete css change

  • @Lukasmoiro, will you use pure html with javascript or will you use it in php too?? If using php makes it much easier, pq vc can set the cookie in javascript when changing the theme to jquery (https://www.w3schools.com/js/js_cookies.asp) and recover via php on all pages putting something like this: <link id="temacss" href="<?php echo (!empty($_COOKIE["meutema"])) ? $_COOKIE["meutema"] : 'temadourado.css'; ?>" rel="stylesheet" type="text/css"/>

  • I have not yet put any php of the site, but I will have to put pq in the "contact" section will have a form to be sent to my email. The site I’m creating won’t have a "customer registration" session or something like .

  • If you do not use php, and you want everything in pure html. You must set the javascript cookie when changing the theme, but when you change the page when you finish loading it, you must pull the cookie and make the change again with the q cookie set. The q in my opinion is bad, because the page will blink every time, showing the original colors and changing color when loading the entire page. With php vc already loads right into the chosen theme.

  • Try to learn a little php, you will like it a lot, and it will make your life a lot easier. Here’s a link to cookies in php: http://php.net/manual/en/function.setcookie.php

  • I was thinking the following: Is it possible with a button that I click there at the top corner of my site refresh the page and enter a new HTML + CSS? Pq there in the new html that would enter I put the links of the menus directing to the page already formatted with the theme color.

  • There are thousands of ways to do it. In this scheme you say, it could be by folder. For example: www.seusite.com.br/index.html -> default theme. And when changing theme go to another folder of type: ` www.seusite.com.br/temaroxo/index.html. But I do not advise, because you will have much more work, if your idea is to change only the css. If you want to change some text in html you will have to make the change in all folders q created. q will give you a lot of work. You would solve all this easily with PHP.

  • I think I will have to make this method more laborious, because technically I would not have to change only the css, since as soon as I put in my site is by html as a < img >, then I would change from "golden" image to "purple image"

  • Still you would solve easy with php, in the same footprint as I mentioned above: <img src="<?php echo (!empty($_COOKIE["meutema"])) ? $_COOKIE["meutema"].'logo.jpg' : 'temadouradologo.jpg'; ?>" />. Give a search in php friend. You will see that will save your life kkk

Show 7 more comments

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.