HR (horizontal rule) lines

[aRMY83]

I posted this over in the General v5 Discussion area and was directed to, I think this area. Here is my question:

Is it possible to change those standard single horizontal rule lines in posts with images? I've checked the CSS and Layout Template and came up with nothing that even came close doing a search for the horizontal rule line words.

[Shrike]

The trick here is that those aren't horizontal rules any more, they're just borders on the parts above/below the post (see the tiny yellow lines between the green and orange parts on this screenshot). Now, we could use the ideal-sounding border-image property, but the way PB has the post list tables done means we can't use that (and not even the latest version of IE supports it, so we'd have to do a workaround anyway).

So, let's do it the old-fashioned way, I'll use this image as an example. Before we start, we'll need to know the height of the image we want to use; in our case, it's 8px.

/*Use image for post borders*/
.posts .content-head, .messages .content-head, .signature {background-image: url("http://i.imgur.com/aRvux.png"); background-repeat: repeat-x; border-width: 0px !important;}
.posts .content-head, .messages .content-head {background-position: bottom left; padding-bottom: 13px !important;}
.signature {background-position: top left; padding-top: 18px !important;}

In the first line: we're adding the image we want to use for the border; setting it to only repeat horizontally and removing the border. The only thing you'll need to do here is replace the image.
In the second line: we're setting the background to start in the bottom left corner of the area above the post and then we're also setting the padding at the bottom to accommodate the image. For the padding, simply take the height of the image and add 5.
In the last line: we're doing the opposite of above and setting the image to start in the top left of the area, and now we're setting the top padding. For this, we add 10 to the image height.
We're using the !important tags to more easily override the previous styles, we'd have to make the selector (.posts .content-head [etc]) parts more complicated otherwise.

When that's all done, go to Themes > Colors and styles > Stylesheet tab and add it at the bottom. This will work in both posts and messages, but not on any [hr] tags in posts (which is okay, because those should be subtle anyway and you could use a similar process to the above on a [div style="here"] tag if need be).

[aRMY83]

Hello again Shrike...

Just copied / pasted your info to notepad and will take this on tomorrow.

The size I have for that image is 517x18:



and hope this will work.

Once again, thanks for all your time and assistance here at ProBoards.

[aRMY83]

Well this was so simple that added it to the CSS and got this:

Added this:


/*Use image for post borders*/
.posts .content-head, .messages .content-head, .signature {background-image: url("http://i47.tinypic.com/24kys6u.png"); background-repeat: repeat-x; border-width: 0px !important;}
.posts .content-head, .messages .content-head {background-position: bottom left; padding-bottom: 23px !important;}
.signature {background-position: top left; padding-top: 28px !important;}
and got this:

[Stinky666]

Dec 9, 2012 17:22:43 GMT -8 aRMY83 said:

Hello again Shrike...

Just copied / pasted your info to notepad and will take this on tomorrow.

The size I have for that image is 517x18:



and hope this will work.

Once again, thanks for all your time and assistance here at ProBoards.

Just a quick note, the image shows as 557px width for me, not 517px.
=)

[aRMY83]

My mistake Stinky666 and that may be why its not working correctly.

Thanks for pointing that out.

[aRMY83]

Got it! Was just a matter of resizing the width.

[Shrike]

If you didn't want to stretch the image by resizing it, you could make some changes to the CSS to make it show only one image. Changing the background-repeat in the first line to no-repeat and changing the second value of both background-position properties to center should show only one centered image.

/*Use image for post borders*/
.posts .content-head, .messages .content-head, .signature {background-image: url("http://i47.tinypic.com/24kys6u.png"); background-repeat: no-repeat; border-width: 0px !important;}
.posts .content-head, .messages .content-head {background-position: bottom center; padding-bottom: 23px !important;}
.signature {background-position: top center; padding-top: 28px !important;}

[aRMY83]

Nothing like a non-coder learning and now centered. Thanks much Shrike.