makegamesSA Forum Restyle Attempt

Nitrogen · 3:28pm 11 Oct 2013

I was bored at work today, so I decided to see if I could make the forums look better.
Here's what I came up with in a few hours:

http://www.nitrogenlab.com/files/makegamessa/

To be honest, I'm not sure about red as the dominant colour, but I went with what the logo dictacted.
Thoughts?

EDIT:
[strong]Latest Version:[/strong]

Desktop:

Discussions - http://nitrogenlab.com/files/makegamessa/discussions.html
Thread Page - http://nitrogenlab.com/files/makegamessa/thread.html

Mobile:

Discussions - http://nitrogenlab.com/files/makegamessa/discussions-mobile.html
Thread Page - http://nitrogenlab.com/files/makegamessa/thread-mobile.html

duncanbellsa · 3:47pm 11 Oct 2013

I did a site re-design a while back, I think I need to pick it up again and try design the forums themselves...

Tuism · 4:01pm 11 Oct 2013

If we going for red I'd make it a lot more mute and not as loud. Will take a look at it later in photoshop, maybe dig up a secondary colour...

I do like that this restyling would take minimal effort and make it look a lot like it's "unique" than before. Think we should all not spend so much time on the small things.

Though I'd like some kind of label/category system that's a bit more obvious than what we have now for categories.

Fengol · 4:05pm 11 Oct 2013

Personally I'm not a fan of the red.

And can you show me what it would like like using 100% width?

I like the label buttons and shadow boxes.

If we can get something awesome, I don't mind updating the theme.

mikegeyser · 4:36pm 11 Oct 2013

@Nitrogen Dude that's pretty cool. Very clean, and I like the red.

dammit · 5:56pm 11 Oct 2013

No offense to @Nitrogen (great job btw) but I prefer the style of @duncanbellsa. The black just looks more classy. My work uses that red colour everywhere (in the building) and someone recently pointed out it's the colour of 70s kitchens...not something you want to have around you all the time.

Karuji · 6:01pm 11 Oct 2013

To throw in my meaningless 2c I really like @duncanbellsa's design. It does feel nice and clean, but @Nitrogen's forum theme is rather bright and friendly (orange over red would make me feel rather euphoric every time I came on the forums)

Of course this is compairing a front page and a forum page so apple and pears, apples and pears.

Nitrogen · 6:15pm 11 Oct 2013

No problem, yeah the red isnt the greatest, and I do like duncan's design.

The idea was to make something very quick and easy that could just improve usability on the site as it is now - eg. better fonts, better positioning of content etc. that could basically be dropped in with no coding.

I agree totally with @Tuism, this is just a quick something to make it more pleasant to be on the forums, and not necessarily a whole makeover.

@Fengol: Here is a fullwidth layout: http://www.nitrogenlab.com/files/makegamessa/fullwidth.html
I strongly disagree using a full-width as it is bad usability design with all your content forced to the edges of the page, leaving the center unused. One of the main reasons I did a redesign was because of the left-aligned site we have now.

Tuism · 6:20pm 11 Oct 2013

YES full width is a strain on reading.
YES muted colours are better. In fact I'd say change the whole background to a dark grey but that's just too drastic :P (there's a reason why unity's interface is on black)

Nitrogen · 6:31pm 11 Oct 2013

I removed the red on the headers in my original design, and stole the black from duncan's design :)

http://www.nitrogenlab.com/files/makegamessa/index2.html

Fengol · 7:03pm 11 Oct 2013

It must just be me because I really like the full width design; I find it easier to read. Maybe it's because I stare at lines of code all day.

I will send this past the other committee members just to confirm but if everyone likes @Nitrogen's latest design, then I'm happy to spring clean the forum.

Nitrogen · 7:09pm 11 Oct 2013

Lets see what everyone else says first, I'm sure not everyone has had a chance to check it out yet.

Plus there's the thread page to style up as well.

Karuji · 7:13pm 11 Oct 2013

