Overriding defaut hr styles

[michelle]

It’s been a while — seven years — since I’ve done any of this, and apparently the hr purpose and implementation has changed, IT is now a strictly a semantic separator (or something along those lines), vs. any dual purpose such as decorative use.

All well and good, but I’m trying to customize the default hr CSS. I’ve searched the Weaver Xtreme documentation, Googled, and now this forum. Nothing I’ve discovered and tried is working.

I’ve entered what I want
hr {border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0);}
in the Weaver Extreme global options custom CSS field — no change.

When I inspect the page the hr element is: <hr class=”wp-block-separator has-alpha-channel-opacity hr”>, but I can’t find the access to any stylesheet to re-style that.

Several mentions of various plug-ins to accomplish this and other block editing enhancements were mentioned by some of the search return articles. If this is how these things are done now, is there a specific plug-in that plays best with Weaver Xtreme?

And is there anything else about the new status I should know? (I feel really stupid right now, but I guess that’s to be expected after seven years away.)

Thank you.

[Weaver]

Easiest thing would be to add a !important right after every rule before the ;.

For example: hr {border: 0 !important; ….}

This should override all other hr rules. If that doesn’t do it, then a link to a page on your site with hr would be helpful.

[michelle]

Hi Weaver,

I remembered the !important option after posting here and gave it a try as shown below. Still no change.
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0);
!important
}

Here is the page: https://www.studioshellishelli.com/4163-2/.

The whole site was done before the block editor and some of the pages/posts are not displaying correctly. This is the page I am trying to reconstruct/bring up to date:
https://www.studioshellishelli.com/wordpress-website-affair-with-the-james-documentary-film/.

Thank you,

Shelli

 

[michelle]

P.S., When I put the same rule in the custom CSS area of the WP Recipe Maker plugin, it works. But only on the recipe cards.

[scrambler]

This reply has been accepted as the best answer.

The important goes inside the property

hr {
border: 0 !important;
height: 1px !important;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) !important;
}

[michelle]

Got it, thank you Scrambler! I remembered the !important, just not that it had to go after each item. Duh.

And, I learned something completely new when researching why the !important 85% width option didn’t take …
sizing relative to the root element. So that was exciting. 🙂

[Author]

Posts