Customising CSS within HTML

Question

I've got a Wordpress site using WooCommerce, and I've got a plugin that isn't working how it should. So, I managed to find a particular line in the PHP code that triggers when I need it to do something my way. Problem is, I need to change some CSS styling within the PHP code.

How exactly would one do something like this?

<woocommerce class="a.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
<woocommerce class="button.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>

Mind you that code above is incorrect. It is just an example of what I'm trying to achieve.

As for a more detailed breakdown, I'm trying to change/override a CSS style that already exists on my web page. Overall, the trick is to change some CSS style that already exists into doing something else. The CSS for the item I found (from Firefox's HTML debugger/inspector) is:

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt

And I need it to apply these styles instead:

background: #FF8282;
pointer-events: none;

If you need more information, just let me know.

Thank you.

MrWitts · Answer 1 · 2016-03-21T04:23:29.063

2

I think that adding an !important behind would do the trick.

{ background: #FF8282 !important; pointer-events: none !important; }

Also, make sure u only link this after all other css occurences.

Would this help?

edited Mar 21 '16 at 04:23

answered Mar 21 '16 at 04:21

MrWitts

135
1
10

But how do I call it within the HTML? – t0rxe Mar 21 '16 at 04:21
href being the file location relative to the html file this line is in. :) – MrWitts Mar 21 '16 at 04:23
Sorry, I should have mentioned that the stylesheet is already linked into the page. I need to only trigger this CSS event at a particular time. Are you suggesting I just make a new stylesheet and link it in at the correct/needed time and then call it? – t0rxe Mar 21 '16 at 04:25
oh, if thats the case, i would think you would need jQuery to change the css dynamically. http://stackoverflow.com/questions/2157963/is-it-possible-to-listen-to-a-style-change-event – MrWitts Mar 21 '16 at 04:27
Gosh, now it's getting overly complex. Haha. Thanks for your help :) – t0rxe Mar 21 '16 at 04:30
pleasure. probably if you rephrase your question and provide some more info on the problem you have (triggers and whatnot), it would be easier to fix. :) – MrWitts Mar 21 '16 at 04:34
Sure, I will update my initial post now with more detailed information. – t0rxe Mar 21 '16 at 04:37

score 1 · Accepted Answer · answered Mar 21 '16 at 07:57

SOLVED

I included in the logic that was tripping some PHP code:

include '/wp-content/themes/my_theme/400.css';

And that CSS file (400.css) contained:

<style>
    .woocommerce a.button.alt { background: #FF8282 !important; pointer-events: none !important; }
</style>

Thank you everyone for your help. Much appreciated.

score 0 · Answer 3 · answered Mar 21 '16 at 04:25

0

Have you tried adding !important at the end of your css line ? This will force your new property to overide the one from your plugin :

background-color : red !important;

answered Mar 21 '16 at 04:25

Mathieu Lavoie

41
6

No, I have not, and I will try it, but first, how do I trigger this CSS event when a particular situation happens? I mean, that's what this `` code is for, but is it correct to use 'as is'? – t0rxe Mar 21 '16 at 04:28
If I understood correctly, I would use Jquey like it's been said in the other answer. Create a class that override the others with the !important and use the addClass() method of Jquery when needed. You can also use the removeClass() method depending on what you are trying to achieve. – Mathieu Lavoie Mar 21 '16 at 04:45
Thanks. I will look into that. I've never used JQuery, so I'll give it a shot. – t0rxe Mar 21 '16 at 04:46

score 0 · Answer 4 · answered Mar 21 '16 at 05:07

I guess something like this is your looking for. Just comment if you want modification.

$('button').click(function(){
  $('div').addClass('changed');
});

.woocomerce{
  background: cyan;  
}

.changed{
  background: #FF8282;
  pointer-events: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change CSS</button>
<div class="woocomerce">
Hello World
</div>

Customising CSS within HTML

4 Answers4