Changing the theme of a website

Asked

Viewed 831 times

-1

I need to create themes for my site, when entering the site the person clicks on a button to switch to the chosen theme, but when clicking the button has to change beyond the css, the images that contains on the site (which in the case are the images of the menu buttons)It is that neither vc use joomla or wordpress and change the theme of the site, only that the problem is that I can not use a CMS to make the site, so I have to do everything at hand, but so far I have not found anything that would help me to change the whole site theme with a click. Can anyone tell me how I can do this? Thank you!

I put the codes and images zipped in the Dropbox, I think so can understand better what I need.... Dropbox

javascript html css
  • 3

    Hi, Tassiana, welcome to [en.so]. Please provide more details about the code you use on your site. Use any databases? Can you [Edit] the question whenever you need to add information.

  • The answer depends on how you implement the "theme" on your site, for example, does it have images? Or would they just change the colors? Is the code all in the CSS? Or would you have to change some code also on the page itself (change image tags, for example, etc)? Etc...

  • 1

    Nice edition, but just one more detail: better include here the relevant code. Check out the guide on how to create a Minimum, Complete and Verifiable Example; is a very useful technique to help in solving problems.

  • @Kazzkiq yes, in addition to the css has images by the site that need to be modified, I edited my question and put the link to download in Dropbox the zipped file folder of the site that I am making

3 answers

3

Place the images of each theme in a separate folder.

In javascript create a function that goes through all the images of the site, which has a certain class (in the example the class .images-relative) and send as parameter the name of the folder of the given theme.

Below follows a script (jQuery) that traverses all images of a certain class:

$(".imagens-relativas").each(function(index){
    var src = $(this).attr("src")
    var photoName = src.substr(src.lastIndexOf("/"));
    $(this).attr("src", pastaTema+"/"+photoName)
  });

1

Wouldn’t it be better to put button image rules in CSS as well? This way, in addition to changing the CSS, you can change all the properties of your entire site and do various themes.

But if you want to keep the inline(tag) properties, it would be a great idea to use Javascript. Prefer pure Javascript and use classes in your HTML tags.

Example in JS (very basic, changes text colors)

  • yes, I want to use javascript to exchange the css and images of the site, but I need to change all this by clicking on a button to select the theme, then click and exchange all the "face" of the site including the internal pages

  • I think it would be interesting if you started studying some jQuery, or better yet, some programming language for web (PHP or Java). Exchanging CSS for pure Javascript (or even jQuery) is laborious, and generally not worth the effort.

  • yes yes, I am aware of that, the problem is that the time I need to do this is short, I have a deadline =/, I am a front-end web designer, and I am now starting to do back-end

  • So based on the @Andrécastro solution, it’s one of the fastest ways to change component styles. I can’t help you much because I only know how to change entire style sheets by PHP or Java.

  • yes, I’m trying to develop a solution on top of what he told me, but I still can’t make it work

0

You can use jQuery to add and remove CSS tags:

Behold this example in Jsfiddle:

<style id="css">
body { font-size: 7pt; }
</style>

Um texto qualquer.

<button id="botao">Clique-me!</button>

And Javascript:

var css = '<style id="css2">body{ font-size: 32pt; }</style>';

$("#botao").click(function() {
  $("#css").remove();
  $("head").append(css);
});

By clicking the button a tag old is removed and a new one is added.

Tip: Instead of what I did above you can point to an external CSS

$("head").append('<link href="MeuCSSExterno.css"></link>');
  • 1

    it would help me a lot if it was just the css to change =/

Browser other questions tagged javascript html css

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