Overriding element.style

[mintertweed]

Here is the website in question. There is padding-right: 16px; on element.style for the body. Now, I just did figure out how to override element.style by using div[style] and adding !important to the property. So, I simply put this in:

body div[style] {
    padding-right: 0.625em !important;
}

And nothing happens. I went and inspected the element and sure enough there’s still 16 pixels of padding on the right. I want the scrollbar to be ten pixels or 0.625 ems with a base of 16 pixels. If I make the scrollbar 1 em, everything looks fine, so this is getting into the nitty-gritty. How do I make the padding-right 0.625 ems?

[TheDoc]

This seems very confusing. Can you provide a link? You should be able to override inline styles simply by using !important.

[mintertweed]

Here is the link. I was using Chris’ method here. It worked to style the scrollbar, but now that I’ve styled it, I need to make the padding on the right ten pixels rather than the original 16 pixels and the above code does nothing in way of doing that.

[mcjohnst]

body {
padding-right: 0.625em !important;
}

I’d also take a look at pruning scripts from enqueue_scripts. You’re loading a ton of assets that are not being used.

[mintertweed]

@mcjohnst, yep, that did the trick. I guess I was over-thinking it. And as far as the enqueue_scripts is concerned, I’m using a theme I bought from ThemeForest and will clean it up once I finish adding everything.

[TheDoc]

Always double check the dates of articles. May 2009 is a long time ago in web development ;)

[Author]

Posts