• Welcome to Simple Machines Community Forum. Please login or sign up.
December 07, 2021, 01:58:55 PM

News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord


Divide stickies from other topics.

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

Previous topic - Next topic

Antechinus

August 22, 2021, 04:48:41 PM Last Edit: August 23, 2021, 03:43:10 PM by Steve Reason: Changed code to one posted below.
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 see attachments on this board.

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
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

August 23, 2021, 01:36:14 PM #11 Last Edit: August 23, 2021, 02:22:34 PM by 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).

/* ------------------------------------------------ */
/* 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?
Please do not PM me for support.


Steve

Please 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

Please 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

Please 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:
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.

To paraphrase Kindred: "There are no technical solutions to social problems."

Advertisement: