I am presently focusing on my very own Wordpress theme. I figured it would be awesome to possess a dropdown box within the sidebar that you can pick different styles, and will also alter the page background, border colors, etc a little.

The truth is, for just one theme (the default one) I've Javascript during my header.php file in which the header image can change each refresh. I would like this header image disappear when switching stylesheets, however it just overlaps another one. How do you change this?

If you wish to discover for yourself, this area is incorporated in the right sidebar underneath the blue buttons. This really is my testing website. Disregard the 000webhost stuff.

http://trainman1405.site11.com/wordpress/

Thanks!

The overall solution here's to define all your styles in a single sheet, but namespace them so that you can simply alter the class around the body and also the new styles will require effect. (You might define them in separate sheets, while using namespaces, and just reference every sheet inside your <head>.)

For instance, some CSS:

body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }

After which when you wish to alter it (using jQuery, although plain Javascript could do that job too):

$('#theme_select').change(function()
{
   $('body').removeClass('green').removeClass('red'); // remove existing classes
   $('body').addClass($(this).val()); 
});

it appears like you could utilize a javascript library its known as jquery. You could utilize that to cover and display a brand new image e.g

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 

<script type="text/javascript">



function piczotheme() {

$("defualttheme").hide()
$("mountaintheme").hide()

//and then show load add your picture

$('#defualt').css("background-image", "url(url of the picture)");




}


</script>

and you have to setup a control button or something like that to trigger this effect

so...

<button onclick="piczotheme()"> click </button>