Home/ Questions/Q 8350623
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T08:22:20+00:00

I have a WordPress custom theme that I want to have various alternative background

  • 0

I have a WordPress custom theme that I want to have various alternative background colours based on a dropdown menu. I was going to use alternative stylesheets just to change the background colour of my theme, but it just seems counter-productive. I was also going to use classes to change the background colour, just I’m not too sure which is the best way to go about changing the background colour based on a selected colour.

Example

If I choose “blue” on the dropdown menu that I’ve created, it will change my website’s background to blue. I’ve got all the css in place. I’m now just wondering what the best way would be to go about doing this. I have classes in place for Internet Explorer so I’m not sure how to go about using classes if I do decide to use classes. I guess I could use jQuery?

Sorry for the abrupt question, but I’m not quite sure which would be the most efficient way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a way of achieving this in jQuery. You could choose to add a class to the body instead if you like, but remember to remove other classes first.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#colour').change(function(){
        $('body').css('background',$(this).val());
      });
    });
  </script>
  </head>
  <body>

    <select id="colour">
      <option value="">Please Select
      <option value="#00F">Blue</option>
      <option value="#F00">Red</option>
      <option value="#0F0">Green</option>
    </select>

  </body>
</html>

    or via classes:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#colour').change(function(){
        $('body').removeClass('blue red green').addClass($(this).val());
      });
    });
  </script>
  <style type="text/css">
    .blue { background: #00F; }
    .green { background: #0F0; }
    .red { background: #F00; }
  </style>
  </head>
  <body>

    <select id="colour">
      <option value="">Please Select
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
    </select>

  </body>
</html>
    • 0