Support us on Patreon to keep GamingOnLinux alive. This ensures all of our main content remains free for everyone. Just good, fresh content! Alternatively, you can donate through PayPal. You can also buy games using our partner links for GOG and Humble Store.
New theming live now - report issues here
Page: 1/2»
  Go to:
Liam Dawe Mar 29, 2020
Hi all, a big overhaul of the theme code went live today along with a theme-switcher you can find in the user/guest menu.

Note
Yes, the switcher requires JavaScript. Since I know some don't like that, you can still use the theme switcher in your User settings. That was also updated, as it now properly forces your picked theme there (which overrides the top nav slider).

Of course, there will be issues, some edge-cases I've missed.

If you see anything that doesn't look right or act right please let me know here so I can fix them. Before reporting, please refresh your cache to ensure it's not your browser keeping old CSS/JS around.

The forum
The old category/forum view is gone, long live flat forum. Honestly, it's just better, it matches the home page style of all categories shown. This way, categories that don't usually get a look-in will now actually have their posts show up when people make them.

Last edited by Liam Dawe on 29 March 2020 at 8:52 pm UTC
GustyGhost Mar 29, 2020
It is a nice improvement. I've always felt that forums do themselves a disservice by breaking everything up into many fine grained categories.
serge Mar 29, 2020
Hello,

If you switch to the dark theme and then close the browser, or go to another website and come back, you end up with the light theme.

If you Force the theme through the profile settings, it works fine.

Last edited by serge on 29 March 2020 at 4:14 pm UTC
Liam Dawe Mar 29, 2020
Quoting: sergeHello,

If you switch to the dark theme and then close the browser, or go to another website and come back, you end up with the light theme.

If you Force the theme through the profile settings, it works fine.
Not seeing that behaviour across firefox/chrome on both desktop and mobile. Sounds like you have something interfering with it. It's using local storage as the checker, perhaps you're wiping it or blocking it.
Donkey Mar 29, 2020
Quoting: Liam Dawe
Quoting: sergeHello,

If you switch to the dark theme and then close the browser, or go to another website and come back, you end up with the light theme.

If you Force the theme through the profile settings, it works fine.
Not seeing that behaviour across firefox/chrome on both desktop and mobile. Sounds like you have something interfering with it. It's using local storage as the checker, perhaps you're wiping it or blocking it.

I am seeing the same behaviour as well. Also when the dark theme is enabled and (re)loading the page, the toggle button "switches" after the page have finished loading which draws attention to it. I find it a bit annoying. At least now that I noticed it :)
Liam Dawe Mar 29, 2020
Okay, I believe I have solved the issue of the theme flashing between light for a split second and then dark if you've got it turned on using the slider. The issue is how JavaScript loads. The really small bit of code to detect the set theme, then use it is now bundled into the HTML so it's done before the page actually loads the body content - so no flashing :) (I also tested that on my crappy 4G connection on my phone, works great - no flashing at all and page loads quickly).

As it turns out, the above is exactly what Twitch do. Only realised after I did it, so it seems like the real solution that I fell into there :D

Haven't yet come up with a good solution for the switcher flicking between though. Happy to take on ideas.

I've moved the slider into the user menu on desktop/mobile menu. I'll also adjust for Guests/Not Logged In people to have a menu to do so too. Guests now have their own little menu.

Last edited by Liam Dawe on 29 March 2020 at 8:48 pm UTC
chris.echoz Apr 1, 2020
The dark theme isn't applied at all whenever I reload the page on Firefox 75.0b2.
The "theme" key in local storage is saved, though and set to "dark".

Since the attribute "data-theme" is set, your code doesn't even look at what's set in the local storage and just uses "default" as the value, as that's set in: <html data-theme="default" class=" idcae idcac" lang="en">

var website_theme='light';
if (document.documentElement.hasAttribute("data-theme")) {
    website_theme=document.documentElement.getAttribute("data-theme");
} else {

    // If I run this on its own, the theme changes to dark as expected.

    if (localStorage.getItem("theme")) { 
        if(localStorage.getItem("theme")=="dark") {
            website_theme="dark";
        }
    }
    else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        website_theme="dark"
    }
    if (website_theme=="dark") {
        document.documentElement.setAttribute("data-theme","dark")
    }
}

Last edited by chris.echoz on 1 April 2020 at 9:58 pm UTC
Liam Dawe Apr 1, 2020
Quoting: chris.echozThe dark theme isn't applied at all whenever I reload the page on Firefox 75.0b2.
The "theme" key in local storage is saved, though and set to "dark".

