Has anyone improved /main_block.png to have transparent rounded edges?

Started by Biology Forums, August 30, 2019, 11:35:58 AM

Previous topic - Next topic

Mick.

Quote from: Antechinus on October 05, 2019, 12:00:52 PM
Oh about placeholder text: I was thinking of using that myself to clean things up, but then I read this earlier today:

https://www.nngroup.com/articles/form-design-placeholders/

Wouldn't matter so much on some sites, and the SMF login form is pretty simple anyway, but handy to know for general use. So I decided to go with labels instead, then had to think of a way of styling them.
Oooo good read!

Antechinus

I like the memberlist. Sort of like my mod, but with really cool styling. That totally works.

With the contact page, it looks a bit funny on desktop. A bit too spread out. Hang on a sec and I'll whip up a cut and paste with an idea.

Mick.

I use Chrome, Safari and this is how it looks...


Now i see how it looks on stupid Firefox. Ugh.

Antechinus

Just an idea. I think it needs a little more breathing room between the text and the top row of inputs. Not much more, just a bit. And the rest sort of like the shot could work. That's taken in Pale Moon, which is basically a mutant Gecko.

Antechinus

Quote from: Mick. on October 05, 2019, 12:08:38 PM
I use Chrome, Safari and this is how it looks...


Now i see how it looks on stupid Firefox. Ugh.

Oh hell that's completely different. Bloody browsers. :D

Antechinus

Y'know that look you have with Chrome or whatever is still a simple layout. It should be possible to get it looking like that in Firefox. Even if you had to break out the big hammer and wallop a few things with absolute positioning it should still be possible.

Mick.

Quote from: Antechinus on October 05, 2019, 12:24:17 PM
Y'know that look you have with Chrome or whatever is still a simple layout. It should be possible to get it looking like that in Firefox. Even if you had to break out the big hammer and wallop a few things with absolute positioning it should still be possible.
Looks fine on safari too. Now i have to get into the css and mess with -moz to make it work. Ugh.

Antechinus

Now that I'm more awake I took a quick look at it, and it shouldn't need any vendor-specific stuff to make it work. The problem is that it's not loading contact.css in Firefox or Pale Moon. That's implying that your PHP is set up to exclude anything based on Gecko. There's probably some rogue user agent detection or similar going on. Not really the browser's fault. If Gecko-based critters can be given the CSS it should all work. :)

Mick.

@ant; alright, I'll take a look in the morning.  I'm pretty hammered atm

Antechinus

More daft tricks. I am going to have to start behaving myself soon. :D

Finally came up with a presentation for the recent posts that doesn't look like a pig's breakfast. I could actually like this one. Am thinking of putting them at the top of the board index, and only visible to guests. Logged in users rarely pay any attention to recent posts, and use the unread/replies pages instead. To my mind recent is only much use for guests, who don't get access to the unread pages, so having recent at the top makes sense for them. It's collapsible, same as the news fader, just in case someone wants it out of the way on a narrow screen.

Have also done a shuffle on the poster area on Display.template.php. This is purely to rationalise the markup for what I want it to do in terms of responsiveness (I'm doing that in quite a few places). The avatar and username h4 (and the PM button when you're logged in) are part of one poster div. The rest of the poster details are in the standard ul, but that has been given the .poster_details class, and it has clear:left as part of its CSS to make it stack. The .postarea div is set with hidden overflow, so it automatically sits beside the poster div and ul without needing to declare a margin.

When I want to shift things around, no frigging around with margins or absolute positioning is necessary. I just display: none; the .poster_details ul, remove the hidden overflow from .postarea, and add clear: both; to the .post div, and it all automatically drops into place. It works with or without an avatar, with no extra code required. Easy. :)

In terms of code flow this is much better than how it was before, and I quite like the looks of this setup.


Bloc

Recent posts section is always a bit troublesome..you want it on one line ideally, but its really too much information when moving down in resolution. I am thinking about reducing the shown title and rather keep the other things present(apart from date perhaps) so it will still be just one line on mobiles too.

EDIT: the two-colum split is great for reducing space usage, but for me its gets bit jumbled and not that easy to scan/read quickly. More or less because I expect them to go under each other..seeing they are the same section and not an entirely different section(as in putting calendar items for example, side by side with recent posts).

Diego Andrés

I think that also is up to the admin to decide, sometimes they don't care about how it looks but how much information they can display.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Bloc

Well, as long as you provide that option, sure...for my part I do not make assumptions of what admins would possibly want or not, I go from what I feel looks good and work from there. At least in free themes.

