Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Antechinus on September 09, 2021, 05:52:25 PM

Title: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: Antechinus on September 09, 2021, 05:52:25 PM
This turns out to be easy. Like this:
/* ---------------------------------------------------- */
/* Adjust parent .windowbg for better looks of content. */
#forumposts .windowbg,
#forumposts .approvebg,
#personal_messages .windowbg {
padding: 0;
}

/* -------------------- */
/* Grid parent element. */
/* -------------------- */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px minmax(0,calc(100% - 175px));
    grid-auto-rows: 1fr min-content;
}

/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}

/* ----------------- */
/* First grid child. */
.poster {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
width: 175px;
padding: 10px 0 10px 15px;
background: #fff5e5;
border-radius: 6px 0 0 6px;
}

/* ------------------ */
/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin: 0;      /* Override RC4 CSS. */
padding: 10px 15px 0 10px;
}

/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;      /* Override RC4 CSS. */
padding: 0 15px 10px 10px;
}

/* ----------------------------------- */
/* Media queries, for smaller screens. */
/* ----------------------------------- */
@media screen and (max-width: 720px) {
    .post_wrapper {
        display: block;
    }
    .poster {
        width: auto;
min-height: 65px;
padding: 10px 10px 5px;
    }
    .poster h4, .poster .user_info {
margin-left: 60px;
    }
.poster li.avatar {
display: block !important;
float: left;
width: 50px;
margin: -1.4em 0 0 -60px;
text-align: center;
}
.poster img.avatar {
max-height: 50px !important;
max-width: 50px !important;
}
.poster li {
padding-right: 4px;
vertical-align: bottom;
}
.poster .blurb {
display: none;
}
}

Note: Will not support IE11, or earlier versions of IE. If anyone wants support for IE, you can add the required -ms-grid syntax and declarations. It's not difficult, but at the moment I can't be bothered. :D

See this article (https://elad.medium.com/supporting-css-grid-in-internet-explorer-b38669e75d66) if you want to support IE11. ;)
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: landyvlad on September 09, 2021, 08:40:07 PM
Do you have a screenshot to demonstrate what this actually does?
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: Antechinus on September 09, 2021, 11:04:35 PM
Didn't, but do now. ;)

This is a thing that has been requested many times over the years: code for making a sig stay at the bottom of the post wrapper, regardless of how much content there is in the .poster section (avatar, blurb etc) and how little content there is in the post itself (so that collapses to a very small size). People used to try and fudge it several ways (min-height on the post, or clear: both on the sig, etc) but the fudges were always only fudges that only sort of worked.

With the CSS available these days it is now easy to do. The result is shown in the first screenshot. Even though there is quite a lot of content in the poster area, and hardly any in the post itself, the sig stays stuck to the bottom and it all looks tidy.

Sticky_sigs_1.png

Not only that, but doing it this way also enables you to do other tricks. The second screenshot shows the result when using it to meet the request in this thread (https://www.simplemachines.org/community/index.php?topic=578878.0): changing the background of the poster area, and having that full height at all times, but without changing the background of the other post content.

Sticky_sigs_2.png

It also works well for mobile. Simply using  a media query to declare .post_wrapper as display: block; insead of display: grid; makes all the content automatically stack neatly down the page, which is what you want on mobile. It also handles RTL languages automatically: the poster div goes to the right and everything sorts itself (apart from the quickbuttons and a couple of minor details, which are floated by default, but that could be fixed too).

So this is quite a versatile way of handling the CSS for posts. It covers a lot of bases. You can even extend it further. I haven't added it to this example, but you can also declare .postarea as display: flex; and that will enable you to change the stacking order of the elements within .postarea. I've used that to put the quickbuttons above the attachments, which I like better than the default (attachments above quickbuttons). Code for that looks like this:
/* ---------------------------------------------------- */
/* Adjust parent .windowbg for better looks of content. */
#forumposts .windowbg,
#forumposts .approvebg,
#personal_messages .windowbg {
    padding: 0;
}
/* -------------------- */
/* Grid parent element. */
/* -------------------- */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px minmax(0,calc(100% - 32px));
    grid-auto-rows: 1fr min-content;
}
/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}
/* ----------------- */
/* First grid child. */
.poster {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 175px;
    padding: 10px 0 10px 15px;
}
/* ------------------ */
/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    /* Set to flex parent. */
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px 15px 0 10px;
}
/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;
    padding: 0 15px 10px 10px;
}
/* --------------------- */
/* End of grid children. */
/* --------------------- */
/* Start flex children. */
/* -------------------- */
/* General reset. */
.postarea > div {
    flex: none;
}
/* ------------------ */
/* Second flex child. */
.postarea > .post {
    flex: 1 0 auto;
}
/* ----------------- */
/* Third flex child. */
.postarea > .attachments {
    /* Changed position to #4. */
    /* Attachments are now beneath buttons. */
    order: 4;
    margin: 0;
}
/* ------------------ */
/* Fourth flex child. */
.postarea > .under_message {
    /* Changed position to #3. */
    /* Buttons are now above attachments. */
    order: 3;
}
/* ------------------ */
/* End flex children. */
/* ------------------ */

/* ----------------------------------- */
/* @todo - Responsive code for mobile. */
/* Post & PM templates, media queries. */
@media screen and (max-width: 720px) {
    .pagesection.top {
        display: block !important;
    }
    #forumposts #new::after {
        margin-left: calc(50% - 16px);
    }
    .post_wrapper {
        display: block;
    }
    .poster {
        width: auto;
        min-height: 65px;
        padding: 10px 10px 5px;
    }
    .poster::after {
        display: block;
        clear: both;
        content: '';
    }
    .poster h4, .poster .user_info {
        margin-left: 60px;
    }
    .poster li.avatar {
        display: block !important;
        float: left;
        width: 50px;
        margin: -1.4em 0 0 -60px;
        text-align: center;
    }
    .poster img.avatar {
        max-height: 50px !important;
        max-width: 50px !important;
    }
    .poster li {
        padding-right: 4px;
        vertical-align: bottom;
    }
    .poster .icons {
        padding: 0 4px 0 0;
    }
    .poster .blurb {
        display: none;
    }
}
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: shadav on September 10, 2021, 12:28:15 AM
thanks, I saw where you posted in my thread :) just haven't had a chance to play with it yet
this was one of my pet peeves in 2.0.x
2.1 so far seems to handle sigs a bit better to be at the bottom of the post, though that means that everything else is above it (ie moderation bar, attachments, etc) which is already ticking me off  :laugh: moved the attachments to below the sig on the theme I'm playing with
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: landyvlad on September 10, 2021, 12:44:50 AM
Nicely done mate  ;D
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: Antechinus on September 10, 2021, 12:57:01 AM
Quote from: shadav on September 10, 2021, 12:28:15 AMthanks, I saw where you posted in my thread :) just haven't had a chance to play with it yet
this was one of my pet peeves in 2.0.x
2.1 so far seems to handle sigs a bit better to be at the bottom of the post, though that means that everything else is above it (ie moderation bar, attachments, etc) which is already ticking me off  :laugh: moved the attachments to below the sig on the theme I'm playing with
Yeah that still requires markup changes, but I like sig under attachments anyway so it doesn't bug me. :D

My 2c is sigs above attachments are ok if everyone has small and tidy sigs, but they get up my nose when they have banners and all sorts of whatnots*. Then I prefer them out of the way below the attachments. It's just sigs floating halfway up the post, and buttons under attachments, that bug me all the time.

But by using grid + flex for the basics you do all sorts of nifty tricks, regardless of how you do your markup. And really floats should be canned as much as possible. Too much of a PITA when you want to change things for mobile or RTL.

*I once made a huge sig banner that said "Humungous Sig Banner - because my ego is more important than your browsing experience".
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: landyvlad on September 10, 2021, 06:27:27 AM
Quote from: Antechinus on September 10, 2021, 12:57:01 AMI once made a huge sig banner that said "Humungous Sig Banner - because my ego is more important than your browsing experience".

ROFLMAO :D
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: Antechinus on September 10, 2021, 02:33:39 PM
I still have it stashed. :D

my_ego_8.png
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: shadav on September 10, 2021, 03:08:40 PM
 :laugh:  :laugh:  :laugh:  :laugh:
Title: Re: SMF 2.1: Make sigs sticky at bottom of posts (CSS only)
Post by: TwitchisMental on September 13, 2021, 12:23:42 PM
Just wanted to say this trick and that poster wrapper trick just make things look so much better even on the default theme.

Thank you for sharing. I love your your dedication to doing things like this :).