Style customization for the new board

[Automate]

Oh look! It's the new Freeones board and it isn't completely shit! Well, I'm one to always complain about something and even in this case, I do have several things that I want to customize. Things that I can do by myself, nobody on the Freeones team need to bother. These customizations are done with Cascading Style Sheets and browser addons like Stylus (the one I'm using right now) that apply those styles to override the ones the site is using.

Here are the fruits of my complaints so far:

/* Non-rounded avatars */
.avatar {
    border-radius: 0;
}
/* Background color */
.p-body {
    background-color: #505050;
}
/* Message box colors */
.message-inner {
    background-color: #b0b0b0;
}
.message-attribution-main {
    color: #202020;
}
.message-lastEdit {
    color: #202020;
}
.message-signature {
    color: #202020;
}
/* Quote and code box colors */
code {
    background-color: #d0d0d0;
    color: #202020;
}
.bbCodeBlock-content {
    background-color: #d0d0d0;
    color: #202020;
}
/* Right upper corner buttons and post number text color */
.message-attribution-opposite {
    color: #202020;
}
.message-attribution-opposite--list {
    color: #202020;
}
/* Thread titles */
.p-title {
    color: #d0d0d0;
}
/* Username display near the thread title */
.username {
    color: #d0d0d0 !important;
}
.u-concealed {
    color: #d0d0d0 !important;
}
/* Thread menu header */
.menu-header {
    color: #202020 !important;
}

Anyone who wants to put in their own customizations here, please do so and comment (of course, if you can be bothered, screenshot) what kinds of changes they make or what board component they change, like I've done above inside the CSS comment block /* */.

Edit: fixes to some glaring omissions, such as white text on white background on the thread menu header text that this causes.

Here's what the changes look like at the moment:

 

[Supafly]

Can you tell me which lines I ned to change to switch the very azur colour of text with links to possibly a deeper blue and maybe switch them to fat font? I like that the font turns into orange when mouseover. That is quite nice

 

[Automate]

Add this @Supafly :

/* Links */
a {
    color: #4060c0;
    font-weight: bold;
}
/* Link color when mouseover */
a:hover {
    color: #f85;
}

The problem here for me is that that changes color for links everywhere because this board doesn't seem to have specific enough CSS IDs to target links in different parts of the board, so if you use those other background color tweaks above then this link color probably will blend into the background with those enabled in some parts of the site. It's simple enough technically to make these changes (color, background-color and hexadecimal HTML color definitions after that is most of what you need and then to find the HTML element and its class - or preferably ID), but when it comes to looking at how it affects the whole, it gets somewhat more difficult.

However, I'm not an CSS expert by any means so I probably don't know all the tricks for CSS selectors. If someone is an expert at this, please post.

 

[Automate]

New stuff for the main thread view, very much work in progress, caveat emptor and so on:

