Sticky Thread Divider

[PIP]

Jan 26, 2013 15:35:13 GMT -8 Shrike said:

Well, after about 10 minutes, I managed to get something that worked great in every browser

Then I spent another 70 minutes trying and failing to make it work in IE 8 and below because they don't support the :not() CSS psuedo-class

Go to Themes > Colors and styles, copy/paste to the bottom of the stylesheet and change the red to suit:

/*sticky thread divider (IE needs to be IE 9+)*/
tr.sticky + tr:not(.sticky) td {border-top-width: 5px;}

I wasn't planning on making a whole plugin, so if you want something more than this and/or are desperate for your IE 8 users to have this little visual hint too, I'm afraid you'll have to wait for someone who doesn't feel like punching the lead developer of IE in the face

Thank You.

[Mistuh M]

Awesome! Thanks Shrike!

[✶April✶]

I use the dotted border attribute so it looks odd when using this temporary fix... is there any way to make it solid without having to change the other borders? If not, it's okay, I'll just have to wait.

[Shrike]

Feb 14, 2013 8:15:18 GMT -8 ✶April✶ said:

I use the dotted border attribute so it looks odd when using this temporary fix... is there any way to make it solid without having to change the other borders? If not, it's okay, I'll just have to wait.

Sure, add a border-style property like so:

/*sticky thread divider (IE needs to be IE 9+)*/
tr.sticky + tr:not(.sticky) td {border-top-style: solid; border-top-width: 5px;}

[✶April✶]

Perfect, thank you!

Though one more thing, it's adding a little bar above the subject text of the first post underneath the divider now, as seen here:



Any idea how to get rid of that?

[Shrike]

Feb 14, 2013 9:01:27 GMT -8 ✶April✶ said:

Perfect, thank you!

Though one more thing, it's adding a little bar above the subject text of the first post underneath the divider now, as seen here:



Any idea how to get rid of that?

As a word of advice, providing a link to the forum when asking for help will almost always get faster help as we can easily see the problem. Luckily the link in your signature went to the same forum so I didn't need to ask for one.

As for that extra border, it's the first time I've noticed a table being used for some of the (normally hidden) details in there. In this part of the code, add the > where shown, making sure there is a single space between it and the surrounding text:

tr.sticky + tr:not(.sticky) > td

[✶April✶]

Feb 14, 2013 9:11:07 GMT -8 Shrike said:

Feb 14, 2013 9:01:27 GMT -8 ✶April✶ said:

Perfect, thank you!

Though one more thing, it's adding a little bar above the subject text of the first post underneath the divider now, as seen here:



Any idea how to get rid of that?

As a word of advice, providing a link to the forum when asking for help will almost always get faster help as we can easily see the problem. Luckily the link in your signature went to the same forum so I didn't need to ask for one.

As for that extra border, it's the first time I've noticed a table being used for some of the (normally hidden) details in there. In this part of the code, add the > where shown, making sure there is a single space between it and the surrounding text:

tr.sticky + tr:not(.sticky) > td

Ah, sorry about that, I don't usually ask for help, so not used to adding the link.  Glad you were able to find it easily though.

And thanks once again, that worked perfectly!

[corkhopper]

Excellent - thanks for that!

[M³]

How can I color this sticky separator bar?

[tunescool]

how could i get an outer border, i have problems with all my outer borders

[Shrike]

Mar 14, 2013 16:14:52 GMT -8 M³ said:

How can I color this sticky separator bar?

The divider is really just us making one of the borders taller, but that also means it's easy to add a colour:

/*sticky thread divider (IE needs to be IE 9+)*/
tr.sticky + tr:not(.sticky) > td {border-top-color: #F55623; border-top-style: solid; border-top-width: 5px;}

Mar 14, 2013 17:12:06 GMT -8 tunescool said:

how could i get an outer border, i have problems with all my outer borders

View Attachment

An outer border on what? You wouldn't want to put an outer border on the sticky divider (which is itself just one of the inside borders in the thread table).

[tunescool]

Mar 15, 2013 8:45:48 GMT -8 Shrike said:

An outer border on what? You wouldn't want to put an outer border on the sticky divider (which is itself just one of the inside borders in the thread table).

then however the space at the ends would get filled up, i had a ton of problems like that on my form and outerborder corrected it all. i just want to fill the space

[M³]

Shrike Oh my goodness, I just noticed this was the 'sticky thread divider' we're all talking about here. I'm sorry, Shrike, can I get this for my 'Announcement Divider'?  Thank you so much!

[Shrike]

Mar 15, 2013 9:03:19 GMT -8 tunescool said:

Mar 15, 2013 8:45:48 GMT -8 Shrike said:

An outer border on what? You wouldn't want to put an outer border on the sticky divider (which is itself just one of the inside borders in the thread table).

then however the space at the ends would get filled up, i had a ton of problems like that on my form and outerborder corrected it all. i just want to fill the space

Yeah, I still don't get what it is you want. It's really not possible (or sensible) to add an outer border to the divider. If you're having problems with other outer borders then you'd be better off making a new thread.

Mar 15, 2013 9:38:58 GMT -8 M³ said:

Shrike Oh my goodness, I just noticed this was the 'sticky thread divider' we're all talking about here. I'm sorry, Shrike, can I get this for my 'Announcement Divider'?  Thank you so much!

It depends how you've added the announcement divider. Assuming it is using the same code as the sticky one (but replacing the sticky class with the announcement one), you can just add the border-top-color property in the same way.

[tunescool]

theres a space here in this pic at each end, you cant see the left side, id like to fill the space whatever its called