News:

Use the "Forum Search"
It may help you to find anything in the forum ;).

New Theme!

Started by An_dz, April 22, 2018, 03:49:29 AM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

An_dz

Isaac is asleep, let's be the dictator and change the theme without asking! ;D

I've decided to change the forum theme, this theme has been around for more than two years and recently I've changed and fixed lots of stuff on it and feel it can be our new default.

The first obvious thing is that this new theme follows the same style of our main portal and is something different, personalised for our community and not the default old look of SMF (Simple Machines Forum).

But that's not the only thing, the forum now has responsive design, be it on your desktop or on your phone the forum will look fine, no more zooming all the time when opening the forum on your phone.

I also hope you like the new Thanks button to replace the old Like buttons. They are much less intrusive and cute. :)

Use it and get to know the new theme and let me know if you find anything that could improve.

PS: @IgorEliezer I fixed the 00 flag bug ;)

IgorEliezer

#1
Quote from: An_dz on April 22, 2018, 03:49:29 AMmore than two years
That's what I call understatement.

Since the 00 flag bug was fixed, now I will use Pitcairn flag. 8)

As to the theme, "oh shinny".... but I haven't made up my mind yet. Right off the bat...



..., I think there's too much white.

If feasible (the forum CSS can be tricky), some ideas we could test (not in this order, nor all of them):

       
  • Add a subtle background image in the header, following the main portal's header -- or something else to distinguish the header from the rest;
  • Narrow down the forum body;
  • The riskiest: in the forum index, add more contrast to the between td cells (#FAFAFA) and the background (#FFFFFF). You could try #F7F7F7 which is the same of "this" post.

Ters

I find that non-bold links can be a bit hard too see under certain lighting conditions. A bit more contrast against the background would help.

prissi

Oh, I just though the forum discovered my age and defaulted to the new handicapped large print. Seriously, the whole think is way too expanded right now, it feels more like a childrens book and reminds me to official UK letters "This content is also available in large print.)

Apart from that (which can be probably siye down somewhere), the look is certainly more modern. Since MS dictacte, what modern is, well I think is follows these lines.

jamespetts

I like it. It is very Simutrans.
Download Simutrans-Extended.

Want to help with development? See here for things to do for coding, and here for information on how to make graphics/objects.

Follow Simutrans-Extended on Facebook.

wlindley

Light-blue text on white is basically impossible to read.  Can we please have black or *very* dark text please?  There is a reason we print books with black ink, not light-grey ink.

An_dz

Quote from: Ters on April 22, 2018, 08:44:48 AM
I find that non-bold links can be a bit hard too see under certain lighting conditions. A bit more contrast against the background would help.
Quote from: wlindley on April 22, 2018, 01:14:28 PM
Light-blue text on white is basically impossible to read.  Can we please have black or *very* dark text please?

Yes, contrast was sub-optimal. Fixed.

Quote from: IgorEliezer on April 22, 2018, 06:32:45 AM
Add a subtle background image in the header, following the main portal's header -- or something else to distinguish the header from the rest;

I'd need to see what can be done, it's a good idea to make the header "less important".

Quote from: IgorEliezer on April 22, 2018, 06:32:45 AM
Narrow down the forum body;

Well, the width is unchanged and the content is definitely narrower than the old theme, but I can reduce it. What's your screen width?

Quote from: IgorEliezer on April 22, 2018, 06:32:45 AM
The riskiest: in the forum index, add more contrast to the between td cells (#FAFAFA) and the background (#FFFFFF). You could try #F7F7F7 which is the same of "this" post.

That's the hard one, those tables are very tricky.

Quote from: prissi on April 22, 2018, 12:07:05 PM
Oh, I just though the forum discovered my age and defaulted to the new handicapped large print. Seriously, the whole think is way too expanded right now, it feels more like a childrens book and reminds me to official UK letters "This content is also available in large print.)
Texts were increased from 12,5 px to 15 px, that's 9,4 pt to 11,2 pt. I also slightly increased the distance between lines. And I can't see what's the problem on making it easier to read, I even reduced the size of some useless texts.

The front page has some work to be done but the way those tables are made makes it hard to work with.

Quote from: prissi on April 22, 2018, 12:07:05 PM
Apart from that (which can be probably size down somewhere), the look is certainly more modern. Since MS dictacte, what modern is, well I think is follows these lines.
There's no Microsoft here unless you brought it with you.

This design has been available for many years, Apple has influenced it more than Microsoft as they were the first to implement it on their systems, and they also did not create it. Microsoft, having most of the desktop market, obviously made it mainstream and also improved it on many key points and influenced Google. And the whole idea can be traced back to the 40's with what we call minimalism, though we can extend it to its influences on Japanese Zen philosophy, especially wabi-sabi that are ancient.

The key point of what is considered the "modern" design is accessibility. Less images, especially for decorations, less resources, less bandwidth, faster loading. Consistent font size, maximum of three main font sizes, what is important is normal, useless small, and titles are big. Text with book-like spacing, no need to cram the bible in 100px height, make lines more separate and you can read big texts without getting lost in the lines. Separate what is important to read with what is useless, in case of a forum it's our messages that are important, so no need to cram this text next to useless texts like the profile stuff or post buttons.

But why not take a look on how the MSN homepage from 2004 – when SMF was first release – is just like how the current SMF default theme (our old). But maybe I should have waited 10 years, then Microsoft will have a "new modern" and "their" old will be ok?

sheldon_cooper

I was surprised upon entering the forum, but it was a good scare !!! ;D
I liked the change, it's like changing the furniture in your house, at first it's strange, but over time, you get used to it. :thumbsup:

gauthier

QuoteAnd I can't see what's the problem on making it easier to read
We don't get large screens to have texts bigger but to have more text readable without scrolling. I agree with Prissi on this point.

Leartin

Quote from: gauthier on April 23, 2018, 05:36:22 PM
We don't get large screens to have texts bigger but to have more text readable without scrolling.
I actually get larger (and more) screens to have several things on the monitor at once, side by side.


I have a bit of a trouble with the spacing between two lines. It's fine between two lines, but it's too far apart if there is an empty line in the middle, especially if each paragraph is just a one-liner (since the layout goes across the whole screen, much can be a one-liner, eg. the initial post is full of them)

People are used to having empty lines to space out paragraphs, as there is no difference between an intended change of line and an unintended one due to limited horizontal space. I even used double empty lines to space out between different topics in longer posts. The line space we have right now would be more appropriate if a paragraph would cause 1.5 times as much space, not double. Plus, while actually writing the post, there is less space between lines, so you don't really see how off an empty line looks while writing it.

If possible, I think the best solution would be to add paragraph space - make sure it's applied everywhere though (posts, text editor, quotes, "topic summary" etc.). Thus, no empty lines would be required anymore, and the spacing can remain (though older posts would look horrible).

Otherwise, line space probably has to be reduced a bit.


Another thing: While writing a post, in the topic summary, quoted text is larger than the posted text. That seems off, the quote is not as important as the response to it.

prissi

The forum is too big for my screen now. This is really the only big complain, I have to manually set zoom level to 80% to have something resembling the old size. Alternatively, could we have the same forum theme with the only change back to old font size and text spacing? Then one can choose by oneself.

Ters

Quote from: Leartin on April 24, 2018, 06:13:19 AMIf possible, I think the best solution would be to add paragraph space - make sure it's applied everywhere though (posts, text editor, quotes, "topic summary" etc.). Thus, no empty lines would be required anymore, and the spacing can remain (though older posts would look horrible).
I'm not sure the quick reply box, which I normally use, have a way to specify whether I want a new paragraph or just a new line.
Is this a new paragraph, or a new line? It certainly doesn't look like a new paragraph when writing.

Changing that is probably beyond what we can do.

An_dz

I've reduced most fonts sizes and fixed the different font on the input boxes. There are still some places where font sizes are random but I'll eventually fix them.

rsdworker

looks better now - the sizes are correct - its was too large before

IgorEliezer

Behold my extra fabulous Paint.NET skills!



How about remove the white space between the cells... for simplicity and less whiteness. :)

An_dz

Ok, here's an update and all the feedback sent and if I already fixed it or not:

✔ Smaller front page -> fixed
❌ Igor table background -> rejected by above
❌ Igor narrow forum -> no diff
❕❕ Igor distinct header -> not yet
❔ Leartin font spacing -> needs confirmation
✔ Leartin topic summary font craze -> fixed
✔ Leartin text input areas font -> fixed
✔ Ters/wlindley link contrast -> fixed
✔ prissi/gauthier font size -> fixed (some places may still be bugged)

Let me know if I missed any feedback

gauthier

Much better now for me regarding font size, thanks ;)

