Overriding inline !important CSS with Javascript code snippet

  • deulseobs

    (@deulseobs)


    4 years ago

    There’s a piece of inline code that is: 

    <style type="text/css" id="illdy-about-section-css">
#header.header-front-page {background-image: url(image.png) !important;}
#header.header-front-page {background-position-y: center;}
#header.header-front-page {background-position-x: center;}
#header.header-front-page {background-size: auto !important;}

    on a WordPress site and I want to get the ‘background-size’ to “100%” with or without the “!important”.

    I’m using Code Snippets, and in the code box, I entered:

    function wpb_hook_javascript() {
  if (is_front_page ()) { 
    ?>
        <script type="text/javascript" src='jquery.min.js?ver=3.5.1'>
          // your javascript code goes here
			
			$('#header.header-front-page').css('background-size', '')
			$('#header.header-front-page').css('background-size', '100%!important')

        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

    But nothing changes in the HTML/CSS or browser inspector. What could be wrong here?

    • This topic was modified 4 years ago by deulseobs.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter deulseobs

    (@deulseobs)

    This also doesn’t not work, if I wanted to specify a media query for that element:

    function wpb_hook_javascript() {
  if (is_front_page ()) { 
    ?>
        <script type="text/javascript" src='jquery.min.js?ver=3.5.1'>
		if (matchMedia("(max-width: 760px)").matches) { 
			// the viewport is at most 760 pixels wide 
			$('#header.header-front-page').css('background-size', '100%!important')
        }
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');
    Plugin Author Shea Bunge

    (@bungeshea)

    I don’t think you can combine a script src with inline content. I’d recommend separating the two:

    <script src="jquery.min.js?ver=3.5.1">
<script>
// your javascript code goes here
</script>

    Also, I’d check where you’re getting jQuery from and that it’s linking correctly. It’s probably a good idea to use the jQuery version that comes bundled with WordPress instead of using a different version.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Overriding inline !important CSS with Javascript code snippet’ is closed to new replies.