Antechinus

Quote from: Bloc on October 06, 2019, 12:51:59 PM
Recent posts section is always a bit troublesome..you want it on one line ideally, but its really too much information when moving down in resolution. I am thinking about reducing the shown title and rather keep the other things present(apart from date perhaps) so it will still be just one line on mobiles too.

This is why I have been asking people if they want more information on small screens, or less information on small screens, or if the amount of information on small screens is about right. Haven't had any answers yet though. They only seem to notice big banners. ;)

I suspect that nobody is actually using the thing, so nobody has yet got a real feel for how it all operates in general day to day use. I have been thinking the best option would be to simply release it via the theme site, at which point it is inevitable that everyone will complain about all the things they don't like. :D

Anyway, in the meantime I'm mainly just making what is there fit, as logically as possible. I'm going to rewrite the markup for the recent posts. At the moment it is all split down into spans, set to nowrap and with ellipsis overflow in case they get stuck in a tight corner. This means that when it wraps it all wraps in sensible chunks that won't fry your brain when you're scanning it. Title always hangs together in one chunk, ditto "by member name", complete date string, and "in Board ***". What I think would make more sense is to use a ul for each recent post, and do the chunks as li's. Whether done with li's or spans, it is very easy to drop chunks sequentially if you want to do that. I've generally been approaching the markup revisions on this basis.


QuoteEDIT: the two-column split is great for reducing space usage, but for me its gets bit jumbled and not that easy to scan/read quickly. More or less because I expect them to go under each other..seeing they are the same section and not an entirely different section(as in putting calendar items for example, side by side with recent posts).