Since the attribute "data-theme" is set, your code doesn't even look at what's set in the local storage and just uses "default" as the value, as that's set in: <html data-theme="dark" class=" idcae idcac" lang="en">

var website_theme='light';
if (document.documentElement.hasAttribute("data-theme")) {
    website_theme=document.documentElement.getAttribute("data-theme");
} else {

    // If I run this on its own, the theme changes to dark as expected.

    if (localStorage.getItem("theme")) { 
        if(localStorage.getItem("theme")=="dark") {
            website_theme="dark";
        }
    }
    else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        website_theme="dark"
    }
    if (website_theme=="dark") {
        document.documentElement.setAttribute("data-theme","dark")
    }
}
Check your user preferences aren't set to the light theme, user settings in the UserCP on the site overrides that switch. Otherwise, it will be a cache issue your end or a plugin getting in the way as this works across chrome/firefox both desktop and mobile.

Edit: Actually just noticed it says default, that looks like a leftover issue from the switch. Hold on 5 mins.

Edit 2: Should be fixed, a bunch of people didn't have their theme correctly unset from "default" (which no longer exists) it's either nothing and set by the JS and the new toggle or forced as light/dark in the User Control Panel.

Last edited by Liam Dawe on 1 April 2020 at 10:06 pm UTC
chris.echoz Apr 1, 2020
Quoting: Liam Dawe
Quoting: chris.echozThe dark theme isn't applied at all whenever I reload the page on Firefox 75.0b2.
The "theme" key in local storage is saved, though and set to "dark".

Since the attribute "data-theme" is set, your code doesn't even look at what's set in the local storage and just uses "default" as the value, as that's set in: <html data-theme="dark" class=" idcae idcac" lang="en">

var website_theme='light';
if (document.documentElement.hasAttribute("data-theme")) {
    website_theme=document.documentElement.getAttribute("data-theme");
} else {

    // If I run this on its own, the theme changes to dark as expected.

    if (localStorage.getItem("theme")) { 
        if(localStorage.getItem("theme")=="dark") {
            website_theme="dark";
        }
    }
    else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        website_theme="dark"
    }
    if (website_theme=="dark") {
        document.documentElement.setAttribute("data-theme","dark")
    }
}
Check your user preferences aren't set to the light theme, user settings in the UserCP on the site overrides that switch. Otherwise, it will be a cache issue your end or a plugin getting in the way as this works across chrome/firefox both desktop and mobile.

Edit: Actually just noticed it says default, that looks like a leftover issue from the switch. Hold on 5 mins.
That did it, even without forcing the theme in the user CP it now stays dark if I set it to dark with the switch.
Liam Dawe Apr 1, 2020
Quoting: chris.echozThat did it, even without forcing the theme in the user CP it now stays dark if I set it to dark with the switch.
See my above reply, no need to force it in UserCP unless you want to. Should be all good now.
chris.echoz Apr 1, 2020
Quoting: Liam Dawe
Quoting: chris.echozThat did it, even without forcing the theme in the user CP it now stays dark if I set it to dark with the switch.
See my above reply, no need to force it in UserCP unless you want to. Should be all good now.
Can confirm it works as intended now.
pete910 Apr 19, 2020
Can we have the option of the old style forum back please?

