An Ableton Forum User-skin : Nightskin

[Angstrom]

2019 edit
The New forum has a new Nightskin, the first version is here
viewtopic.php?f=40&t=233607

----------



Hello fellow timewasters.
Recently I've been tinkering with the skin of this forum, I made a darker, larger fonted, night-time skin.

You can use it on desktop/laptop browsers - though you'll need a copy of the Stylish add-on for Chrome or the same Stylish addon Firefox.

Here is the style you need to paste into Stylish -
the Firefox version - which will auto apply to this domain.
and The version for Chrome which needs you to set this domain as shown in the image at the bottom of this post.

Here's a few images of what it looks like, click to see bigger versions








INSTALLATION
Get the stylish plugin. Then get the version of the Forum style for your browser from these links. Then paste that text into a new user style which you can make and name it whatever you feel like .

the Firefox version - which will auto apply to this domain.
and The version for Chrome which needs you to set this domain as shown
here. note that you enter the domain for which this style file will operate.


If you have problems let me know, there may be errors as this is just something I've been tinkering with for my own amusement and thought I'd share it.

[steko]

Still using your old grey version (slightly modded) with Safari.

Let me use this occasion to thank you one more time for that! Gave me years of a smooth Ableton Forum experience! SMOOTH!

THANK YOU!

[Angstrom]

Heh, yeah thanks. I still use that one also. But at night when my old eyes are tired and need huge fonts I've shifted over to this instead.

It uses some modern tricks to get around the lack of element IDs in this PHPbb skin. So to target the login link I now use a[href*="login"]{......}
Rather than a huge string of nth-child selectors

[fishmonkey]

thanks!

not having used Stylish before it took me a little while to figure out that the Firefox version does not have all the features of the Chrome version (there is no user-friendly way to specify domains for example).

as far as i can tell the easiest way to get the skin working in Firefox is to install it using Stylish on Chrome first, and then use the export to Mozilla function to get a version of the code that will then work if you copy and paste it into Stylish on Firefox...

one thing i would really like to have back is the paragraph spacing. how do i do that?

[Angstrom]

Ah yes, I should add in better Firefox instruction. You can specify the domain, but its in a different place than for Chrome.

Also, I'll update the style file with some changes I've made recently ... Including fixing those paragraphs!

I'll do that in a while.

[Angstrom]

OK, I updated the original post.
Now there are two files. One for Chrome and one for FF.

the FF one will auto apply to the domain using the @-moz-document domain("forum.ableton.com") {
rule

[fishmonkey]

thanks for the quick update...

[Angstrom]

updated to v 1.21 to fix a few issues with invisible links, and the styles of Reply / Delete on the IM pages.

the links in the main post are updated

[fishmonkey]

help! my eyes! my eyes!

[Angstrom]

haha, well.
I've not remade the Nightskin yet, but this is what I am currently using.
It's not perfect, I knocked it together last night after this new forum theme became active.

Use this style in the Chrome or Firefox addon called "Stylus". And apply it to the URL forum.ableton.com

Code: Select all

body {
    font-size: 14px;
    background-color: #e7e7e7;
}
ul.forums,
ul.topics,
li.row {
    background-color: transparent;
}
li.row {
    border-bottom: 2px solid #fff;
}

ul.topiclist li.row dl {
    margin: 5px 0;
}
.row .pagination li a,
.row .pagination li span {
    border-radius: 2px;
    padding: 1px 6px;
    font-size: 15px;
}
.row-item.row-item a {
    font-weight: bold;
}

.button,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3 {
    background-color: #7f7f80 !important;
    color: #fff !important;
}

.post {
    background: transparent;
    border-color: #7f7f80;
}
.action-bar {
    font-size: 14px;
}
.pagination li.active span {
    background-color: #7f7f80;
}
.pagination a.button,
.pagination li.active span,
.action-bar .button,
.search-header .button-search,
.search-header .button-search-end {
    font-size: 16px;
    padding: 5px 10px;
}
.inputbox,
.search-box .inputbox {
    font-size: 16px;
    line-height: 40px;
    display: inline-block;
    height: 35px;

    transition: 0.3s all;
    border: none;
}
.search-box .inputbox:focus,
.search-box .inputbox:hover {
    width: 250px
}
.postlink,
.postlink:focus,
.postlink:hover,
.postlink:visited {
    color: #4040A1;
}
.inputbox:focus, .inputbox:hover {
    border-color: #c6c6c6;
}

[fishmonkey]

thanks, but for some unknown-to-me reason that style has no effect on Firefox 65.0.1 with Stylus 1.5.2, on MacOS 10.14.3

[fishmonkey]

thanks, but for some unknown-to-me reason that style has no effect on Firefox 65.0.1 with Stylus 1.5.2, on MacOS 10.14.3

derp! it was my URL setting that was wonky.