Band of Others Test Community

[Kenadian]

Hello all,

We're currently testing an install of our future Community Software (XenForo) at the following location:

http://bandofothersgaming.com/community

It's installed on a fresh dummy database so registration will be required to use it.

Please don't post anything you deem important over there as that database will be wiped when we merge this database over.

Use it, abuse it and please report any bugs in this topic here.

Thanks.

 

[tmtm]

I know it's far from final, but the white text with the busy background makes it borderline unusable.

 

[Justin Rebelo]

My comments posted on the new site were basically the same as tmtm. The graphic background makes readability suffer badly. I would get away from image backgrounds, preferably, but if really set on them, then darken them a great deal or use something more of a tiled texture that isn't too loud to interfere with the page content over top of it.

 

[Kenadian]

I know it's far from final, but the white text with the busy background makes it borderline unusable.

My comments posted on the new site were basically the same as tmtm. The graphic background makes readability suffer badly. I would get away from image backgrounds, preferably, but if really set on them, then darken them a great deal or use something more of a tiled texture that isn't too loud to interfere with the page content over top of it.

I should have been clear on this point initially, my apologies.

This is the very basics and humble beginnings of where we'll ultimately end up aesthetically. Each and every forum will have a background image behind it to differentiate them as well as give them there own look and feel.

For iRacing we'll have an iRacing based background, Elite: Dangerous will have it's own background and so on and so forth.

The reason it's hard to read right now is I'm quite literally starting on the sites aesthetic and I need images like this to show me where work needs to be done in order to contrast properly.

If you look at the Teamspeak Sidebar (for example) the readability is far better than that of the forums. Even in this state it isn't considered final but it's one step closer to that mark.

Typically you guys never really see it this rough as I usually have a v1 usable theme for everyone to try but this time around I didn't get that far. This means you're suffering through the beginnings of v1, sorry.

This is live theming and honestly for me there simply is no better way to do it.

 

[Daunt]

What you should do is what mimic the effect I did on the twitch icons.

An overlay (the effect in photoshop) properly done reduces contrast, which is exactly what you want from a background - a low contrast image. Even so, with the above example, given we'd be using body text and such on the website, I'd lower the contrast even more.

 

[tmtm]

I figured as much, but just wanted to throw my 2 cents in. I'll try to poke at it a little more to test the functions.

 

[Kenadian]

To give you a better idea of how I intend to mask the background for forum readability I ask you please revisit the site at this time.

Of course this is still very early in the process but it should give you some idea of the direction I'm heading in.

Ultimately all forums will have their own background as already stated previously but I'll be searching to strike a balance between background image show through with usability.

Also, for those who are not a fan of image background forums there will be an option to choose a simpler theme that overrides all.

The reason for this is to satisfy those who like eye candy (myself) and those who prefer simplicity.

 

[Daunt]

Great job Ken. Not only is that screenshot epic (would be better if it had four rings) but the text works a lot better. And it's great to have a second option.

I reported 2 bugs in the appropriate thread that I found. Of which one I'm sure you're aware of.

Glad to see that it looks like we'll be fully migrated by the end of tomorrow. :icon_cheesygrin:

 

[Kenadian]

Ken 2 things:​

1. Quotations seem to change font text color to white, which on the odd yellow background obviously doesn't work.
2. The login button, I believe due to the embedded twitch window, is hidden or is far from obvious. It downright does not show for me. The only way I was able to log on was on the bottom of the page.

I'd also use a sans serif font for the body text.

Edit: also x2, the popup window to edit things shows with maybe 75% contrast which I think makes it a bit hard to read and edit over text.
​

I hope you don't mind Kyle but I copied your post here as I'd like this topic to act as the basis for all theme issues.

I don't want to lose any of it once the other database is wiped and keeping it here means it will automatically move to the new site once the databases are merged.

Your guys input has been so valuable that once we've completed the base theme I'll catalog all these issues and use them as a roadmap for theming in the future.

A big thanks all!!!

To address your input above:

1. Quotations seem to change font text color to white, which on the odd yellow background obviously doesn't work.
​

Good to know, I'll put it on the fix list for v1.

2. The login button, I believe due to the embedded twitch window, is hidden or is far from obvious. It downright does not show for me. The only way I was able to log on was on the bottom of the page.​

I just noticed this myself yesterday lol but for a different reason. The border was not maintaining color behind the Twitch Viewer and it took me forever to realize it was the Login Bar.

When I theme I have to remain logged in to maintain access to the Admin Control Panel so I never see the Login Stuff.

It's a simple fix by either setting the z-index amount higher or moving the login to the side of the Twitch Viewer.

I'll try moving it to the right first as I think it will be more obvious if placed outside the main forum constraints.

I'd also use a sans serif font for the body text.

Great idea, duly noted.

Edit: also x2, the popup window to edit things shows with maybe 75% contrast which I think makes it a bit hard to read and edit over text.

WYSIWYG is going to be a whole project on it's own (it always is). I'll try to sort this prior to v1.

The aim is also to have a faint but discernible B2O watermark inside the WYSIWYG window to the lower right.

...

A note on how I choose to theme given my historically poor manner of creating themes.

Prior to our first test install of XenForo a few months ago, I've always themed in a very chaotic manner yet fooled myself into thinking it was structured.

I tackled items as I found them and ordered them in the .css files in a manner inconsistent with how the pages are displayed. This made it horribly cumbersome to revert changes or even find the code where change was necessary.

As I started to wrap my head around XenForo's Theming Engine it became clear that my way of doing things was disorganized and stupid.

My biggest issue was tackling all the easy stuff first making massive headway in aesthetic but oftentimes coding myself into a corner. Essentially I'll change a constraint, z-index or position something incorrectly, etc., and then have to write dodgy code to deal with the corner I themed myself into.

Xen exploited the futility of this in short order so I had to make some drastic changes, all for the better.

Now I'm no longer tackling things as I find them, I'm living with them and letting them bother me until I get to that point.

This is why the theme is so visually behind where I typically am at this point, because I tackled the header first. It took 4 or more hours to get it to what it is but it needed to be done first.

Now I'm tackling theming in an organized "top down" fashion as the site itself warrants.

So this is how it's done now (and it's working surprisingly well):

1. Main Page: bandofothersgaming.com/community/index.php

• Header
• Navbar
• Breadcrumb
• Main Body
• Sidebar
• Footer

2. Category Pages: http://bandofothersgaming.com/community/index.php?categories/main-category.1/

• Main Body
• Content (if applicable)

3. Thread/Topics Pages: http://bandofothersgaming.com/community/index.php?threads/site-bug-reporting.4/

• Main Body
• Content

4. Controls: sitewide

• WYSIWYG Editor
• Controls
• Icons
• Pagination
• ...all remaining forum elements

5. User CP:

Of course any good theme engine has overlap between templates which is the reason you see styling as much as you do however it is incidental styling only.

All glaring issues mean I've either not seen them or aren't there yet so please do not hesitate to post about them whether you think I've seen them or not.

As stated previously, I'll eventually create a roadmap that will hopefully demonstrate this a bit more analytically.

I'll also be creating a version history to use as a pseudo bug tracker.

 

[Kenadian]

Locked.

Please use other thread for discussion:

http://bandofothersgaming.com/forum/showthread.php/2816-B2O-Forum-Aesthetic-Bug-Tracker-(XenForo)?p=29686#post29686