News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Divide stickies from other topics.

Started by Antechinus, August 22, 2021, 04:48:41 PM

Previous topic - Next topic

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.

/* ------------------------------------------------ */
/* 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. :D 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

Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

Antechinus

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

vbgamer45

Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

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.   8)  Cool beans man.

Mike66

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

Shades.

ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

Quote from: Mick. on August 22, 2021, 08:02:32 PMHa! I see it now lol......  Ooooooo I could put a dingbat in the center of the divider.
You are a dingbat. :D

Mick.

Quote from: Antechinus on August 22, 2021, 09:37:23 PM
Quote from: Mick. on August 22, 2021, 08:02:32 PMHa! I see it now lol......  Ooooooo I could put a dingbat in the center of the divider.
You are a dingbat. :D
;D  ;D

Antechinus

#11
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).

/* ------------------------------------------------ */
/* 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?
DO NOT pm me for support!

Antechinus


Steve

DO NOT pm me for support!

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

DO NOT pm me for support!

Antechinus

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

 :P  :P  :P  :P  :P  :P  ;D  ;D  ;D

Steve

DO NOT pm me for support!

landyvlad

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

I seem to be in a minority  :laugh:
"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

Advertisement: