• Welcome to Simple Machines Community Forum. Please login or sign up.
September 24, 2021, 02:35:40 PM

News:

SMF 2.1 RC4 has been released! Try it out and help us test! :) Read more.


need help moving stuff around in the posting area, report to moderator, signatur

Started by shadav, September 06, 2019, 07:18:02 PM

Previous topic - Next topic

shadav

so it's a modified curve theme, 2.0.15

I would like to do a few things

1. move the report to moderator button and the ip button to below the signature (as well as add some other buttons there (merge posts, split topics, ban user....more admin/mod type buttons than user type buttons)

2. I would like for these and the signature to always be at the bottom of the post

image to explain


shadav

thank you, I tried but I keep getting template errors

so then I tried moving the buttons to the top with the others and adding the code in the css for the quicklinks (whatever it's called) but the images wouldn't show up

Antechinus

What you want to do is a bit tricky, because the moderation buttons (meaning the ones in the strip at lower left of the posts page, including the "merge topic" button) are not intended to have multiple instances in every post. Recoding them so they worked that way would be a bit of a mission.

Simply moving the report links and some of the quickbuttons to below the posts is easy enough, if you'll settle for that. Basically, anything that is already inside a post wrapper can be moved pretty much anywhere inside said wrapper. Anything outside it is probably more hassle than you want to know about.

shadav

thank you

ok so well let's tackle my biggest ocd issue at the moment ;)
aligning the signature to always be at the bottom of the post

lol you have no idea how much that is annoying me   :P

the rest I can play around with later, it's just a minor layout issue but the signature is a bit on my nerves

Antechinus

Congratulations! You have auspiciously selected one of the traditionally gnarliest issues in CSS!

It should be possible now that flex and grid are available, but having been reminded of this issue I took a brief look at some flex tutorials yesterday. No joy. They have code for "sticky footers", which is basically what is wanted here, but although they work on the html/body elements they don't appear to work inside posts. Someone else may know how to get that working (I've barely played with flex coding yet).

Same applies to CSS grid. Haven't done anything with it yet, so at the moment do not know how.

Edit: Well there is one surefire way of getting it to work, but the catch is it relies on having a pre-determined height for the sig/footer content. Which is not usually what's wanted in a forum post context.

shadav

 :laugh: leave to me to always be difficult  :P just like a woman  ;)

anyways thank you

my question, would it be possible to create a new div? one that goes below the poster info and post information but still within the posting area? would that not work?

I'm assuming the forumposts is the main div, so something like....

<div id="forumposts">
<div class="poster">
</div>
<div class="postarea">
</div>
<div class="signature">
</div>
</div>

where the signature would then span both poster and postarea div

Antechinus

Oh sure, that will work. It can  even be done without an extra div. All you need to do is set clear: both; on .moderatorbar. The thing is it will make some posts a lot taller than they really need to be, so people tend not to like that solution.

shadav


Antechinus

Oh yeah, just remembered. There's an alternative simple trick you can try. Leave .moderatorbar alone, and set a min-height: 200px; on the .inner divs. Adjust the number to whatever suits best. This has the advantage that it will take up less height on short posts.

shadav


Antechinus

Just had a go at this, since I figured with modern CSS tricks there has to be a way to make it work. And there is. Got it working perfectly.

There's a catch though. It works perfectly on my custom template, but I can't get it working on a default SMF template. The default pile of crud* splits things up into awkward chunks (separate .postarea and .moderatorbar stacked vertically) so you can't just throw flexbox at it and have it work.

It works on my custom template because I wrapped all the postarea divs (.keyinfo, .post and .moderatorbar) inside .postarea, with .poster sitting next to that, so effectively there are two chunks sitting inside the outer post wrapper. I did this just because it made sense for other aspects of coding, but it turns out to work with sticky post footers too.

So the default template would have to be re-jigged a bit, but it's not a difficult thing to do. It's basically just a case of stuffing .moderatorbar inside .postarea, getting rid of a couple of superfluous divs and crap that will just get in the way, then applying something like this:

#forumposts .windowbg, #forumposts .windowbg2 {
display: flex;
padding: 11px 1em;
border: 2px solid blue;
}
.poster {
width: 12em;
flex: 0 0 auto;
border: 2px solid red;
}
.postarea {
flex: 1 1 auto;
display: flex;
flex-direction: column;
border: 2px solid purple;
}
.post {
flex: 1 1 auto;
border: 2px solid green;
}
.keyinfo, .quickbuttons, .moderatorbar {
flex: 0 0 auto;
background: #0002;
}


In English, setting flex on the outer divs makes .poster and .postarea fill the available space on both axes. The set width on .poster, and the 0 0 auto flex setting make .poster stay at the desired width, while .postarea will fill the rest of the space.

The tricky bit, which I hadn't figured out before, is that you then apply display: flex on .postarea and set the direction to column. That makes everything inside stack nice and flexy. Use 0 0 auto to keep the ones you want at their standard height from misbehaving, and set the .post itself to 1 1 auto to fill the remaining height.

The screenshot shows the result, with the gruesome borders and translucent grey overlay just being to show which bits are which. The grey elements are the ones set to 0 0 auto so they don't change height. The green one (.post) is the one that does the pushing.

And now that Ive figured this out I'm going to have to use it. :D

*I'm allowed to say this, because I coded parts of it. :P

shadav


Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

Turns out this doesn't work consistently anyway. Works perfectly in Pale Moon, Chrome, and Opera. Blows to pieces in Firefox.

Firefox is the new IE. :P

Antechinus

Hey, A funny thing happened on the way to the forum. Turns out you can do this sticky-at-the-bottom sig trick on default phpBB markup. Someone asked about it, so I gave it a bit of thought and whipped up a proof of concept. It works. Should even work with Firefox (when I can be bothered testing it).

No can do on default SMF markup, but changing it so you can is a piece of cake. All it needs is an extra couple of divs wrapping the default .postarea and .moderatorbar (IOW, the two nested parent divs wrap everything except .poster).

Set .post_wrapper to display: flex; and get rid of the floats and margins on .poster, ,postearea, etc. New parent #1 sits beside .poster (define widths to whatever you like) and gets position: relative; added to its CSS.

Then position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; on #1>#2. Then all you have to do is set .postarea to flex: 1 0 auto; and .moderatorbar to flex: 0 0 auto;

Hey presto, sig sticky at the bottom. :)

Will knock up an SMF example when I can be bothered, if nobody is enterprising enough to try it themselves first. :P

GigaWatt

Yeah, but... the mod buttons are above the sig :o... am I the only one that finds this weird ???.
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."


Antechinus

Oh nvm. I'm not talking about the OP. I'm talking about the thing she wanted to do after she gave up on the idea in the OP.

shadav

 :laugh: I forgot about this

yeah I gave up trying to split up the quickbuttons, so instead just threw everything into the quickbuttons  :laugh:

but the signature floating about mid post drives my ocd crazy  :laugh:
a signature should be stuck to the bottom of the post  :P

Advertisement: