Light Theme CSS Adjustments for Stylebot and Stylish

I posted this in the Messy home page thread, but I feel it is finished enough to share in its own thread (some issues remain).

I’ll continue to work on it.

Grab it here:
http://www.upl.co/uploads/lightthemeadjustment1525572115.txt [updated 05/05/2018 18:56]

To use this, you must install Stylebot in Chrome, or Stylish in Firefox. Then create a new style that is attached to the blenderartists URL, and paste the CSS.

It’s not quite finished yet, but usable - far more usable than the original light theme, in my opinion. Remember that this is meant for desktop users and the light theme must be activated. (I dislike dark themes.)

Looks like this now:

Reason

Because the light theme is a mess, in my opinion. Because the landing page’s two columns and visual hierarchy are difficult to scan. And also because the colours of (in my view) important items are too subtle for easy scanning. And I like white themes, and a clean category page in my forums.

I work 99% of the time on a desktop, with browser windows either displayed on a portrait 1920x1200 screen or 2560x1440 screen (50% width browser window) - that is what this stylesheet is aimed at improving.

Hopefully it will provide some ideas for the BA forum dev team as well.
ps don’t hurt me for the bad CSS code and organization. I’ll clean it up later. :grinning:

Changes

Landing page

  • improved landing page category visual hierarchy
  • obvious New Topic button (green)
  • colour (orange) main category headings
  • removed superfluous top column headings (open doors)
  • increased overall white space to improve visual grouping
  • applied flex columns to category groups.
  • three columns for most, General Forums, Contests, and Support columns divided into two columns
  • category column increased width, while the latest posts column is reduced in width
  • visited posts now displayed in obvious colour (red-orange)
  • increased overall type size category column
  • decreased type size latest posts

header

  • full size background image
  • BA orange
  • in post view title is now displayed in white and on the left
  • in post view category displayed on the right as well (fixed multiple cats)
  • improved icon readability (white)
  • ! issue with logo link

other adjustments

  • posts list: obvious colouring of visited posts
  • avatar: added a subtle circle to improve look of avatar images with white and transparent backgrounds (like mine)
  • @Herbert123 mention tags display now in obvious colour (BA orange)
  • reply button posts now easily identifiable (grey background)
  • emoticons: yellow on white did not provide sufficient contrast. Added a drop shadow to improve contrast. Improved spacing.
  • post headings colour changed: BA orange.
  • increased post paragraph type size and leading to improve readability.
  • increased visual contrast quoted messages.
  • lists in post content: increased type size, improved spacing.

This is great work! I definitely feel that this is the way forward: instead of us reacting to and implementing every single suggestion we get, first build ‘proof of concepts’ in tools like Stylish. Try them out, share, discuss them with other forum members. That way, we’ll have some ‘real world’ data to work with and we can start integrating (parts of) these new themes into a new official theme. I’ll do an official post about this process later today.

For now, could you add a few more screenshots about the posts screen etc?

Here are two screenshots.

Post list:

Single thread (testing page: Test Post for Theming Purposes):

Scroll down post with title in header:

1 Like

I like what you’re doing here. Have you seen @IkariShinji’s dark version? He has some elements that are quite nice too, like removing the category bullets on the homepage and vertically aligning, and I think I like the narrower ‘last posts’ list too:

Just tried it. My 2c is it’s a lot better than the default, but personally I find the home page still too disjointed for my liking. The boards in multiple columns is not a look I find easy to scan at a glance, and frankly it annoys me.

I also think the font-size in posts is a little excessive, at least on my box.