prissi

Thank you, the font sizes are indeed better. Still the spacing is very wide between posts. Maybe this is somewhat due to the responsive design?

An_dz

#18
No, I think it's because the distance between text lines is slightly bigger. So you get around 20~40px of difference depending on your screen. I'll try to move some of the elements to compensate.

Edit: I've reduced some elements now. Let me know what you think of it now.

prissi

Thank you. I think the remaining is due to larger avatars, at least I got the impression and the very larger emty heart symbol. But do not focus only on my critique, I think overall a design working on many devices is much more useful. And I am probably still on IT oldtimer, with my rather small screens.

jamespetts

One reason that forum posts may seem more distantly spaced might be that signatures are no longer automatic: one explicitly has to check the "show signature" box. This means that, for short posts, there is often a large amount of white space below the post that would formerly have been occupied by a signature.
Download Simutrans-Extended.

Want to help with development? See here for things to do for coding, and here for information on how to make graphics/objects.

Follow Simutrans-Extended on Facebook.

jamespetts

This is a short post with a signature for comparison. (Apologies for double posting: I hope that an exception to the general rule will be permitted in this instance for the purposes of the demonstration).
Download Simutrans-Extended.

Want to help with development? See here for things to do for coding, and here for information on how to make graphics/objects.

Follow Simutrans-Extended on Facebook.

Ters

