Advertisement:

Author Topic: Has anyone improved /main_block.png to have transparent rounded edges?  (Read 26362 times)

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,086
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #300 on: October 05, 2019, 12:02:47 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!

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #301 on: October 05, 2019, 12:05:51 PM »
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.

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,086
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #302 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.

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #303 on: October 05, 2019, 12:20:04 PM »
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.

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #304 on: October 05, 2019, 12:20:44 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

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #305 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.

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,086
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #306 on: October 05, 2019, 12:59:11 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.

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #307 on: October 05, 2019, 05:39:43 PM »
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. :)
« Last Edit: October 05, 2019, 06:10:53 PM by Antechinus »

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,086
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #308 on: October 06, 2019, 12:08:58 AM »
@ant; alright, I'll take a look in the morning.  I'm pretty hammered atm

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #309 on: October 06, 2019, 03:11:58 AM »
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.

Offline Biology Forums

  • SMF Hero
  • ******
  • Posts: 3,779
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #310 on: October 06, 2019, 10:37:46 AM »
Looking forward to the next release

Offline Bloc

  • Full Member
  • ***
  • Posts: 524
  • Gender: Male
    • bloc67 on GitHub
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #311 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.

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

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 3,415
  • Gender: Male
    • DiegoAndresCortes on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #312 on: October 06, 2019, 01:58:42 PM »
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.

Offline Bloc

  • Full Member
  • ***
  • Posts: 524
  • Gender: Male
    • bloc67 on GitHub
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #313 on: October 06, 2019, 02:29:00 PM »
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.

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #314 on: October 06, 2019, 03:41:26 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.


Quote
EDIT: 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.


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.

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.
« Last Edit: October 06, 2019, 03:56:54 PM by Antechinus »

Offline shadav

  • Jr. Member
  • **
  • Posts: 208
  • Gender: Female
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #315 on: October 06, 2019, 04:05:16 PM »
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

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #316 on: October 06, 2019, 05:27:57 PM »
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.

Offline lurkalot

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 1,595
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #317 on: October 06, 2019, 05:41:16 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

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,960
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #318 on: October 06, 2019, 05:51:40 PM »
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:

Code: [Select]
.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. :)



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.

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. 


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

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

Offline shadav

  • Jr. Member
  • **
  • Posts: 208
  • Gender: Female
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #319 on: October 06, 2019, 06:04:27 PM »
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....