@Fengol fullwidth doesn't go too well on a 16:9 monitor, I liked it fine when I was primarily using a 5:4 monitor. Also serious code times means rotating the monitor by 90 degrees so that I can look at code as pages.

But I do find the proposed themeing (skinning) to be prefferable to the current one, though I think some more muted colours as @Tuism suggested would be an improvement, though it is kinda hard to tell how the read would look compared to the current light blue since only the forum homepage is visible.

[Edit] I see @Nitrogen got a post in before me and kinda address what I was talking about ;)

Fengol · 7:24pm 11 Oct 2013

@Karuji all my screens are wide screen, but each to their own.

I will throw up the Google Analytics visitors stats which might shed some more light on how people are viewing our site.

Tuism · 7:34pm 11 Oct 2013

So had a look, looks cool :)

The number next to the notifications at the top (by user name) is still blue :)
And while we're on the minimal effort restyling...
For the love of goodness gracious, can we please look at restyling links? Like bold with underline or something? Can never see links when people get clever and put them into the text like ninjas. Links should be VISIBLE! XD
Also want to propose that we give "general", "competitions" etc in the main list of stuff different colours... Or if we could, different icons at the beginning of the line so people can use categories more meaningfully...

Like this: Dunno if that's a styling thing?

Fengol · 7:40pm 11 Oct 2013

Of 14856 visitors in the last month (11 Sept to 11 Oct)

Screen Resolutions
1. 1920x1080 - 4702
2. 1366x768 - 2102
3. 1600x900 - 1315
4. 1680x1050 - 1092
5. 1440x900 - 1070
6. 1280x1024 - 724
7. 1920x1200 - 567
8. 1280x800 - 497
9. 768x1024 - 396
10. 1760x990 - 245
11. 1024x768 - 211
12. 1360x768 - 192

Fengol · 7:42pm 11 Oct 2013

Oooh! @Tuism I want nice category colours!

Nitrogen · 9:04pm 11 Oct 2013

Yeah they do look nice. Okay I figured out a way to do them:

@Fengol, if you open up vanilla\applications\vanilla\views\discussions\helper_functions.php and edit line 76 to be:

echo Wrap(Anchor($Discussion->Category, '/categories/'.rawurlencode($Discussion->CategoryUrlCode), 'Category '.$Discussion->CategoryUrlCode));

(The last argument of the Anchor function is the css class for the category label, which I've set to Category and the Urlcode of the current category eg. 'general')

Then I'll add @Tuism's colours into the css. You'll obv. have to add more if you ever add more categories.

Fengol · 9:10pm 11 Oct 2013

@Nitrogen done

Nitrogen · 9:44pm 11 Oct 2013

@Fengol said:
@Nitrogen done

Sweet! I'm busy styling up the discussion thread page, will link when I have it presentable.

Tuism · 10:36pm 11 Oct 2013

Hmmmm, can't you seperate it out more? Betwen posts that is. I notice there's no margin around the whole thing and it's giving the content a crampy feel. The seperators should be given a bit more prominence. A margin around the whole post would do nicely, I think.

Oh and does the content have to have a background that covers the nice gradient on top? It's super subtle, but it bugs me cos it's not on the main discussion menu but only in the post view. XD

What main discussion font blue? Not sure what you mean? And links! Make the links more prominent, I can still hardly tell what are links XD

Nitrogen · 10:37pm 11 Oct 2013

@Fengol, to add colours to the Categories box on the right,

open vanilla\applications\vanilla\views\modules\categories.php on line 37:

.'<span class="Count '.$Category->UrlCode.'">'.number_format($Category->CountAllDiscussions).'</span>';

duncanbellsa · 10:41pm 11 Oct 2013

Wow forgot to check the thread for a while, I really like what @Nitrogen has done :D. Awesome stuff!!!

EDIT: Love the colour coding too! Nicely done!

Nitrogen · 10:44pm 11 Oct 2013

@Tuism:

1. Separations now larger, is that better?
2. I cant see anything covering the gradient on the thread page - the top of the content block has no background colour?
3. The Main discussion font is black with blue links: Like this?. They seem prominent enough to me as they are?

Tuism · 10:57pm 11 Oct 2013

1. Now I'm gonna sound like a real nitpick, but can you give the whole thing 10px more margin, just to see? It just feels so claustrophobic XD

2 and 3 see image :P

Nitrogen · 11:02pm 11 Oct 2013

@Tuism,

That is so weird - half of the styles are not coming through on your browser. What browser are you using?

This is what it should look like: (Windows 7 Firefox 24.0)

Tuism · 11:07pm 11 Oct 2013

OOOOOOOH

OK my bad COMPLETELY! I forgot to flush my cache with Control F5 XD

That thread view is MUCH better :D

the lack of a top edge (visually) is slightly irritating, but not really major. Is the current state AFTER I said add 10px? If so then you could probably take it out XD

mebbe just push the background back a bit darker, like F2F2F2 or something? It' just a taaaad too subtle, but it's working nicely now :)

