The recent redesign of en.wikipedia.org Topic is solved

[Konrad]

Hello everybody!

I dislike the recent redesign of en.wikipedia.org, but there is a solution to get the old layout back: “?useskin=vector” should be added at the end of URL, e.g. https://en.wikipedia.org/wiki/Pale_Moon?useskin=vector
It can be done automatically with a script written for the Firefox add-on Redirector. The script looks like this:

Code: Select all

{
    "createdBy": "Redirector v3.5.3",
    "createdAt": "2023-02-07T22:09:58.949Z",
    "redirects": [
        {
            "description": "Wikipedia Vector",
            "exampleUrl": "https://en.wikipedia.org/wiki/Microsoft_Windows",
            "exampleResult": "https://en.wikipedia.org/wiki/Microsoft_Windows?useskin=vector",
            "error": null,
            "includePattern": "https://en.wikipedia.org/wiki/*",
            "excludePattern": "",
            "patternDesc": "Match any Wikipedia Article",
            "redirectUrl": "https://en.wikipedia.org/wiki/$1?useskin=vector",
            "patternType": "W",
            "processMatches": "noProcessing",
            "disabled": false,
            "grouped": false,
            "appliesTo": [
                "main_frame"
            ]
        }
    ]
}

Can anybody turn the above commands into a script for Greasemonkey or userContent.css, please?

[Kris_88]

Try this:

Code: Select all

// ==UserScript==
// @name        wiki1
// @namespace   wiki1
// @include     https://en.wikipedia.org/wiki/*
// @run-at document-start
// @version     1
// @grant       none
// ==/UserScript==

  if(window.location.href.indexOf('useskin=vector') < 0)
    window.location.replace(window.location.href + '?useskin=vector');

[Konrad]

Try this...

It works!
Thanks a bunch! Kris_88, you are awesome!

[Kris_88]

More correctly:

Code: Select all

// ==UserScript==
// @name        wiki1
// @namespace   wiki1
// @include     https://en.wikipedia.org/wiki/*
// @run-at document-start
// @version     1
// @grant       none
// ==/UserScript==

  if(window.location.href.indexOf('useskin=vector') < 0)
    window.location.replace(
      window.location.href + 
      ((window.location.href.indexOf('?') < 0) ? '?':'&') +
      'useskin=vector'
    );

[Moonchild]

I dislike the recent redesign of en.wikipedia.org

Oof. That's a disgusting change, yeah. I quite agree. More ridiculous amounts of whitespace and making desktop use a second-class citizen.
While I don't have a flickering issue like some have complained about, the layout is absolutely terrible and seems to combine the worst of a desktop and mobile layout in one. I've made a comment to throw on the already existing pile on the discussion page asking them to please go back to the previous default and save us from the weirdness of wasted space combined with restricted element sizes. There's no reason to make such a change here - sometimes something is just good and you should leave well enough alone.
And they wanted to call this "subtle" XD it isn't.

[Blacklab]

Agree. Personally not a fan of Wikipedia's 'new improved' acres of unused white space and distracting floating menus... so Wikipedia's change to the new 'Vector 2022' skin doesn't suit me... but they do try to explain what influenced the re-design:

"The objective for the Vector 2022 skin is to make the interface more welcoming and comfortable for readers and useful for advanced users on desktop..." https://en.wikipedia.org/wiki/Wikipedia ... tor_(2022)

BTW - There is another simple way of changing Wikipedia's 'skin' back to the 'old' Vector (or to any of Wikipedia's 5 available skins) just using bookmarklets (no sign-in required)... see: https://en.wikipedia.org/wiki/Wikipedia:Skin

Thus, the 'properties' (address) of a bookmarklet to change any Wikipedia page back to the previous 'Vector' skin would be:

Code: Select all

javascript:var%20url%20=%20new%20URL(location.href);%20url.searchParams.set('useskin',%20'vector');%20location.href%20=%20url;

or to change to the 'Timeless' skin:

Code: Select all

javascript:var%20url%20=%20new%20URL(location.href);%20url.searchParams.set('useskin',%20'timeless');%20location.href%20=%20url;

or even change back to the new 'Vector 2022' skin:

Code: Select all

javascript:var%20url%20=%20new%20URL(location.href);%20url.searchParams.set('useskin',%20'vector2022');%20location.href%20=%20url;

[BopBe]

Palemoon port of an older Redirector version: https://addons.palemoon.org/addon/url-rewriter/

And the wildcard-based rule I concocted (add to `redirector.rjson`):

