Author Topic: Readability adjustments  (Read 6130 times)

wayfinder

  • Sub Bass
  • *
  • Posts: 62
  • Honor: 25
  • fantastic beats and where to find them
    • wayfu
    • wayfu
    • View Profile
    • wayfinder on facebook
Readability adjustments
« on: January 09, 2016, 06:38:55 pm »
I've had some readability troubles with the standard template (in another topic here, the small quote text is mentioned already), so at first I chose another, but that didn't have all the features of the standard template, so I did some custom CSS styling using a browser extension (I use 'Stylish': https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en).

Here's the code I'm currently using and what it does:


body { font-size: 88% !important; font-family: Verdana !important } // the custom font is quite beautiful, but I found it hard to read, so I replaced it with Verdana
#mainframe { font-size: 100% !important } // I'm also making it a bit larger
.poster h4 { margin-left: 0.75em !important; height: 100% !important; width: auto !important } // this left-aligns the user names with the rest of the poster's info when using Verdana.

blockquote { font-size: 100% !important; padding: 15px !important } // makes the quotes larger

.keyinfo h5 { font-size: 65% !important }  // these two lines adjust the size of the auxiliary info around the post, which is currently quite prominent when compared to the post contents
.smalltext { font-size: 0.65em !important } // it also reduces visual clutter

.windowbg { background-color: #e7eaef !important } // this enables alternating colors for posts. makes it easier to tell them apart
.windowbg2 { background-color: #f7faff !important }

.poster { margin-bottom: 1em !important }    // these three lines move the "edited by" info and the links to report posts to the bottom of the post. reduces visual clutter
.postarea { margin-bottom: 1em !important; height: 100% !important }
.moderatorbar { clear: both !important; overflow: hidden !important }


The overall effect is much better readability, more focus on the post content as opposed to user interface, and reduced visual clutter. The downside is that the new font is a lot less pretty. I'll take it though! :)

Here are two before-after comparisons:

Before
After

Before
After


I hope this helps someone! And perhaps a few of the changes may be something for the board operators to think about.

VOIID

  • Sub Bass
  • *
  • Posts: 91
  • Honor: 29
    • voiidmusic
    • IamVOIID
    • View Profile
Re: Readability adjustments
« Reply #1 on: January 09, 2016, 07:10:17 pm »
It definitely looks way better and is easier to read. Hopefully they will aprove those changes or make similar ones