Hate this reddit category type BS :(
Liam Dawe Apr 19, 2020
Quoting: pete910Can we have the option of the old style forum back please?

Hate this reddit category type BS :(
Just for you, added it back. On the forum, there's now two button at the top to switch between them. Enjoy.

Edit: Also finally made the category view more responsive to the screen size, hiding some bits to make it better :)

Last edited by Liam Dawe on 19 April 2020 at 11:52 am UTC
Ehvis Apr 19, 2020
Wanted to add a few comments on the new theming now that I have looked at it for a couple of weeks.

The vertical centre alignment of the images on the front page looks really messy to me. Since the right part is top aligned, the image is never in the same place. Doesn't look good to me. Never had any problems with the top alignment.

Ever more of an issue for me is the share buttons with the articles. It starts with "share", which doesn't really do anything. Then I get four icons for services that I don't even have an account for. And the last one is RSS feed of articles which is not a share and is since it doesn't apply to the article, it is out of place. All of it is combined with attention grabbing colours. Although it's worse for me than the first, I can easily have the whole thing removed with ublock. In fact, it already does so with my standard setup.

Otherwise everything is great. Still not a fan of the dark theme, but standard suits my needs just fine.
Liam Dawe Apr 19, 2020
Quoting: EhvisWanted to add a few comments on the new theming now that I have looked at it for a couple of weeks.

The vertical centre alignment of the images on the front page looks really messy to me. Since the right part is top aligned, the image is never in the same place. Doesn't look good to me. Never had any problems with the top alignment.
Will think on that one. Ideally a way to ensure the box is always the same size and the images but that's difficult.

Quoting: EhvisEver more of an issue for me is the share buttons with the articles. It starts with "share", which doesn't really do anything.
That I actually agree with, the share image itself was also aligned funky across different browsers. It's now just a nicely aligned plain text. It makes it clear while also taking less attention. Good shout.

Quoting: EhvisThen I get four icons for services that I don't even have an account for. And the last one is RSS feed of articles which is not a share and is since it doesn't apply to the article, it is out of place.
Again, agreed. RSS icon removed, wrong place for it and we already have it on the home page article list anyway. Good shout again on it.
pete910 Apr 19, 2020
Quoting: Liam Dawe
Quoting: pete910Can we have the option of the old style forum back please?

Hate this reddit category type BS :(
Just for you, added it back. On the forum, there's now two button at the top to switch between them. Enjoy.

:D:D:D:D
Ehvis Apr 21, 2020
I noticed you use tiny versions of the images on the main page now. The reason I noticed is because they sometimes stay on the screen. It seems to happen when you go back (using the brower back button) form a page to the main page and scroll up. The tiny image won't be replaced by the full image until the image is scrolled fully into view. Although it doesn't appear to be 100% consistent. I only use firefox, so that's all I have tested.
Liam Dawe Apr 21, 2020
Quoting: EhvisI noticed you use tiny versions of the images on the main page now. The reason I noticed is because they sometimes stay on the screen. It seems to happen when you go back (using the brower back button) form a page to the main page and scroll up. The tiny image won't be replaced by the full image until the image is scrolled fully into view. Although it doesn't appear to be 100% consistent. I only use firefox, so that's all I have tested.
Got a screenshot? Works fine here.

Frankly, Firefox's current default content line, where it decides to load the full image is not great, it's far too close to your actual view. Chrome has a more sane default with things loading when slightly off the screen so you save data and see less pop-in.
Ehvis Apr 21, 2020
Quoting: Liam DaweGot a screenshot? Works fine here.

Of course:

To protect your privacy, external media requires approval to load. Source: i.imgur.com
View cookie preferences.
Accept & Show Accept All & Don't show this again   Direct Link


It gets more interesting though. When I click up on the scrollbar once, I get:

To protect your privacy, external media requires approval to load. Source: i.imgur.com
View cookie preferences.
Accept & Show Accept All & Don't show this again   Direct Link


See how the picture was replaced, but it has moved up with respect to the position of the "tiny" picture. So might be an alignment thing of some sort.

Edit: also another interesting thing. Right now it doesn't matter how far I scroll the page and go back. When scrolling up, the first image to not load when scrolling back up is the one from the fractalis post.

Last edited by Ehvis on 21 April 2020 at 1:28 pm UTC
Liam Dawe Apr 21, 2020
Okay, so part of the problem was how I never put a true standardized size for article homepage/tagline images. I've now done this, so they all now need to be an exact size when uploaded and so when they're sized at different levels since we use responsive design they now all fit exactly the same. This will make working with all things like this easier going forwards but older articles won't quite fit atm but that will eventually not be an issue.

That was part of the problem here I think, as the tiny low-res image never matched up and it couldn't because the tagline images were always a different size. I've adjusted the first 7 items on the home page, let me know how you get on.
Ehvis Apr 21, 2020
Have it a quick try. The jump of the image is gone. But the late loading is still there. Doing a very slow middle mouse button scroll upward, the image replaces when I get halfway a lowercase letter on the second line of the article title.
While you're here, please consider supporting GamingOnLinux on:

Reward Tiers: Patreon. Plain Donations: PayPal.

This ensures all of our main content remains totally free for everyone! Patreon supporters can also remove all adverts and sponsors! Supporting us helps bring good, fresh content. Without your continued support, we simply could not continue!

You can find even more ways to support us on this dedicated page any time. If you already are, thank you!
Login / Register

Register Forgot Login?
★ Support Us
Popular this week
Search or view by category
Contact
Buy Games
Buy games with our affiliate / partner links:
Latest Comments
Misc