Code: Select all

        {
            "exampleUrl": "https://en.wikipedia.org/wiki/Foobar",
            "includePattern": "https://en.wikipedia.org/wiki/*",
            "excludePattern": "https://en.wikipedia.org/wiki/*?useskin=vector",
            "redirectUrl": "https://en.wikipedia.org/wiki/$1?useskin=vector",
            "patternType": "W",
            "disabled": false
        },

Doesn't work for anchored links (e.g. /Foobar#baz) from external sources.

[Lucio Chiappetti]

BTW - There is another simple way of changing Wikipedia's 'skin' back to the 'old' Vector (or to any of Wikipedia's 5 available skins) just using bookmarklets (no sign-in required)... see: https://en.wikipedia.org/wiki/Wikipedia:Skin

Thanks. I'd noticed the new skin (and not liked it (*)) first on the French wiki and recently on the English one. So far the bookmarket solution (added to the extreme right of my bookmark toolbar) looks the quickest solution, at the price of one click per page. However if somebody would provide a small dedicated extension to add useskin=vector automatically, I'll sign up as a user.
If Wikipedia would allow to store the skin preference in a cookie (without login), I would even be ready to store such cookie permanently (usually I crush cookies when leaving tabs, and none survives exit from the session)

(*) one of the reasons I do not like it is that in the new skin the menu of languages requires more clicks. I often view a wiki page in several languages, and the old skin allowed to change language from the menu on the left, always present.

[Moonchild]

If you have a wikipedia account, you can set it to the normal theme in your preferences (I actually suggest if you have an account that you go and do this to give them some metrics about people switching off of their "default" when they can). of course that only helps when you are logged in

[therube]

Thank you, one & all .

[Marcus]

Another problem with Wikipedia is the content, but I'm off topic.

[Moonchild]

Off-topic:

Another problem with Wikipedia is the content, but I'm off topic.

Please use appropriate forum tags next time like offtopic or sarcasm

[Blacklab]

Another small tweak for Wikipedia's new 'Vector 2022' skin... for those using uBlock Origin (UBO).

If you can just about live with Wikipedia's 'Vector 2022' skin's page design and layout... but are distracted by the new 'floating' index sidebar panel that 'slides' down the page to stay in view as you scroll the text... then, you can add this filter rule to UBO:

Code: Select all

wikipedia.org###vector-toc-pinned-container:style(position: static !important;)

Notes: Add the filter rule to your 'My filters' tab on UBO's dashboard.
To disable any filter rule simply place an exclamation mark in front of the first character...
e.g. ! wikipedia.org###vector-toc-pinned-container:style(position: static !important;)

The filter rule stops the new index sidebar moving as you scroll the body of the article. The index panel now stays put... a persistent sidebar fixed back at the top of the page... much like the previous 'Vector' skin design. Pity about all the white space!

From: https://www.ghacks.net/2023/01/25/how-t ... ld-design/

[Blacklab]

And another tweak to further improve on the 'Vector 2022' skin...

This one more for those who are ok with adding CSS scripts... and perhaps modifying the settings in the script to taste later?
Try this 'Wikipedia new style' CSS script from an unknown 'guest' contributor to Pastebin posted on 29th Jan 2023.
Simple to add script to Pale Moon using Lootyhoof's excellent userstyle manager extension Stylem 2.2.9.

CSS script 'Wikipedia new style' as copied from Pastebin:

Code: Select all

/* Wikipedia new style */
  
/* make only the content have white background */
.mw-page-container {
    background-color: #fafbfd;
}
.mw-content-container {
    background-color: white;
}
.vector-toc {
    background-color: unset;
}
/* make the page a bit tigher */
.mw-page-container {
    padding-right: 1em !important;
    padding-left: 1em !important;
}
.mw-page-container-inner {
    grid-template-rows: min-content min-content min-content 1fr min-content !important;
    grid-template-columns: min-content minmax(0px, 1fr) !important;
}
.mw-content-container {
    padding: 1em 2em;
    padding-left: 1em;
    box-sizing: border-box;
}
.mw-page-container-inner {
    column-gap: 0px !important;
}
#mw-panel-toc {
    margin-left: 0px !important;
    width: 240px !important;
}
/* why is a blank 'site notice' used for margins..? Maybe this will break later. */
#siteNotice {
    margin: 6px 0 !important;
}
 
/* initial height of the toc is only 75%, 86% fits more. YMMV */
.vector-toc {
    max-height: 86vh;
    padding-right: 8px !important;
    width: unset !important;
}
 
