To change the div style in css file

2 Views

I want to change the background color with a background image in my plugin. While selecting the radio button in wordpress. when changing the color of the div it should update the css file.

I want to update

Read More
.wrap_div{
    background:#9CF;
    float: left;
    width: 584px;
}

the div style with the below one. 

   .wrap_div{

            float: left;
            width: 584px;           
        background-image:url(./images/back2.png);    

    }

How can I make changes in my css file. Any help is appreciated.The wrap_div is a user side div.I am using this code in admin side and I want the changes should appear in user side.

Post Views: 2

Related posts

Leave a Reply

6 comments

  2. You can inject the style in your document <head> directly using the wp_head hook.

    function print_styles(){
echo '<style>';
#write PHP code to display your styles here
echo '</style>';
}

add_action('wp_head', 'print_styles');

  3. create a php file with css structure which you will update from server and import it in your style.css with @import 'css/style.css.php?c=1';

    Your php file should look like this:

    <?php

header('Content-Type: text/css');

.wrap_div {
 echo $styles'
}
?>

  4. update your css file by

    .wrap_div_radio_change{
margin:0 auto; 
width:410px; 
height:460px; 
background-image:url(./images/back2.png);    
clear:both; 
border:#000000 solid 1px;
}

    And use this script

    if($('#radio_button').is(':checked')) {//Id of you radio button
   $("#your_div").removeClass('wrap_div');//Id of the div which has the color to change Which will remove the initial clas of the div and the next line add a new class to the div
   $("#your_div").addClass('wrap_div_radio_change');
  }

  5. You want to use following code.

    <script type='text/javascript'>

jQuery(document).ready(function(){

 jQuery('input:radio[name="radioname"]').change(function(){

 jQuery('.wrap_div').css('background','');
 jQuery('.wrap_div').css('background-image','url(./images/back2.png)');
});

});

</script>

    Also add other css style like this using .css.

  6. By using JavaScript, you can try something like this:

    <!DOCTYPE html>
<html>
<body>
    <style type="text/css">
    .red{
        background-color:red;
    }

    .blue{
        background-color:blue;
    }

    .green{
        background-color:green;
    }
    </style>
    <script type="text/javascript">
        function changeColor(color) {
            document.getElementById("wrap_div").setAttribute("class", color.value);
        }
    </script>
    <div id="wrap_div">
    Red <input type="radio" value="red" name="color" onClick="changeColor(this);"><br>
    Blue <input type="radio" value="blue" name="color" onClick="changeColor(this);"><br>
    Green <input type="radio" value="green" name="color" onClick="changeColor(this);">
    </div>
</body>
</html>