User blog:Fluffyneondinosaur/FandomDesktop & Rebrand

As many of you probably know, Fandom has decided to take the big step of completely shifting to FandomDesktop, and getting is getting rid of Oasis, once and for all. You've also probably noticed that the navigation bar has changed to white for logged in users, and an unflattering shade yellow for people who are logged out (if you're using Oasis then it will also be yellow). This blog is going to have a few tricks and tips to (hopefully) help make your time on Fandom a better experience. Reminder: All of the CSS and Javascript on this page is for personal use ONLY. Using it wiki-wide is against Fandom's Terms Of Use. Note: You do  not  need to read the entire blog. You can just look at the table of contents and see what catches your eye.

Notifications You might have noticed that the notifications on Oasis have been glitching recently, it's because of the shift to FandomDesktop. I would recommend using FandomDesktop, but if you don't want to, then I have another trick for that down below. Currently, there is a glitch on FandomDesktop notifications, where you can only see the most recent ten. Luckily you can get past that when you go on discussions, there you can see all your notifications (it works the same as it did on Oasis). As of now, on FandomDesktop you can't see if a notification is read or not, so you can use some CSS to fix that. Go to Special:MyPage/global.css and paste this code: /* Credits to HumansCanWinElves for this code */

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:OrganizedNotifs.css&only=styles"; .wds-is-unread .wds-notification-card__icon-wrapper .wds-icon { fill: #088488; } Then do a hard refresh to bypass your browser's cache (click to see full image). What it looks like:

Oasis Fandom has begun retiring the Legacy designs, and began completely using FandomDesktop. Starting the week of August 9th, 2021, the preferences to revert to these skins will be removed. The useskin URL parameter (?useskin=Oasis or ?useskin=Hydra) will still be available on wikis (to view a specific page with the Oasis skin) until the week of August 23rd, 2021. After that, the only way to view pages in Oasis is to use OasisRevived. Follow these instructions to use it:


 * Open your Global CSS page
 * Paste the code below to that page:

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:OasisRevived.css&only=styles";


 * Go to your Special:Preferences's appearance section
 * Tick the Enable personal JavaScript option
 * Open your Global JS page
 * Paste the following code to that page:

importArticles({    type: 'script',     articles: [         'u:dev:MediaWiki:OasisRevived.js',     ] });

You should start seeing fandom look like it's using Oasis, there will be a few differences between Oasis and OasisRevived, but they are very similar. You can read the similarities and differences on the OasisRevived page.
 * Do a hard refresh to bypass your browser's cache (click to see full image)

Navigation Bar Due to the recent Fandom Rebrand, the navigation bar is white for logged in users, and yellow for logged out. These colors don't suit many customized wikis, and can often be distracting. To fix this, there some CSS which turns the navigations bar into one of that specific wiki's theme colors. This makes it much more pleasing to the eye. When imported into your Global CSS page, it will show up as errors, but still click save. The CSS:
 * root {

--fandom-global-nav-background-color: var(--theme-accent-color); --fandom-global-nav-text-color: var(--theme-accent-dynamic-color-1); --fandom-global-nav-link-color: var(--theme-accent-dynamic-color-1); --fandom-global-nav-link-color--hover: var(--theme-accent-color--hover); --fandom-global-nav-icon-color: var(--theme-accent-dynamic-color-1); --fandom-global-nav-icon-background-color: var(--theme-accent-color); --fandom-global-nav-icon-background-color--hover: var(--theme-accent-color); --fandom-global-nav-icon-background-color--active: var(--theme-accent-color); --fandom-global-nav-icon-border-color: var(--theme-accent-dynamic-color-1); --fandom-global-nav-icon-border-color--hover: var(--theme-accent-dynamic-color-1); --fandom-global-nav-icon-border-color--active: var(--theme-accent-dynamic-color-1); --fandom-global-nav-bottom-icon-color: var(--theme-accent-dynamic-color-1); --fandom-global-nav-counter-background-color: var(--theme-accent-color--hover); --fandom-global-nav-counter-label-color: var(--theme-accent-dynamic-color-1); --fandom-global-nav-logo-separator-color: var(--theme-accent-color); }


 * root {

--fandom-text-color: var(--theme-page-text-color); --fandom-text-color--rgb: var(--theme-page-text-color--rgb); --fandom-text-color--hover: var(--theme-accent-color--hover); --fandom-link-color: var(--theme-link-color); --fandom-link-color--hover: var(--theme-link-color--hover); --fandom-link-color--rgb: var(--theme-link-color--rgb); --fandom-link-color--fadeout: var(--theme-page-background-color); --fandom-accent-color: var(--theme-accent-color); --fandom-accent-color--hover: var(--theme-accent-color--hover); --fandom-accent-label-color: var(--theme-accent-label-color); --fandom-border-color: var(--theme-border-color); --fandom-secondary-button-color: var(--theme-accent-color); --fandom-secondary-button-color--hover: var(--fandom-accent-color--hover); --fandom-dropdown-background-color: var(--theme-page-background-color); --fandom-notifications-background-color: var(--theme-page-background-color); --fandom-notifications-read-card-background-color: var(--theme-page-background-color); --fandom-notifications-unread-card-background-color: var(--theme-page-background-color--secondary); --fandom-notifications-footer-text-color: var(--theme-page-text-color); --fandom-banner-notification-background-color: var(--theme-page-background-color); --fandom-banner-notifications-close-icon: var(--theme-page-text-color); }

Then do a hard refresh to bypass your browser's cache (click to see full image). What it looks like: That's all for now, if you have any more that you would like to be added to this blog, then message me, or ping me in the comments!