[Resolved] Horizontal Rule CSS

[Bill]

Hello,

I am using the GP child theme, the addons and Beaver Builder. I see the Hr tag already has a background color assigned in the .css of the parent theme. I tried setting the background-colo to inherit but it just disappeared. Is there somewhere I am missing to remove the color attribute?

Thanks!

[Tom]

Hi there,

Try this CSS:

hr {
    background-color: transparent;
}

[Bill]

Hi Tom,

I tried that as well and it also disappeared.

[Tom]

What are you trying to do with it exactly? You can set that background-color to whatever you like.

[Bill]

Hi Tom,

The problem I am having is that I use it on many different backgrounds. For example, I am using it with a pic in the background and then I use it on a plain white page. So, in one instance it will be white and another be black. I can div it but it will be a pain for a client. I was just hoping it inherited the text color.

Btw, I am loving this theme!

Thanks again.

[Tom]

Hmm, there’s no way to tell it to inherit the text color I’m afraid.

By default it’s set to this:

hr {
	background-color: rgba(0, 0, 0, 0.1);
}

Which means it will be black, but at 10% opacity. This typically allows it to blend into any background color.

[Bill]

Ok, I got it. I used this in the Simple css and now it inherits the text color.

hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

• This reply was modified 7 years, 10 months ago by Bill.

[Tom]

Awesome! Glad you found a solution. Thanks for sharing 🙂

[Author]

Posts