Improvement of readability of this board.

Pyrr · Jun 19th 2018

Here is a style sheet which slightly improves the readability of this board.

You have to install Stylish (firefox) or an equivalent Plugin to use it.

It's only quick'n'dirty for now, but i didn't had the time for more.

Changes:

Background of Disabled Posts will be changed to green
Background of content of posts will be white (disabled, can be enabled by remove the /* */ in the "content background change" section
Post Editor will have same background color as the finished post
the background image of the admin posts is removed
Rank Images are hidden
Improved readability of breadcrumbs
page header is centered
the Footer box with the online usernames has reduced opacity
Badge Textcolor (e.g. the amount of users here) changed to white
Hyperlinks in Posts are underlined
Videos are smaller

Code

/*Disabled Posts*/
.section .messageDisabled {
background-color: rgba(0, 255, 0, 0.3);
}
/* Mark Hyperlinks with underline */
.messageText a, .redactor-layer a {
text-decoration: underline;
}
/*videos*/
.videoContainer {
height:325px;
width: 425px;
max-width: 100%;
max-height: 100%;
padding-bottom: 0;
}
/*content background change change*/
/*
.messageText, .redactor-layer {
padding: 5px;
background-color: white !important;
border-radius: 5px;
color: black;
}
*/
/*Post Editor*/
.redactor-box {
background-color: transparent;
}
.redactor-toolbar-box {
background-color:rgba(119, 99, 77, 1);
}
.redactor-layer {
color: transparent;
color: black;
}
/*Admin Background Removal*/
.messageBody {
background-image: none !important;
min-height: inherit !important;
}
/*Hide Rank*/
.userRank {
display: none;
}
/*breadcrumbs*/
.breadcrumbs {
text-shadow: 1px 1px 1px black,1px -1px 1px black,-1px 1px 1px black,-1px -1px 1px black;
}
/*header padding*/
.pageHeaderLogo>a {
padding-left: 0;
}
/*Footer*/
.boxesFooterBoxes {
background: rgba(0,0,0,.8);
}
/*badge e.g. counter in https://forum.runesofmagic.gameforge.com/members-list/*/
.badge, a.badge {
color: white;
}

Display More

Arenja · Jun 24th 2018

Thanks for this Pyrr

Here's a little darker style, I removed some backgrounds and stuff

additionally:

- Cut out rank titles because they are too long are now shown

- Footer (at least in chrome) did create a scrollbar to the right - removed this

- Changed font body to something that doesn't create eye cancer

- Avatar background is now transparent

Stylish for those who use chrome https://chrome.google.com/webs…nngjfgmeleoegfcffe?hl=de&

Code

body {
font-family: Arial;
color: #929090;
background: #171819
}
.content {
background-image:none;
}
.dialogContainer, .dialogContent {
background-color:#1d1c1c;
}
H1.ContentTitle {
color:#1d1c1c;
}
/*profile link*/
.userlink a:hover {
color:white;
}
/*hover Pop Ups*/
.popoverContent {
background-color:#1f1e20;
color:#7f7f7f;
}
/*Disabled Posts*/
.section .messageDisabled {
background-color: rgba(0, 255, 0, 0.3);
}
/* Mark Hyperlinks with underline */
.messageText a, .redactor-layer a {
text-decoration: underline;
}
/*videos*/
.videoContainer {
height:325px;
width: 425px;
max-width: 100%;
max-height: 100%;
padding-bottom: 0;
}
/*avatars*/
.userAvatarImage {
background-color: transparent;
}
/*content background change change*/
/*
.messageText, .redactor-layer {
padding: 5px;
background-color: white !important;
border-radius: 5px;
color: black;
}
*/
.boxesFooterBoxes {
/* background: rgba(0, 0, 0, 0.15); */
border-radius: 10px;
border: thin #77634d solid;
/* margin: initial; */
margin: 0 45px;
box-shadow: 5px 5px #000;
margin-top: 25px;
max-width: 1220px;
}
/*Post Editor*/
.redactor-box {
background-color: transparent;
}
.redactor-toolbar-box {
background-color:rgba(119, 99, 77, 1);
}
.redactor-layer {
color: transparent;
color: black;
}
/*Admin Background Removal*/
.messageBody {
background-image: none !important;
min-height: inherit !important;
}
/*Hide Rank*/
.userRank {
display: none;
}
/*show complete rank*/
.userTitleBadge {
max-width: none;
}
/*breadcrumbs*/
.breadcrumbs {
text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}
/*header padding*/
.pageHeaderLogo>a {
padding-left: 0;
}
/*Footer*/
.boxesFooterBoxes {
background: rgba(0, 0, 0, .8);
margin: 0 45px;
max-width: 1220px;
}
/*badge e.g. counter in https://forum.runesofmagic.gameforge.com/members-list/*/
.badge, a.badge {
color: white;
}

Display More

Additional changes only:

Code

body {
font-family: Arial;
}
/*Disabled Posts*/
.section .messageDisabled {
background-color: rgba(0, 255, 0, 0.3);
}
/* Mark Hyperlinks with underline */
.messageText a, .redactor-layer a {
text-decoration: underline;
}
/*videos*/
.videoContainer {
height:325px;
width: 425px;
max-width: 100%;
max-height: 100%;
padding-bottom: 0;
}
.content {
max-width: 70%;
margin: auto;
}
/*avatars*/
.userAvatarImage {
background-color: transparent;
}
/*content background change change*/
/*
.messageText, .redactor-layer {
padding: 5px;
background-color: white !important;
border-radius: 5px;
color: black;
}
*/
.boxesFooterBoxes {
/* background: rgba(0, 0, 0, 0.15); */
border-radius: 10px;
border: thin #77634d solid;
/* margin: initial; */
margin: 0 45px;
box-shadow: 5px 5px #000;
margin-top: 25px;
max-width: 1220px;
}
/*Post Editor*/
.redactor-box {
background-color: transparent;
}
.redactor-toolbar-box {
background-color:rgba(119, 99, 77, 1);
}
.redactor-layer {
color: transparent;
color: black;
}
/*Admin Background Removal*/
.messageBody {
background-image: none !important;
min-height: inherit !important;
}
/*Hide Rank*/
.userRank {
display: none;
}
/*show complete rank*/
.userTitleBadge {
max-width: none;
}
/*breadcrumbs*/
.breadcrumbs {
text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}
/*header padding*/
.pageHeaderLogo>a {
padding-left: 0;
}
/*Footer*/
.boxesFooterBoxes {
background: rgba(0, 0, 0, .8);
margin: 0 45px;
max-width: 1220px;
}
/*badge e.g. counter in https://forum.runesofmagic.gameforge.com/members-list/*/
.badge, a.badge {
color: white;
}

Display More

Brachialys · Oct 5th 2018

and a quick color mod that avoids too much brown and improves contrast towards the black text:

(thanks for the script)

Code

/*content background change change*/
.content {
background-image: none;
background-color: #c3c388 ;
}
.messageText, .redactor-layer {
padding: 5px;
background-color: #c3c388 !important;
border-radius: 5px;
color: black;
}
.messageSidebar {
background-image: none;
background-color: #888844 !important;
}

Display More

PS: and use Stylus as addon now instead of Stylish

Improvement of readability of this board.

Diogenes Jun 19th 2018

Share