/* Non-rounded avatars */
.avatar {
    border-radius: 0;
}
/* Background color */
.p-body {
    background-color: #505050;
}
/* Message box colors */
div.message-cell--main {
    background-color: #c0c0c0;
}
div.message-cell.message-cell--user {
    background-color: #b0b0b0;
}
div.message--post {
    background-color: #208080;
}
.message-attribution-main,
.message-lastEdit,
.message-signature {
    color: #202020;
}
/* Quote and code box colors */
code,
.bbCodeBlock-content {
    background-color: #d0d0d0;
    color: #202020;
}
/* Right upper corner buttons and post number text color */
.message-attribution-opposite {
    color: #202020 !important;
}
.message-attribution-opposite--list {
    color: #202020;
}
/* Thread titles */
.p-title,
.p-description {
    color: #d0d0d0;
}
/* Username display near the thread title */
.username {
    color: #7090ff !important;
}
a.u-concealed {
    color: #d0d0d0;
}
/* Thread menu header */
.menu-header {
    color: #202020 !important;
}
/* Links */
a {
    color: #4060c0;
    font-weight: bold;
}
/* Link color when mouseover */
a:hover {
    color: #f85;
}
/* Thread list */
div.block,
div.block-container {
    background-color: #c0c0c0;
}
div.block-filterBar {
    /*background-color: #a0d0d0 !important;*/
    background: linear-gradient(0deg, #a43, #f85);
}
a.filterBar-menuTrigger {
    color: #222;
}
/* Thread list details */
/* This won't work, the number after the ID changes
   and a wildcard can't be used there */
/*
a#js-XFUniqueId* {
    color: #e0e0e0 !important;
}*/
.structItem-startDate {
    color: #202020 !important;
}
/* This won't work, maybe because the target that this
   is supposed to change is an anchor (i.e. a link) and
   something maybe overrides the style, not sure */
/*.structItem-pageJump {
    background-color: #e0e0e0 !important;
    color: #202020 !important;
}*/
span[itemprop="name"] {
    color: #ddd;
}
/* Colors for the Replies: and Views: texts on threads */
dl.pairs {
    color: #202020;
}
/* This doesn't work for some reason */
/*dt#text {
    color: #202020;
}*/

Looks tolerable to my eyes and doesn't break readability at the first cursory glances. Anyone can freely change the color codes I've put in to experiment what they look like and customize to their heart's content. And again, because I know that this bears repeating or the next thing is that I get complaints of colors always being too dark: the color definition is hexadecimal, so you won't get e.g. 100% white by putting #999999 there, that would be #ffffff. That should be evident from the color definitions containing letters a-f, but I just know it won't be. You can also use common color names in place of those codes like this:

color: black
color: orange
color: olive
color: blue
color: silver

Short form can also be used, like this:

color: #ddd
color: #fab

That is equivalent to

color: #dddddd
color: #ffaabb

Unfortunately, letter p is not usable in hexadecimal.

 

[Automate]

Here's the CSS setting for changing the color of visited links:

a:visited {
    color: #c6c;
}

Of course, the browser setting "remember browsing (and download) history" must be enabled for this to work at all. Additionally, some links in signatures seem to have the link text inside span elements and I don't yet know how to reach those, but most links will work with this.

Edit: turns out that there's an order for these pseudo-classes in order for them to work properly: :link, :visited, :hover, :active. So in the Stylish CSS file those need to be in that order as well from the top down.

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

On that note, updated styles again:

/* Non-rounded avatars */
.avatar {
    border-radius: 0;
}
/* Background color */
.p-body {
    background-color: #505050;
}
/* Message box colors */
div.message-cell--main {
    background-color: #c0c0c0;
}
div.message-cell.message-cell--user {
    background-color: #b0b0b0;
}
div.message--post {
    background-color: #208080;
}
.message-attribution-main,
.message-lastEdit,
.message-signature {
    color: #202020;
}
/* Quote and code box colors */
code,
.bbCodeBlock-content {
    background-color: #d0d0d0;
    color: #202020;
}
/* Right upper corner buttons and post number text color */
.message-attribution-opposite {
    color: #202020 !important;
}
.message-attribution-opposite--list {
    color: #202020;
}
/* Thread titles */
.p-title,
.p-description {
    color: #d0d0d0;
}
/* Username display near the thread title */
.username {
    color: #7090ff !important;
}
a.u-concealed {
    color: #d0d0d0;
}
/* Thread menu header */
.menu-header {
    color: #202020 !important;
}
/* Links */
a:link {
    color: #4060c0;
    font-weight: bold;
}
/* Visited link */
a:visited {
    color: #c6c;
}
/* Link color when mouseover */
a:hover {
    color: #f85;
}
/* Link color when clicked, set it to the same as :link for now */
a:active {
    color: #4060c0;
}
/* Thread list */
div.block,
div.block-container {
    background-color: #c0c0c0;
}
div.block-filterBar {
    /*background-color: #a0d0d0 !important;*/
    background: linear-gradient(0deg, #a43, #f85);
}
a.filterBar-menuTrigger {
    color: #222;
}
/* Thread list details */
/* This won't work, the number after the ID changes
   and a wildcard can't be used there */
/*
a#js-XFUniqueId* {
    color: #e0e0e0 !important;
}*/
.structItem-startDate {
    color: #202020 !important;
}
/* This won't work, maybe because the target that this
   is supposed to change is an anchor (i.e. a link) and
   something maybe overrides the style, not sure */
/*.structItem-pageJump {
    background-color: #e0e0e0 !important;
    color: #202020 !important;
}*/
span[itemprop="name"] {
    color: #ddd;
}
/* Colors for the Replies: and Views: texts on threads */
dl.pairs {
    color: #202020;
}
/* This doesn't work for some reason */
/*dt#text {
    color: #202020;
}*/

I probably need to make an account in some userstyle site and just put the link here. Doing updates this way will make this thread too busy to read in no time.

 

[Automate]

Another version. This one has lighter colors and is trying to approach the old board colors, although I intentionally set background colors a slight bit darker.

/* This is an attempt to get close to the old board colors.
   It will not be completely correct because I haven't found
   screenshots of individual threads from the old board (yet)
   to sample the colors from and some of the background colors
   and gradients still seem blaringly bright, so I've made
   those a bit darker. */
/* Non-rounded avatars */
.avatar {
    border-radius: 0;
}
/* Background color */
.p-body {
    background-color: #9ed6f9;
}
/* Links
    Found out that if I use the pseudo-class :link here, the
    link color will in places override everything I set for
    some texts afterwards which are also links, such as the
    share, bookmark and post numbers on top right of the
    message box. Setting it with just the element, it doesn't
    override (found out that it has to do with specificity,
    not getting into that right now). So I'm not using the
    pseudo-class then. */
a {
    color: blue;
    font-weight: bold;
}
/* Visited link */
a:visited {
    color: #c6c;
}
/* Link color when mouseover */
a:hover {
    color: #fa7411;
}
/* Link color when clicked, set it to the same as :link for now */
a:active {
    color: blue;
}
/* Date, share, bookmark, post number, signature text */
div.message-attribution-main,
div.message-lastEdit,
div.message-signature {
    color: black !important;
}
/* Right upper corner buttons and post number text color */
ul.message-attribution-opposite {
    color: black !important;
}
ul.message-attribution-opposite--list {
    color: black !important;
}
/* Message box colors */
div.message-cell--main {
    background-color: #eee;
}
div.message-cell.message-cell--user {
    background-color: #ddd;
}
div.message--post {
    background-color: #bbb;
}
/* Thread titles */
.p-title,
.p-description {
    color: black;
}
/* Username display near the thread title */
.username {
    color: black;
}
/* Thread menu header */
.menu-header {
    color: black !important;
}
/* Thread list: background gradients */
div.structItem {
    background: linear-gradient(0deg, #e0e0e0, #eee);
}
/* Thread list: title text */
/*div.structItem-title a {
    font-weight: normal;
}*/
/* Thread list: thread start date text */
li.structItem-startDate a {
    color: black;
    font-weight: normal;
}
/* Thread list: most current post date */
time.structItem-latestDate {
    color: black;
    font-weight: lighter;
}
/* Main forum section background gradients */
div.node-body {
    background: linear-gradient(0deg, #e0e0e0, #eee);
}
/* Main forum section title gradient */
h2.block-header {
    background: linear-gradient(0deg, #46a9ff, #75daff);
}
/* Main forum section date display */
ul.listInline {
    color: black;
}
/* Main forum section username display */
li.node-extra-user a {
    color: blue;
    font-weight: normal;
}
/* Sub-forums text */
div.node-subNodeMenu a.menuTrigger {
    color: black;
}
/* Filter bar above the thread list */
div.block-filterBar {
    background: linear-gradient(0deg, #46a9ff, #75daff);
    color: white;
}
/* Filter menu text color */
a.filterBar-menuTrigger {
    color: black;
}
/* Top forum hierarchy navigation */
span[itemprop="name"] {
    color: black;
}
/* Colors for the Replies: and Views: texts on threads */
dl.pairs {
    color: black;
}
dl.pairs dt {
    color: black;
}
/* Usernames on the thread list */
div.structItem-minor a {
    color: blue;
    font-weight: normal;
}
/* Dates in the thread list */
li.structItem-startDate a {
    color: black;
}
/* Page jump box text color */
span.structItem-pageJump a {
    color: black;
}

Don't use this at the same time as all the dark theme settings above. Use one or the other, otherwise colors will most likely break in all kinds of irritating ways.

That's me done for a while. Somebody else can continue from here. Oh, and screenshots on what this does:

 

[Goobernaut]

Since you switched to a light blue color of text I struggle to read the posts. Sorry to say but the old board was much easier to read.

 

[Automate]

Since you switched to a light blue color of text I struggle to read the posts. Sorry to say but the old board was much easier to read.

Eh, what? Do you mean something that I did with that style? You can change the colors yourself to whatever you want, as I thought I made that completely, infinitely and permanently clear from the absolute beginning of this thread. If instead you want to address the Freeones team, you posted in the wrong thread.