Quote from: jamespetts on April 27, 2018, 01:41:24 PM
One reason that forum posts may seem more distantly spaced might be that signatures are no longer automatic: one explicitly has to check the "show signature" box. This means that, for short posts, there is often a large amount of white space below the post that would formerly have been occupied by a signature.

So if we only could turn off most of the stuff to the left of the post itself, that would get better. (I don't care for anything but username, rank and languages.)

jamespetts

What takes most of the space is the avatar - and we wouldn't want to disable that, as it is quicker to look at an avatar than read a name to identify regular posters.
Download Simutrans-Extended.

Want to help with development? See here for things to do for coding, and here for information on how to make graphics/objects.

Follow Simutrans-Extended on Facebook.

gauthier

For short posts (the majority of posts are short), the occupied height is fixed by the avatar isn't it ? Screens are wide, short texts don't need a big width. Then, would it be possible to take the information that is currently displayed under the avatar and put it at the right of the avatar ?

Another idea: stop displaying that much information on a profile at each post: show only the avatar and a name, eventually the "mod here" flag or some other flags. If someone doesn't know a member well, he will click on the name to show the entire profile.

Ters

On a different, but perhaps related note: The new-links don't take me to the first unread post anymore.

isidoro

Does it only happen to me, in Firefox and Ubuntu 18.04?  Some numbers appear to be circled.  While in some parts, they look cool, in others it's weird.

ACarlotti

I think much of the information next to a post can be useful - for example, I know I've found it useful to see post count and languages displayed there (although the latter partly because I didn't notice the country flag). There is some duplication, however, which should probably be removed (e.g. the text "Moderator"/"Admin"/"Devotee" is duplicated by the image below, and in other circumstances that itself sems to be a somewhat opaque indication of post count or some other measure of forum activity).

Apart from removing duplication, I think the other changeI would suggest would be to have the avatar displayed to the right of the text currently above it, allowing enough space for "Simitrans-Extended project coordinator" to fit on two lines alongside it. Then perhaps only jamespetts' details would require extra vertical space beyond that of the header and message body.
(jamespetts: Incidentally, what is this "Simitrans" you speak of?)

isidoro: Numbers look normal to me (tested also on Firefox on Arch Linux). Have you installed some plugin or font in your browser that would change this?

jamespetts

Oops - thank you for spotting the error: now fixed.
Download Simutrans-Extended.

Want to help with development? See here for things to do for coding, and here for information on how to make graphics/objects.

Follow Simutrans-Extended on Facebook.

Isaac Eiland-Hall

Quote from: jamespetts on April 27, 2018, 01:42:06 PM(Apologies for double posting:

The doublepost rule has been relaxed. The general guideline is still based on time, but takes into account: Is it a short new message? Perhaps it should be an edit. Is there a reason for the doublepost? Reasons can include 1) needing to update, even within 24 hours, 2) attachment of files, 3) sufficiently long posts are allowed. The idea against doubleposting was to avoid "bumps" as well as the fact that the profile stuff takes up vertical space, so several short replies are unpleasant.

So this is a very valid instance of where a doublepost is 100% fine and good. :)

Quote from: Ters on April 27, 2018, 07:18:11 PMOn a different, but perhaps related note: The new-links don't take me to the first unread post anymore.

Same here :(

IgorEliezer

#30
Quote from: Ters on April 27, 2018, 07:18:11 PM
On a different, but perhaps related note: The new-links don't take me to the first unread post anymore.
It seems the bookmark links -- those that end with #{id} -- stopped working. For instance, click on "Re: New Theme!" of any post, it'll take you to the 1st post of the page. (edited)

Ters

I was taken to the correct post now. (And by the way, the # thing is called a fragment. In older HTML versions, they pointed to anchors, but, as I just learned, it seems they now can point to any element with an id.)

IgorEliezer

Quote from: Isaac.Eiland-Hall on April 28, 2018, 01:45:47 AMThe doublepost rule has been relaxed. The general guideline is still based on time, but takes into account: Is it a short new message?
You are talking to a lawyer, gentleman. The Forum Rules and Guidelines hasn't been amended since the day it came into effect in 2010, so that for James Petts nothing has changed ever since. He is doing law right. :)

I'll change the forum rules. Probably something around the lines "Double-post only to add new and useful information that otherwise can be missed", but I won't discuss the final text here to avoid topic derail.

Ters

Now I was taken to a post, but not the first unread. Ironically, I was taken to my own post about the link not working.


And when posting, I was taken back to the same post.

isidoro

Quote from: ACarlotti on April 27, 2018, 11:22:12 PMisidoro: Numbers look normal to me (tested also on Firefox on Arch Linux). Have you installed some plugin or font in your browser that would change this?

Much on the contrary.  The forum looked alright until the change of theme.  I use Xubuntu 18.04.  My guess is that among the fonts proposed in the style sheet of the new theme the one chosen by Firefox in my system as a fallback has this problem.

These are the fonts: Arial,Helvetica Neue,Helvetica,apple color emoji,segoe ui emoji,notocoloremoji,segoe ui symbol,android emoji,emojisymbols,emojione mozilla,sans-serif