TBH I find the default 2.0.x presentation impossible to scan. This is largely because of lack of line height, which is a problem generally with default Curve. 130% is ok with very short lines of text, but not adequate with long lines (because the brain needs a better indication of where the lines are, otherwise you get the infamous "ZOMG wall of text" syndrome"). And basic typography guidelines say that lines over 75 characters make for a poorer reading experience, which is something I found out for myself when I made that first mobile theme from Outline on 1.1.x. The exceptionally narrow content area (by forum standards) was in practice so easy and pleasant to scan that I ended up using the mobile theme on desktop a lot of the time. More scrolling, but quicker and more pleasant reading.

Personally I find the two column layout easy to scan. I just scan the first column, then the second. A bit like reading drop menus. On wide screens I think this is better than one very long line of text, but obviously stacking it all into one column is best on narrow screens. I think the optimum change point is somewhere around 768 wide. Anyway, having let the idea percolate a bit, I think I'll leave the recent posts in the info centre for now. There's a certain logic in having them up top, but they're still accessible in the default location and I think I prefer that look for this theme.


Quote from: Diego Andrés on October 06, 2019, 01:58:42 PMI think that also is up to the admin to decide, sometimes they don't care about how it looks but how much information they can display.

In which case they are the sort of admin who will make the site a nightmare for average users. It's one of the traditional problems with forum apps. The creators get obsessed with displaying all sorts of crap that just gets in the way.

shadav

I mean I'm all for showing as much needed info as possible (lol ore more than what is needed, I do tend to overshare and ramble ;) ).... but then I have to remind myself that it's just a preview
much like the poster info on posts, I had to remind myself that it's just that a mini profile.... so ditch things that aren't necessarily needed when replying to a topic (like, you may need to know gender, age, and location to help answer specific questions.... but you don't need a link to their social medias and websites, that can be found on their actual profile)

so then I guess the same would be for responsiveness.... as the screen gets small just show the pertanite stuff, maybe avatar but at least name of poster (then again that could be debatable, but as it is a forum, more community based, this is probably needed) thread title, maybe date started... everything else can be viewed in the post itself (but then I guess you run into the same issues of space limits)

one thing i'm noticing on my theme, is the breadcrumbs.... while I prefer to show the exact path (home > category > board > post) while on smaller screens this takes up a lot of room and should probably only show the last location (ie post, or board, or category depending on where you are at) hope that makes since

another thing

again nothing i'm staying here has anything to do with what Antechinus has been doing (maybe they fixed these things I donno, just thinking out loud here)

but another thing I'm noticing is the display.template
all of the buttons for postings and for moderation..... when getting smaller screen, these again take up a lot of room... i'd like to see them somehow shrink either in font size or become icons instead of text

Antechinus

I'm fine with people throwing ideas around. I do this sort of coding as an exercise in solving a puzzle that's more fun than crosswords.

It would probably depend on the site, but offhand I don't think gender, age and location are all that relevant a lot of the time. Handy to know gender to save embarrassment with pronouns, but apart from that it doesn't matter in most situations. I agree social media stuff (and email) is better in profile. Website is debatable (probably a context thing).

You need to have the poster name because some people don't have avs, so the name is a necessary fallback. And if coding for everyone you have to bear in mind that some people can't see avs anyway, so they need other information.

Breadcrumbs are a tricky one. They do chew a stack of space on a small screen, but then they're meant to provide a navigation map. Question is: does anyone actually need a complete map in that format? There could be an argument for dropping intermediate links, and just keeping the home link and the last level. That would be very easy to code. You could even have a clicky thingy (arcane technical terminology FTW) to show the intermediate links if you needed them, but chances are nobody would ever use it in practice regardless of how clever you felt about coding it.

And yeah, buttons. I've noticed that if you're on an admin or mod account the quickbuttons (quote, modify, etc) become a plague of monsters on a small screen. The moderation strip below all the posts isn't too bad IMO, because they're generally out of the way, but the ones inside posts are problematic. They should probably collapse to something more digestable. I have been thinking it wouldn't be hard to arrange that. Could use a similar trick to the main and admin menus, and throw them all into a clicky thingy once screen size is small enough to make it useful.

lurkalot

Quote from: Antechinus on October 06, 2019, 03:41:26 PM

I suspect that nobody is actually using the thing, so nobody has yet got a real feel for how it all operates in general day to day use. I have been thinking the best option would be to simply release it via the theme site, at which point it is inevitable that everyone will complain about all the things they don't like. :D


I do have it installed on one of my test sites, https://cctestsite.info/forums/index.php?theme=32 just to see how it behaves with TP installed.  But confess I've mainly been playing around with it on my local, seeing how easy it is to change colours etc.   

I wouldn't be able use it on my live sites because some people still use IE11 from their workplaces,  and long text still breaks out of the side of post area.  Example, https://cctestsite.info/forums/index.php?topic=3028.0

Antechinus

Just looking at it now: there's a good case to be made for dropping everything below the post text into a clickable div, with the exception of attachments and sigs. Sigs can be switched off in profile settings anyway, if you don't want to see them, and I think attachments should always be visible as they are part of post content.

But all the other stuff (buttons, report links, IP shiz, edit times, etc) are good candidates for throwing into a skip. If you want to sort through the garbage, you can always open the lid.

One thing I have found with the buttons at the top and bottom of the page (reply, print, etc) is that by playing around with CSS you can change how they stack on small screens without changing the default generation order. So the Reply button, which is the one you want 99% of the time, can be made more accessible by sticking it out the front.

You can do this by using inline-block instead of float on the button li's, and setting text-align to the opposite of normal for the language in question. In essence:

.buttonlist {float: right; text-align: right;}
.buttonlist li {display: inline-block;}


This looks normal when you have enough space for them all to fit on one line, but alters how they stack when they start running out of space. :)




Quote from: lurkalot on October 06, 2019, 05:41:16 PMI do have it installed on one of my test sites, https://cctestsite.info/forums/index.php?theme=32 just to see how it behaves with TP installed.  But confess I've mainly been playing around with it on my local, seeing how easy it is to change colours etc.

Lol. :D Yeah that sort of thing is fun. I've been messing with all sorts of ideas, and I'm kinda keen on doing Prince of Darkness as a variant of this one. 


QuoteI wouldn't be able use it on my live sites because some people still use IE11 from their workplaces,  and long text still breaks out of the side of post area.

Fixed that. Will be fine in the next one. See screenshot. I had to fix it because Firefox had indigestion too. Pale Moon, Chrome and Opera were all happy as Larry, but the other two were having conniptions. :P

shadav

hm... that's an idea, shoving them all inside of a hidden menu persay.... that would at least solve the issue, and most wouldn't ever really even use them anyways.... as you said pretty much just the reply button.... quote and maybe modify.... everything else could be hidden away in a dropdown or something

lol yeah I know the breadcrumbs aren't really needed or used, that's just me... i've always prefered them to be a complete navigation map (call it my ocd.... so then I know where to go back and find that post at if needed) but I know most don't even really care, so just last location is fine....
home icon > You are here
would be fine for most

*ug why can I not type today, please excuse my bad english and typos, seems my dyslexia is really bad today for some reason*

[side note] for my forum a/s/l is sort of needed as it's religion based question and answers so being able to answer them would depend on location/language/age/gender, but yeah I know for most these aren't really needed that much....

Advertisement: