User blog:Polymeric/Building a New Theme

How I helped designing for the new desktop experience

https://static.wikia.nocookie.net/tobias-laboratory/images/0/09/HK_Wiki_Design_Update_Promo_04.webp

 Fandom recently released a new skin called FandomDesktop, which will replace the old Oasis skin, and since this update will affect all wikis, including this one, I have decided to put hands-on and help here by restoring back some broken design elements, adding some new stuff, and fine-tuning what already worked. So let's take a brief look on what I have been working. I hope you like it!

  Lighter images All background images have been optimized by converting them from PNG/JPG files to WEBP ones, which is a modern file format that works on all modern browsers. Now all background images will weigh way less than they used to. An WEBP file with ~50% compression could weigh less than it's PNG counterpart by up to 80 times, and it almost looks like the original one! An example of this is the Grimm Troupe's background, whose original background image weighed 4.48 MB. The new version only weights 55 KB! Now visiting the wiki will be smoother, faster, and will consume less data (specially for those of you who visit the site on mobile but using the desktop skin).

  Improved sub-themes The different sub-themes that appeared when visiting certain pages (such as a red-themed design when visiting NKG's article, or a purple-themed one with Grey Prince Zote) now work fine with the new skin, and are a bit more colored than before! And it is easier to modify with CSS. 



 <div id="design-blog-section-wrapper-3" style="display: flex; flex-direction: column; justify-content: center; margin-block-end: 60px; min-height: 60vh;"> <p class="typography--headline4" style="margin-block-end: .5em;">Faster loading times <p class="typography--body1" style="margin-block-end: 1em;">The amount of imports of resources from internal and third-party pages has been greatly decreased. And we no longer need JavaScript for the sub-themes to work, which results in a faster loading process. Once the Oasis skin is completely removed, all CSS and JS pages used to design the Oasis site will be removed. <p class="typography--body1">I've briefly mentioned about this wiki's sub-themes. About that....

<div class="glue-grid__col--span-4">

<div class="glue-grid__col--span-8"> <div id="design-blog-section-wrapper-5" style="display: flex; flex-direction: column; justify-content: center; margin-block-end: 60px; min-height: 60vh;"> <p class="typography--headline4" style="margin-block-end: .5em;">Light theme support <p class="typography--body1" style="margin-block-end: 1em;">The colors for both dark and light themes have been adjusted. That means that you can comfortably read on the site on either dark or light theme. <p class="typography--body1" style="margin-block-end: 1em;">Another change I have made is that white images and sprites will be black on light theme! That way the aesthetic experience remains the same on both themes. Affected images are: <ul class="typography--body1" style="margin-block-end: 1em;"> <li>List bullets. <li>Separators/dividers. <li>Gradient lines (or any white border in general). <li>White decorations/sprites. </ul> <p class="typography--body1">Templates have also been updated so they remain legible on both themes too.

<div class="glue-grid__col--span-12"> <div id="design-blog-section-wrapper-6" style="display: flex; flex-direction: column; justify-content: center; margin-block-end: 60px; min-height: 60vh;"> <p class="typography--headline4" style="margin-block-end: .5em;">Accessibility in mind <p class="typography--body1" style="margin-block-end: 1em;">The design was made to always keep a high contrast between the text and it's background. Making it legible for as most people as possible with ease, while keeping it beautiful and related to its contents. Some templates' HTML structure has been modified to better support assistive technologies and slightly improve SEO. <p class="typography--body1" style="margin-block-end: 1em;">Now it's possible to disable any kind of motion (either by setting it on in your browser or OS) across the site, and I also made most of the text scalable depending, too, on your browser/OS preference.

<div class="glue-grid__col--span-12"> <p class="typography--headline4" style="margin-block-end: .5em;">Comparisons <p class="typography--body1" style="margin-block-end: 1em;">Here you can take a look at each sub-theme and compare them between its light/dark counterpart, as well as some templates' comparison between light and dark theme, and before and after the update. <div class="glue-grid__col--span-6">

<div class="glue-grid__col--span-6" style="display: flex; align-items: center; margin-block-start: 72px;"> <div class="glue-grid__col--span-6" style="display: flex; align-items: center; margin-block-start: 72px;">

<div class="glue-grid__col--span-12"> <div id="design-blog-section-wrapper-7" style="display: flex; flex-direction: column; justify-content: center; margin-block-end: 60px; min-height: 60vh;"> <p class="typography--headline4" style="margin-block-end: .5em;">Fixes and tweaks <p class="typography--body1" style="margin-block-end: 1em;">A ton of fixes and quality-of-life improvements came with this design update. Apart from the contrast of some templates, the layout of other elements have been fixed, and the overall look and feel of the wiki should remain practically the same as always, but a bit more stable, smoother, and maintainable.

<div class="glue-grid__col--span-12"> <div id="design-blog-section-wrapper-8" style="display: flex; flex-direction: column; justify-content: center; margin-block-end: 60px; position: sticky; top: 92px;"> <p class="typography--headline4" style="margin-block-end: .5em;">Mobile layout improvements <p class="typography--body1" style="margin-block-end: 1em;">The update will also improve some layout problems on the mobile skin. Starting now, all dividers which consisted of a white sprite from the game (also known as Fleurs) are now replaced with actual HTML separators which, on desktop, looks exactly as before (and now change their size depending on the available width), and on mobile, look like a horizontal line which will replace all empty rectangles. <p class="typography--body1" style="margin-block-end: 1em;">A process to remove tables from where they should not be used is also on the works too. <div class="glue-grid__col--span-12">



<div class="glue-grid__col--span-12"> <div id="design-blog-section-wrapper-9" style="display: flex; flex-direction: column; justify-content: center; margin-block-end: 60px;"> <p class="typography--headline4" style="margin-block-end: .5em;">Code cleanup <p class="typography--body1" style="margin-block-end: 1em;">I tried to put attention to keeping the code as readable as possible so the administrators can modify it without getting confused in the process. First of all, there is a Table of Contents so they can jump right to any specific section they may want to modify. <p class="typography--body1" style="margin-block-end: 1em;">Second, almost all of the code is commented out, explaining what it is or does. The more asterisks there are in a comment, it means that it's like a sub-header of the previous one. It's kind of like what happens with Wikitext with, for example  and , where   is a sub-section inside of. With CSS comments, the format would be  and   and so on. <p class="typography--body1" style="margin-block-end: 1em;">Also, almost all selectors have been cleaned up so they no longer need to use  in any rule to apply a style, and every rule was written with performance in mind by not using repeated or useless code, and always respecting good practices (such as using shorthand properties for fonts and backgrounds). <p class="typography--body1">Finally, some articles and templates are also getting a code cleanup.

<div class="glue-grid__col--span-12"> <div id="design-blog-section-wrapper-10" style="display: flex; flex-direction: column; justify-content: center;"> <hr class="gradient-divider" style="margin-block-end: 100px;"> <p class="typography--body1" style="margin-block-end: 1em;">This has been a brief review on what I have been working for some weeks. I want to thank the guys at the administration (specially Pauolo for trusting me and applying the changes I make, and Sumwan for reporting errors in the Oasis skin) for allowing me to do this, and the folks at the Discord server for providing feedback. This design update will also be applied to the spanish wiki and, probably, the french one shortly. So if you are from any of those wikis, stay tuned! <p class="typography--body1" style="margin-block-end: 1em;">If you have any suggestion(s) or want to report a bug, let me know! You can send me a message either here or in my Discord. <p class="typography--body1" style="margin-block-end: 1em;">Now I will answer a couple of questions you may have.

<div class="glue-grid__col--span-12"> <div id="design-blog-section-wrapper-9" style="display: flex; flex-direction: column; justify-content: center; margin-block-end: 60px;">

FAQ =


 * -| Further help =