Divide stickies from other topics.

[Antechinus]

I'm messing around with CSS again, running Stylus live on this site. Decided I'd like the sticky topics split off from the other topics a bit, so came up with this idea.

Code Select Expand

/* ------------------------------------------------ */
/* Seperate sticky & other topics on message index. */
#messageindex .windowbg.sticky + .windowbg:not(.sticky) {
    position: relative;
    margin-top: 11px;
    overflow: visible;
}
#messageindex .windowbg.sticky + .windowbg:not(.sticky)::before {
    display: block;
    position: absolute;
    top: -8px;
    right: 0;
    left: 0;
    height: 3px;
    background: #96a2bb;
    content: '';
}
/* ------------------------------------------------ */
You cannot view this attachment.

[Mick.]

Dang bruh, I never sticky anything bahaha! I really dont see the diff. 

[Antechinus]

Well if you never sticky anything it won't be any use to you. Lots of stickies on this site, though.

And the diff is obviously the gap and the horizontal divider between stickies and other posts.
Similar idea to this one: Make new posts stand out in threads.
Although that other idea is for 2.0.x and doesn't work in 2.1 (someone changed the markup of the #new link and it borks that idea).

[vbgamer45]

I like the gap with the hr tag.

[Antechinus]

It's not an hr tag. It's all CSS on standard 2.1 RC4 markup, using a ::before pseudo element.

[vbgamer45]

Even better.

[Mick.]

Ha! I see it now lol......  Ooooooo I could put a dingbat in the center of the divider. Some sweet pin stripes hehehe and dress it up a bit.     Cool beans man.

[Mike66]

I like it when you 'mess around with CSS', you come up with some interesting stuff Antechinus 

[Shades.]

I like it!

[Antechinus]

Ha! I see it now lol......  Ooooooo I could put a dingbat in the center of the divider.

You are a dingbat.

[Mick.]

Ha! I see it now lol......  Ooooooo I could put a dingbat in the center of the divider.

You are a dingbat.

 

[Antechinus]

Code needs a slight tweak. The code in the OP is triggered if there is a sticky topic in the unread list. To fix that, use this (it just adds #message_index to the start of each declaration).

Code Select Expand

/* ------------------------------------------------ */
/* Seperate sticky & other topics on message index. */
#messageindex .windowbg.sticky + .windowbg:not(.sticky) {
    position: relative;
    margin-top: 11px;
    overflow: visible;
}
#messageindex .windowbg.sticky + .windowbg:not(.sticky)::before {
    display: block;
    position: absolute;
    top: -8px;
    right: 0;
    left: 0;
    height: 3px;
    background: #96a2bb;
    content: '';
}
/* ------------------------------------------------ */

[Steve]

Do you want the code in the OP changed to the one above?

[Antechinus]

Sure, if you like.

[Steve]

Done.

[Antechinus]

Come to think of it, you can lose the three examples of important now that the #messageindex id is in the declarations. The added specificity of that makes the !important redundant. I've edited the code in reply #11.

[Steve]

Done.

[Antechinus]

Y'know I think it would look prettier with sparkles and dancing unicorns.
I've edited the code in reply #11 again.

                

[Steve]

Smarta** ...

[landyvlad]

I haven't edited the code in reply number 11.

I seem to be in a minority