Nitrogen · 11:10pm 11 Oct 2013

Lol, glad you sorted it out!

Great, so basically ignore everything you said XD

Tuism · 11:13pm 11 Oct 2013

Just thinking if the list view isn't a bit too busy now... My original design had short category names, it feels like the full names could distract too much from the thread titles... What do you think?

Maybe right dock it to left of the bookmark star on the right? Or make the thread title bigger - or give it more whitespace above each title...

Thoughts? XD

Tuism · 11:14pm 11 Oct 2013

Oh but the link is still a bit invisible :P Underline it? Underlining is a common convention for links...!

Rigormortis · 11:19pm 11 Oct 2013

Puuuuuuuuuuuuurty....sorry that's about all I can contribute. :)

Tuism · 11:41pm 11 Oct 2013

while we're on this subject, can someone put this favicon in? That default blue thing is all I see and it's irritating me :P

Nitrogen · 11:52pm 11 Oct 2013

@Tuism:

1. The main list of discussions is pretty busy now, but I dont really want to modify the category names because that means asking Fengol to dig into the php. I'd rather see how much we can do with pure CSS. Plus if we make them 3 letters long, they will be very confusing to read ("Questions and Answers" will become "QUE"). A possible solution is to make all the coloured blocks the same width, so that they line up properly with one another. I'll do that now and see if it makes it better.

EDIT: I tried to put it on the right of the line, seemed to make the title cleaner, but looses the nice colour coding effect because the labels are all alone by themselves on the right.

2. Underlining links is soooo 1998 :P I'll see if I cant make them a bit darker before we resort to making them underlined.

Tuism · 12:40am 12 Oct 2013

Underlining is underlining! They didn't change English because it was so BC :P Functionality I feel is more important. I keep missing links in posts, no jokes. If we can CSS in some kind of link icon... Or a frame... Or whatever, I don't care anymore as long as I can see it! :P

Question and answers = Q&A :)

But yeah I agree, the less hardcore changes the better. see how it looks with the same width.

Though maybe this might work - halving the tonality of the colours and making the label text black, so it's more faded out, but still have the visual labelling thing going, but not have to be loud and in your face.

Kinda like this image, but I was just hacking the image so nevermind the way the text looks buggered, that wasn't the point :P It's a prototype image :P

Elyaradine · 12:42am 12 Oct 2013

I'm rather fond of changing the backgrounds to links (which makes them look as if they're highlighted), or using a border-bottom: 1px dotted that becomes solid on hover. :)

btw, thank you guys for doing this!

Nitrogen · 12:55am 12 Oct 2013

Okay it's late, and I'm done styling.

Damnit! Hang on while I try that.

Nitrogen · 1:02am 12 Oct 2013

Okay have a look now at the thread page. If those links dont jump out at you, then something is very wrong with you :P

Tuism · 1:15am 12 Oct 2013

So many thumbs :)

The toppest post lost its bottom rounded corners for some reason, but that's no biggie XD

Annnd the "12 new" label... seems too loud in comparison now, can we change that to the google yellow? #ffd76e I mean google yellow as in that yellow they use in all their notice bars and things...

GREAT JOB @NITROGEN! :D It really looks awesome! :D

Nitrogen · 1:27am 12 Oct 2013

Fixed. Now Shhhhhh ;)

Elyaradine · 7:07am 12 Oct 2013

@Nitrogen: Thank youuuuuuu! :D

Fengol · 7:16am 12 Oct 2013

What about our mobile theme?

Mikdar · 7:28am 12 Oct 2013

Thank you :D

Nitrogen · 4:49pm 12 Oct 2013

Mobile Version done, and the comment box properly styled.

Desktop:

Discussions - http://nitrogenlab.com/files/makegamessa/discussions.html
Thread Page - http://nitrogenlab.com/files/makegamessa/thread.html

Mobile:

Discussions - http://nitrogenlab.com/files/makegamessa/discussions-mobile.html
Thread Page - http://nitrogenlab.com/files/makegamessa/thread-mobile.html

The Mobile is definitely only for small portrait screens, the desktop site looks 100% on an iPhone in landscape, plus you can zoom in and out which you cant on the mobile.

Fengol · 5:05pm 12 Oct 2013

I use the mobile version on my iphone more than I use the desktop so thank you for updating it as well.

Why doesn't the thread page have the category colours? Can we get a more pastel colour for the competitions label than the skarky yellow?

I'm trying to find out why the profile pictures are not shown in the desktop theme. Wouldn't it be convenient to see who posted the thread?

Nitrogen · 7:55pm 12 Oct 2013

The thread page doesnt have category colours on the sidebar yet because I copied the HTML from this forum page - Did you modify the category renderer like I posted above?

I made a few modifications to the discussions renderer, which just shows a more useful date and the thread author, but no avatar image yet.

applications\vanilla\views\discussions\helper_functions.php line 61:

if ($Discussion->LastCommentID != '') {
	            echo '<span class="LastCommentBy">'.sprintf(T('Started by %1$s'), UserAnchor($First)).'</span>';

	            echo '<span class="LastCommentBy">'.sprintf(T('Most recent by %1$s'), UserAnchor($Last)).'</span>';
               echo '<span class="LastCommentDate">'.Gdn_Format::Date($Discussion->LastDate, '%l:%M%p %B %e %Y').'</span>';
            } else {
               echo '<span class="LastCommentBy">'.sprintf(T('Started by %1$s'), UserAnchor($First)).'</span>';
               echo '<span class="LastCommentDate">'.Gdn_Format::Date($Discussion->FirstDate, '%l:%M%p %B %e %Y');
               
               if ($Source = GetValue('Source', $Discussion)) {
                  echo ' '.sprintf(T('via %s'), T($Source.' Source', $Source));
               }
               
               echo '</span>';
            }

I also thing you should install the Quotes plugin. You have to modify the class.quotes.plugin.php to remove the requiredApplication line to stop it refusing to work on Vanilla 2.0, but it seems to work well.

Fengol · 8:23pm 12 Oct 2013

@Nitrogen Done both. I'm not sure I like the standard datetime for the comments though. What do other people think?

Nitrogen · 8:57pm 12 Oct 2013

@Fengol, Agreed, that was just the "kitchen-sink" date format, we can definitely prune it down a bit, but I've yet to find documentation on their obscure formatting options.

Fengol · 9:01pm 12 Oct 2013

@Nitrogen http://linux.die.net/man/3/strftime

Nitrogen · 9:32pm 12 Oct 2013

Doh! Showing my lack of Linux knowledge right there :P

How about something like '%l:%M%p %b %e'? which should be something like "9:31pm 12 Oct "

Did you look at the Quotes plugin?

Fengol · 9:39pm 12 Oct 2013

No, not yet. Working on my comp entry :P

Nitrogen · 9:40pm 12 Oct 2013

Alrighty, yeah I need to get rolling on mine too.

makegamesSA Forum Restyle Attempt

Comments