HTML / CSS 自定义 PayPal Wordpress 页面上的按钮

Question

For my Checkout page I am trying to align the paypal "quick check-out" button to the left. With Firebug I found the CSS part that is yet set to center. If I type in "left" it does move to the left. So I copied the rule to my custom css field in Wordpress

#zoid-paypal-button-1a79a61bc2.paypal-button-size-responsive {
text-align: left;}

That first bit isn't static though which is probably why it is centered again after refreshing the page. How can I make it permanent?

Answer 1

Use one of the classes for the relevant element, rather than the dynamically-generated button ID, such as:

.paypal-button-size-responsive {
  text-align: left;
}

The problem is that there's an inline selector with greater specificity in the folded <style> element in your screenshot. #zoid-paypal-button-1a79a61bc2.paypal-button-size-responsive will always override .paypal-button-size-responsive . You need to look at the plugin that generates your checkout page and see where those styles are inlined and remove it there.

Alternatively, and this isn't really recommended, you could use the !important rule to overrule the more specific ID selector if you're having trouble tracking it down, ie text-align: left;important; . That's a bad habit to pick up, however, as it makes maintaining your CSS more difficult in the long run.

If you can comment or edit your question to include what plugin you're using that generates the code in question, I'll see if I can give you more specifics on where you can find the <style> element in question.