Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the CSS of entire page/website on click?

Is it possible to have 3-4 CSS on a page, and then on any event, say click, change the css for entire webpage. This way we can give our user the ability to change the theme. I know we can change the css of an element by:

$("#myElementID").removeClass("class1").addClass("class2");
like image 296
Rakesh Juyal Avatar asked Mar 14 '10 16:03

Rakesh Juyal


People also ask

How do I get the whole CSS from a website?

First, hover over the element you want to copy. Then, right-click on it and choose the option “Inspect”. On the left side is the HTML DOM tree, and on the right side, the CSS styles of the selected element. Having the right element selected on the HTML DOM tree, right-click on it and choose “Copy” > “Copy styles”.

Which CSS style we can use to change the entire look of website?

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

How do I target a body in CSS?

To declare style rules for the body of a webpage, you will need to create a CSS rule for the body tag selector. These rules will then be applied to all elements that are placed inside the opening and closing <html> tags that you added to the index.


1 Answers

Yes, it is possible. Typically what you would do is write a JavaScript function that will change, or add, or remove a style sheet from the <head> of the document. To make the experience a little better you'll typically store the user's preference in a cookie. There's an article on A List Apart that show how to implement this.

And of course, you can do this with jQuery... you may want to check out the source of jStyler.

like image 68
Zack The Human Avatar answered Nov 02 '22 16:11

Zack The Human