/* optionally: remove top padding. This makes it unaligned, but we get more content. */
/*
#vector-toc-pinned-container {
    padding-top: 0px !important;
    margin-top: 0px !important;
}
*/
 
/* remove the white toc bottom fade. I think this is for non-windows users that have hidden scrollbars? */
.vector-toc:after {
    content: unset !important;
}
 
/* add a small border + radius to main content */
.mw-content-container {
    border-radius: 3px;
    border: 1.5px solid #cbcbcb;
}

Filter bubble article on Vector 2022 skin... before... and after... CSS script modifications.

IMO the CSS script improves the 'look and feel' of the Vector 2022 skin quite considerably:

• Reduces glare of all white space by adding faint background colour to side panels; only the text is on a white background.

• Adds a faint border around main body panel that helps keep eyes concentrated in text area.

• Removes distracting slider bar if the LH sidebar's index list is lengthy.

[Goodydino]

A CSS file is not a script. It is a stylesheet.

[Blacklab]

Oh dear... my bad... and to think I've been using that term for >10 years too! However, the term script or scripting does seem to be in pretty general use regarding writing and modifying CSS stylesheets... even if CSS is not technically a 'scripting' language. Sigh

[Eduardo Lucas]

It would be great if they created a front-end for it, but i would not doubt if wikipedia blocked it if it gained support, because they feel like anything which threatens the dumbification of desktop interfaces for increasing usage by average people must be curbed and destroyed, as it can impact profits (or in case of wikipedia, survival). Its hurting a lot to read anything on desktop.

[Blacklab]

PS. A first attempt at modifying the original Pastebin CSS file (above) to more closely match old Vector design and layout:

• Narrowed LH sidebar panel to match old Vector.

• Adjusted sidebar panel colour to match old Vector.

• Adjusted small border colour and width to match old Vector.

Code: Select all

/* Wikipedia new style (Modified) */
 
 
/* make only the content have white background */
.mw-page-container {
    background-color: #f6f6f6;     /* -- Orig: background-color: #fafbfd; -- */
}
.mw-content-container {
    background-color: white;
}
.vector-toc {
    background-color: unset;
}
/* make the page a bit tigher */
.mw-page-container {
    padding-right: 1em !important;
    padding-left: 1em !important;
}
.mw-page-container-inner {
    grid-template-rows: min-content min-content min-content 1fr min-content !important;
    grid-template-columns: min-content minmax(0px, 1fr) !important;
}
.mw-content-container {
    padding: 1em 2em;
    padding-left: 1em;
    box-sizing: border-box;   
}
.mw-page-container-inner {
    column-gap: 0px !important;
}
#mw-panel-toc {
    margin-left: 0px !important;
    width: 160px !important;     /* -- Orig: width: 240px !important; -- */ 
}
/* why is a blank 'site notice' used for margins..? Maybe this will break later. */
#siteNotice {
    margin: 6px 0 !important;
}
 
/* initial height of the toc is only 75%, 86% fits more. YMMV */
.vector-toc {
    max-height: 86vh;
    padding-right: 8px !important;
    width: unset !important;
}
 
/* optionally: remove top padding. This makes it unaligned, but we get more content. */
/*
#vector-toc-pinned-container {
    padding-top: 0px !important;
    margin-top: 0px !important;
}
*/

/* remove the white toc bottom fade. I think this is for non-windows users that have hidden scrollbars? */
.vector-toc:after {
    content: unset !important;
}
 
/* add a small border + radius to main content */
.mw-content-container {
    border-radius: 3px;
    border: 1px solid #a7d7f9;     /* -- Orig: border: 1.5px solid #cbcbcb; -- */
}

(Note: All adjusted terms also show original setting alongside thus: /* -- Orig: background-color: #fafbfd; -- */ )

Filter bubble article on Vector 2022 skin... i) no CSS... ii) 'Wikipedia new style' CSS... iii) 'Wikipedia new style (Modified)' CSS.

[BopBe]

While trying to troubleshoot Wikipedia's usage of its "skin" GET parameters, I noticed that those bozos at Wikimedia Foundation disabled my 2006 created username without any prior warnings and handed it to a random circa 2020. I even donated twice in 2011 and 2012. Absolutely lame "policies" regarding user accounts, wtf really.

[jobbautista9]

Off-topic:
You should've received a message on your talk page before your username was usurped. Did you have email set on your account, which would've notified you if your talk page got modified? Also your username wouldn't be usurped if you've made valid edits on any wiki, see https://meta.wikimedia.org/wiki/USURP