[OzzModz] Advanced Sticky Thread Separator

[OzzModz] Advanced Sticky Thread Separator 2.0.0

No permission to download
Overview Updates (2) Reviews (2) History Discussion
DevPunk said:
XF2.3 Compatibility?
Click to expand...
Try this code in extra.less and see if it works for you.

Code: 
/* Sticky Thread Container */
.structItemContainer-group--sticky {
    border-left: 4px solid var(--xf-borderColorAccent, @xf-borderColor);
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--xf-stickyBackground, @xf-contentBg) 0%, var(--xf-stickyBackgroundAlt, @xf-paletteColor1) 100%);
    box-shadow: 0 2px 8px var(--xf-shadowColor, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* Sticky Icon */
.structItem-status--sticky::before {
    content: "\f08d"; /* Sticky Pin Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--xf-stickyIconColor, @xf-linkColor);
    margin-right: 8px;
    font-size: 16px;
}

/* Sticky Text Color */
.structItem-status--sticky {
    color: var(--xf-stickyTextColor, @xf-textColorMuted);
}

/* Golden Separator Line */
.structItemContainer-group--sticky + .structItemContainer-group--nonsticky {
    border-top: 4px solid var(--xf-goldenSeparator, #FFD700);
    margin-top: 15px;
    padding-top: 15px;
}

/* Dark Theme Adjustments */
html[theme="dark"] .structItemContainer-group--sticky {
    background: linear-gradient(135deg, var(--xf-stickyBackgroundDark, #2b2b2b) 0%, var(--xf-stickyBackgroundAltDark, #1c1c1c) 100%);
    box-shadow: 0 2px 8px var(--xf-shadowColorDark, rgba(255, 255, 255, 0.1));
}

html[theme="dark"] .structItem-status--sticky::before {
    color: var(--xf-stickyIconColorDark, #f5f5f5);
}

html[theme="dark"] .structItem-status--sticky {
    color: var(--xf-stickyTextColorDark, #f5f5f5);
}

/* Dark Theme Golden Separator */
html[theme="dark"] .structItemContainer-group--sticky + .structItemContainer-group--nonsticky {
    border-top: 4px solid var(--xf-goldenSeparatorDark, #FFCC00);
}
 
collantphile said:
It works great for me with XF 2.3, no server errors, thank you very much @JulesR ! (y)
Click to expand...

I am currently using this code. Because the above code is still not ok for dark interface. Please try it and give feedback if you have any.

I don't know anything. Just have a little talent in using ChatGPT :D

Code: 
/* General Styling for Both Themes */
.structItemContainer-group--sticky {
    border-left: 6px solid var(--xf-borderColorAccent, @xf-borderColor);
    padding: 14px;
    margin-bottom: 20px; /* Increased margin for more separation */
    border-radius: 10px; /* Slightly increased radius for smoother edges */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.structItem-status--sticky::before {
    content: "\f08d"; /* Sticky Pin Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    font-size: 20px; /* Further increased size for better visibility */
}

/* Dark Theme Adjustments */
html[theme="dark"] .structItemContainer-group--sticky {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.15);
}

html[theme="dark"] .structItem-status--sticky::before {
    color: #ffdd57; /* Warm yellow for contrast and emphasis */
}

html[theme="dark"] .structItem-status--sticky {
    color: #f0f0f0; /* Lighter grey for better readability */
}

/* Dark Theme Golden Separator */
html[theme="dark"] .structItemContainer-group--sticky + .structItemContainer-group--nonsticky {
    border-top: 4px solid #FFD700; /* Brighter gold for clearer distinction */
}

/* Light Theme Adjustments */
html[theme="light"] .structItemContainer-group--sticky {
    background: linear-gradient(135deg, #f9f9f9 0%, #ececec 100%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

html[theme="light"] .structItem-status--sticky::before {
    color: #0056b3; /* Deep blue for emphasis */
}

html[theme="light"] .structItem-status--sticky {
    color: #444444; /* Slightly darker grey for readability */
}

/* Light Theme Golden Separator */
html[theme="light"] .structItemContainer-group--sticky + .structItemContainer-group--nonsticky {
    border-top: 4px solid #FFD700; /* Maintain contrast with light background */
}
 
ChatGPT don't know XF 2.3, your code won't work.
Just this won't work
Less: 
content: "\f08d";
This too
HTML: 
html[theme="light"]

If you want to play with variations in Less templates then:
Jeremy P

XF 2.3 Post in thread 'Custom prefixes'

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):
Less: 
.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:
Less: 
.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...
  • Like
  • Love
 
@Old Nick

Thank you expert for your assistance. Sincerely thank you very much.

Can you kindly help with a complete code so that I can copy and paste for this case?

I will take the time to learn it gradually later.
 
JulesR said:
I am currently using this code. Because the above code is still not ok for dark interface. Please try it and give feedback if you have any.

I don't know anything. Just have a little talent in using ChatGPT :D

Code: 
/* General Styling for Both Themes */
.structItemContainer-group--sticky {
    border-left: 6px solid var(--xf-borderColorAccent, @xf-borderColor);
    padding: 14px;
    margin-bottom: 20px; /* Increased margin for more separation */
    border-radius: 10px; /* Slightly increased radius for smoother edges */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.structItem-status--sticky::before {
    content: "\f08d"; /* Sticky Pin Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    font-size: 20px; /* Further increased size for better visibility */
}

/* Dark Theme Adjustments */
html[theme="dark"] .structItemContainer-group--sticky {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.15);
}

html[theme="dark"] .structItem-status--sticky::before {
    color: #ffdd57; /* Warm yellow for contrast and emphasis */
}

html[theme="dark"] .structItem-status--sticky {
    color: #f0f0f0; /* Lighter grey for better readability */
}

/* Dark Theme Golden Separator */
html[theme="dark"] .structItemContainer-group--sticky + .structItemContainer-group--nonsticky {
    border-top: 4px solid #FFD700; /* Brighter gold for clearer distinction */
}

/* Light Theme Adjustments */
html[theme="light"] .structItemContainer-group--sticky {
    background: linear-gradient(135deg, #f9f9f9 0%, #ececec 100%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

html[theme="light"] .structItem-status--sticky::before {
    color: #0056b3; /* Deep blue for emphasis */
}

html[theme="light"] .structItem-status--sticky {
    color: #444444; /* Slightly darker grey for readability */
}

/* Light Theme Golden Separator */
html[theme="light"] .structItemContainer-group--sticky + .structItemContainer-group--nonsticky {
    border-top: 4px solid #FFD700; /* Maintain contrast with light background */
}
Click to expand...

Thanks a lot for this fix, however I don't have any dark styles anymore at the moment so I can't tell you what it is.
Me, I don't use Chat GPT, it's a bit Chinese to me. :)
 
You must log in or register to reply here.

Similar threads

Allan
Sticky thread separator (CSS)
Replies
0
Views
609
Allan
Allan
Allan
  • Suggestion Suggestion
Lack of interest Sticky Thread Separator
Replies
5
Views
651
Allan
Allan
Back
Top Bottom