Enable users to customize CSS style elements using a dropdown selection tool?

My website needs a theme but I can't decide on just one. Instead, I want to give the user the option to choose a theme from a dropdown menu. When an option is clicked, it will change the background image, color, and positioning of the site.

For example, selecting the "Mario Bros 3" theme would result in:

background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;

And choosing the "Zelda LTTP" theme would have these settings:

background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;

I envision this feature as a dropdown menu that saves the user's choice so that it applies every time they visit the site.

I'm not sure how to implement this, so any help would be greatly appreciated!

cssdrop-down-menuthemes

Answer №1

To choose different themes for the body, you can categorize them by classes. Here's an example:

body.smb2{
    background-image:url('smb3.jpg');
    background-repeat:repeat-x;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: #6899f8;
}
body.zelda{
    background-image:url('zeldalttp.jpg');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: Black;
}

You can then set the body class using JavaScript (or server-side) and store the choice in a cookie.

If you put the CSS in a separate file, you can change it like this:

HTML:

<select id="select">
    <option value=""></option>
    <option value="smb2">SMB 2</option>
    <option value="zelda">Zelda</option>
</select>

Pure JS:

var sel = document.getElementById('select');
sel.onchange = function(){
    document.body.className = sel.value;
};

Or with jQuery:

$('select').change(function(){
    $('body').prop('class',$(this).val());    
});

The issue on your website is that the body already has multiple other classes. Using className will overwrite all of them. One solution is to save the old classes and add the new ones like this:

var saveclass = null;
var sel = document.getElementById('select');
sel.onchange = function(){
    saveclass = saveclass ? saveclass : document.body.className;
    document.body.className = saveclass + ' ' + sel.value;
};

Or with jQuery:

var currentclass = null;
$('select').change(function(){
    $('body').removeClass(currentclass).addClass($(this).val());
    currentclass = $(this).val();
});

Answer №2

When examining the theming structure of WordPress or various online forums, you'll notice they typically utilize separate css files based on user preferences. This approach can be justified when there are significant differences in styling between themes, ensuring that unnecessary css is not served to the client.

If the variations in styling are minimal, following Andy's suggestion would be effective. It's also important to store the user's choice in a cookie so their preference is saved even without a server-side profile, eliminating the need for them to manually select the desired theme each time they visit the site.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing the stacking of numerous animations triggered by jquery events

Hey there! I'm currently working on a webpage and utilizing the Transit library for 3D rotations and other CSS transformations. On this page, I have three links that are set to scale up by 1.2 times when hovered over. Everything seems to be working we ...

jqueryhtmlcssanimation

What is the best way to remove the underline in Material-UI while still keeping the selection feature intact in Autocomplete?

Seeking to develop an Autocomplete feature with the TextField component while eliminating the underline. I successfully disabled the underline by utilizing InputProps={{ disableUnderline: true }} in the TextField properties, however, it also eliminated t ...

javascriptcssreactjsmaterial-uiunderline

Easy ways to manipulate the style of array components in Vue.js

Hey there all you programmers, I'm reaching out to see if any of you have insight on how I can modify the style of a specific component within an Object array. This is the code snippet: <template> <div> <ul> <li v-fo ...

javascripthtmlcssvue.jsvue-component

Having trouble with aligning the wrapper div

I am looking to create a div with text inside it. Within that div, I also want another div that matches the same position and size. I have searched on various forums for a solution, but none of them seem to work when even a small detail is different. Curr ...

htmlcss

Utilizing Vue CSS variables as inline styles

Incorporating CSS variables in my component has allowed me to dynamically set the width of a div based on computed data within the setup() setup(props) { const progressBar = PositionService.getProgressBar(props.position); const progressWidth = `${p ...

cssvue.jscontent-security-policy

When the page loads, the HTML side menu will automatically scroll to the active item in a vertical

My website features a vertical side menu with approximately 20 items. The issue I am facing is that when a user clicks on an item, the destination loads but the side menu must be manually scrolled to find the active item if it's located at the bottom ...

javascripthtmljquerycss

Create two div elements that dynamically overlap two additional div elements on a responsive layout

https://i.sstatic.net/hdcKn.png I'm really intrigued by the idea of making divs overlap each other in a unique way. I wonder if it's possible and if there are techniques to make this responsive using Bootstrap or another library. Could the divs a ...

javascripthtmlcssbootstrap-4responsive-design

Using the Strikethrough Feature in React

Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...

javascripthtmlcssreactjs

What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

I am looking for a way to dynamically change the color of a class based on the transaction data in a table. import React from "react"; import Table from "react-bootstrap/Table"; import "./TableComponent.css"; const TableComponent = ({ Movement }) =&g ...

javascriptcssreactjsbootstrap-4react-bootstrap

What is the typical method for identifying a mobile email application?

Is there a way to detect the specific mail client being used to open an email and format the message accordingly? Similar to how websites have mobile-friendly versions that load based on user-agent detection, is it possible to customize the email display f ...

iphonehtmlcssemailmobile

Ways to dynamically set a background image URL using solely HTML and CSS

I am looking for a way to dynamically assign the url of the background-image through CSS based on attributes defined in HTML tags. I have tried using both attr() and var(), but neither seem to work. I prefer not to use JavaScript as the URL may change late ...

htmlcsscss-variables

Is it possible to apply a styling to a table data cell based on the table header relationship

Let's say I have a table header with content like this... <th> <div class="text-left field-sorting " rel="local_inventory"> Local inventory </div> </th> <th> <div class="text-left field-sorting " rel="something el ...

javascriptjqueryhtmlcss

PHP loop to change the color of the initial line

I have a challenge where I am trying to read the content of a txt file using PHP and display it on a webpage. Everything is working smoothly in terms of loading and displaying the content. However, my goal is to have each word displayed in a different colo ...

phphtmlcss

Is there an issue with the vertical alignment of two adjacent empty inline blocks?

body { border: 2px solid black; height: 100px; } div { vertical-align: middle; display: inline-block; width: 50px; height: 50px; } .a { border: 2px solid red; margin-top: 20px; } .b { border: 2px solid green; } <!DOCTYPE html> & ...

css

Is there a way to make all DIVs in the same class have the same height as the tallest div?

I have 3 identical divs with an auto height value. How can I set the height of all divs in the same class to be equal to the highest div's height? Same Class Div Thank you in advance. ...

htmlcss

Guide to implementing personalized CSS on WooCommerce product pages specific to mobile screen resolutions

As a beginner in wordpress, I am looking to customize the CSS of my single product page specifically to relocate the "Sale" icon. Despite trying the code below in custom CSS, no changes are being reflected. @media only screen and (max-width: 767px){ .sin ...

csswordpress

Discover the true width of the unordered list structure Forest

One of my projects involves creating family trees using CSS and unordered lists. It works great, except when the tree is wider than the screen, causing it to wrap awkwardly. To solve this issue, I implemented the following CSS: #treewrapper { margin: 10px ...

css

Why isn't the background color displaying for the child text element during animation?

My search boxes are arranged in a grid layout with the use of the display: grid property. When I click on or focus on the <input type="text"> elements in column 1, the text elements within the <span> tag with class names placeholder2, ...

htmlcssflexboxcss-animations

What is the best way to enable a CSS table column to overflow the table while having a width of 100%?

I am faced with a CSS table dilemma where I have two columns, but one of them is hidden by setting its width to 0. The second column takes up the entire table by being set to a width of 100%. However, when the first column is shown (controlled by a checkbo ...

htmlcss

Spin picture and optimize margins

I need help rotating an image by 90 degrees that is positioned between two boxes. The issue I am facing is that the rotated picture overlaps with the two boxes in this scenario. Example 1: Incorrect formatting CSS: .box{ height:50px; width:200px ...

cssimagerotationoverlapadjustment