hr styling

[feedyourhead]

How/where do you style [hr] for posts? 

I'd like for it to be 1px solid #a6a6a6 instead of the default, if possible.

[Retread]

If you want all hr element on the forum to appear that way, you could add this to the bottom of your style sheet:
hr {border-top:1px solid #a6a6a6}

If you want only some hr elements in posts to appear that way, you can use inline styling in the BBCode for the ones you want to appear that way:
[hr style='border-top:1px solid #a6a6a6']

[feedyourhead]

Thank you for your help!

[feedyourhead]

Hmm... Actually, neither worked. Does that mean there's a wonky bit of code impeding it somewhere?

Test post: thedhp.proboards.com/post/3100

[Kami]

Oct 28, 2019 7:38:57 GMT -8 feedyourhead said:

Hmm... Actually, neither worked. Does that mean there's a wonky bit of code impeding it somewhere?

Test post: thedhp.proboards.com/post/3100

Retread had the right idea, but horizontal rules have some default styling that you have to override first.

Try:

hr { height: 0; margin-top: 1em; margin-bottom: 1em; border: 0; border-top: 1px solid #FF0000; .box-sizing(content-box); }

Change #FF0000, 1px, and solid to whatever colour, thickness, and style you want.

[feedyourhead]

Oct 28, 2019 8:36:29 GMT -8 Kami said:

Oct 28, 2019 7:38:57 GMT -8 feedyourhead said:

Hmm... Actually, neither worked. Does that mean there's a wonky bit of code impeding it somewhere?

Test post: thedhp.proboards.com/post/3100

Retread had the right idea, but horizontal rules have some default styling that you have to override first.

Try:

hr { height: 0; margin-top: 1em; margin-bottom: 1em; border: 0; border-top: 1px solid #FF0000; .box-sizing(content-box); }

Change #FF0000, 1px, and solid to whatever colour, thickness, and style you want.

That mostly did the trick, thank you!! The color is still the same, I think, but the thinner line is much nicer.

[Kami]

It looks like you're using a6a6a6, which is this. It also looks like you're trying to use inline stying in the post -- just to clarify, you put the above CSS in your stylesheet, correct?

Is there something else you're seeing other than the colour you specified? The "default" horizontal rule displays differently for different browsers, and some of them utilise a grey similar to a6a6a6 which might be why you're not seeing much of a difference.

[Retread]

Oct 28, 2019 7:38:57 GMT -8 feedyourhead said:

Hmm... Actually, neither worked. Does that mean there's a wonky bit of code impeding it somewhere?

Test post: thedhp.proboards.com/post/3100

Mostly my fault. I should have reset all borders before defining the top border. The inline styling for the BBCode would have looked like this:

[hr style="border:0;border-top:1px solid #a6a6a6;"]

In the Style Sheet of your default theme you have this at the very bottom:
hr{height:0;margin-top:1em;margin-bottom:1em;border:0;border-top:1px solid #2e2e2e;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;}


Redefining the border in the BBCode styling would change the height but not the margins. Also, I'm not sure about the box sizing.


Are you viewing your forum using the theme that's set to be the default or are you using a different theme?

[feedyourhead]

Oct 28, 2019 9:40:10 GMT -8 Kami said:

It looks like you're using a6a6a6, which is this. It also looks like you're trying to use inline stying in the post -- just to clarify, you put the above CSS in your stylesheet, correct?

Is there something else you're seeing other than the colour you specified? The "default" horizontal rule displays differently for different browsers, and some of them utilise a grey similar to a6a6a6 which might be why you're not seeing much of a difference.

That was my bad, I was looking at the wrong test post and it had the inline styling happening. It seems to have worked just fine! Thanks again!

[feedyourhead]

Oct 28, 2019 11:21:39 GMT -8 Retread said:

Oct 28, 2019 7:38:57 GMT -8 feedyourhead said:

Hmm... Actually, neither worked. Does that mean there's a wonky bit of code impeding it somewhere?

Test post: thedhp.proboards.com/post/3100

Mostly my fault. I should have reset all borders before defining the top border. The inline styling for the BBCode would have looked like this:

[hr style="border:0;border-top:1px solid #a6a6a6;"]

In the Style Sheet of your default theme you have this at the very bottom:
hr{height:0;margin-top:1em;margin-bottom:1em;border:0;border-top:1px solid #2e2e2e;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;}


Redefining the border in the BBCode styling would change the height but not the margins. Also, I'm not sure about the box sizing.


Are you viewing your forum using the theme that's set to be the default or are you using a different theme?

Ahhh okay!

Yes, I was viewing the default theme and I use google chrome 


Thank you for your help! 

[Kami]

Oct 28, 2019 12:15:04 GMT -8 feedyourhead said:

Oct 28, 2019 9:40:10 GMT -8 Kami said:

It looks like you're using a6a6a6, which is this. It also looks like you're trying to use inline stying in the post -- just to clarify, you put the above CSS in your stylesheet, correct?

Is there something else you're seeing other than the colour you specified? The "default" horizontal rule displays differently for different browsers, and some of them utilise a grey similar to a6a6a6 which might be why you're not seeing much of a difference.

That was my bad, I was looking at the wrong test post and it had the inline styling happening. It seems to have worked just fine! Thanks again!

So what likely happened is because you input the CSS styling and had the inline styling is that it was double border'd (you declared 1px in the CSS, then 1px again in the BB Code, for a total of 2px). That will make the border thicker, and look different from what you intended (especially if you hadn't removed the default styling as well).

Just wanted to let you know (:

[feedyourhead]

Oct 28, 2019 12:40:17 GMT -8 Kami said:

Oct 28, 2019 12:15:04 GMT -8 feedyourhead said:

That was my bad, I was looking at the wrong test post and it had the inline styling happening. It seems to have worked just fine! Thanks again!

So what likely happened is because you input the CSS styling and had the inline styling is that it was double border'd (you declared 1px in the CSS, then 1px again in the BB Code, for a total of 2px). That will make the border thicker, and look different from what you intended (especially if you hadn't removed the default styling as well).

Just wanted to let you know (:

That makes total sense. My bad! And thank you for letting me know