Stories
Slash Boxes
Comments

SoylentNews is people

posted by janrinok on Monday January 23 2023, @10:57AM   Printer-friendly
from the we-need-more-whitespace dept.

Wikipedia has released their new layout, which unsurprisingly includes whitespace bars on either side, justified by the claim "most people prefer a column 60-80 characters wide" (although it's not that extreme).

The changes being introduced are not very dramatic — in fact, they may not even be immediately noticed by some users. The organization, however, says the update was necessary in order to meet the needs of the next generation of internet users, including those who are more newly coming online and may have less familiarity with the internet.

To develop the new interface, the foundation engaged with more than 30 different volunteer groups from around the world, with users in places like India, Indonesia, Ghana and Argentina, among others, all helping to test the update and provide insights into the product development. The goal for the update was to make Wikipedia more of a modern web platform, it said, and to remove clutter, while also making it easier for users to contribute. It additionally aimed to make the desktop web version more consistent with Wikipedia's mobile counterpart.

It is possible to go back to the old layout, if you log in to the site and set it in your preferences.


Original Submission

 
This discussion was created by janrinok (52) for logged-in users only, but now has been archived. No new comments can be posted.
Display Options Threshold/Breakthrough Mark All as Read Mark All as Unread
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
  • (Score: 5, Informative) by Anonymous Coward on Monday January 23 2023, @03:39PM (4 children)

    by Anonymous Coward on Monday January 23 2023, @03:39PM (#1288189)


    // ==UserScript==
    // @name Wikipedia
    // @namespace soylentnews_greasemonkey
    // @description De-yuckify the 2023 Wikipedia overhaul
    // @include https://en.wikipedia.org/wiki/* [wikipedia.org]
    // @version 1
    // @grant GM_addStyle
    // ==/UserScript==

    //--- Add some custom style tweaks.
    GM_addStyle ( ' \
            div.mw-page-container { \
                    min-width: 100% !important; \
            } \
    ' );

    GM_addStyle ( ' \
            div.mw-content-container { \
                    min-width: 98% !important; \
                    width: 98% !important; \
            } \
    ' );

    GM_addStyle (' \
    #mw-sidebar-button::before { \
            background-image: none !important; \
            content: "Menu"; \
            color: black; \
            font-size: 11px; \
            font-stretch: ultra-condensed; \
            overflow: visible !important; \
            display: block !important; \
            left: -6px !important; \
            position: relative !important; \
    } \
                              ');

    GM_addStyle (' \
    #mw-sidebar-button: { \
            overflow: visible !important; \
            min-width: 26px !important; \
    } \
                              ');

    GM_addStyle (' \
    .mu-ui-icon: { \
            overflow: visible !important; \
    } \
                              ');

    It's for Greasemonkey. Reply here if it doesn't work.

    Starting Score:    0  points
    Moderation   +5  
       Informative=5, Total=5
    Extra 'Informative' Modifier   0  

    Total Score:   5  
  • (Score: 1, Informative) by Anonymous Coward on Monday January 23 2023, @11:47PM

    by Anonymous Coward on Monday January 23 2023, @11:47PM (#1288269)

    Here's a little bit more to get that search box back over to the right hand side of the page where we're used to finding it:

    GM_addStyle ('  \
    .vector-search-box > div {  \
        max-width: 100% !important; \
    }                               \
                 ');

    GM_addStyle ('  \
    .vector-search-box-inner {  \
        float: right !important; \
        min-width: 284px;        \
    }                            \
                 ');

    You can also increase those 98% width values in the earlier script to 99 or 100 to fill the page even better and more like the old layout.

    This is only tested on Pale Moon so would be nice to know if it works on anything else. Not sure what other browsers even support Greasemonkey these days...

  • (Score: 0) by Anonymous Coward on Tuesday January 24 2023, @02:37PM

    by Anonymous Coward on Tuesday January 24 2023, @02:37PM (#1288361)

    Can you make it add MOAR whitespace and make the font color gray on light gray with gray unlabeled UI buttons distinguished only by ancient runes? I've finally gotten used to Ubuntu and don't want to relearn some fancy "words" or "colors" or "menus".

  • (Score: 0) by Anonymous Coward on Tuesday January 24 2023, @09:39PM

    by Anonymous Coward on Tuesday January 24 2023, @09:39PM (#1288429)

    Just in case anyone's still interested in using these Greasemonkey scripts, here's my extremely experimental Version 2 that will probably break on a load of pages or browsers. If it works, it will look a lot more like the original site. Doesn't work on the search results page.

    // ==UserScript==
    // @name        Wikipedia
    // @namespace   soylentnews_greasemonkey
    // @description De-yuckify the 2023 Wikipedia overhaul
    // @include     https://en.wikipedia.org/wiki/*
    // @version     2
    // @grant       GM_addStyle
    // @grant       GM_getResourceText
    // @grant       GM_getResourceURL
    // ==/UserScript==

    //--- Add some custom style tweaks.
    GM_addStyle ( '                 \
        div.mw-page-container {     \
            min-width: 100% !important; \
        }                           \
    ' );

    GM_addStyle ( '                 \
        div.mw-content-container {     \
            min-width: 100% !important; \
            width: 100% !important; \
            max-width: 100% !important; \
        }                           \
    ' );

    GM_addStyle ('                \
    #mw-sidebar-button::before {   \
        background-image: none !important; \
        content: "Menu"; \
        color: black;  \
        font-size: 11px; \
        font-stretch: ultra-condensed; \
        overflow: visible !important; \
        display: block !important; \
        #margin-left: -40px !important; \
        left: -6px !important; \
        position: relative !important; \
    }                    \
                 ');

    GM_addStyle ('                \
    #mw-sidebar-button: {   \
        overflow: visible !important; \
        #width: 95px !important; \
        min-width: 26px !important; \
        #margin-left: -40px !important; \
    }                    \
                 ');

    GM_addStyle ('                \
    .mu-ui-icon: {   \
        overflow: visible !important; \
    }                    \
                 ');

    GM_addStyle ('  \
    .vector-search-box > div {  \
        max-width: 100% !important; \
    }                               \
                 ');

    GM_addStyle ('  \
    .vector-search-box-inner {  \
        float: right !important; \
        min-width: 284px;        \
    }                            \
                 ');

    GM_addStyle (' \
    #mw-panel-toc, \
    #vector-toc, \
    .vector-main-menu-container, \
    .mw-table-of-contents-container { \
        max-width: 168px !important; \
    } \
                 ');

    GM_addStyle (' \
    .mw-page-container { \
    padding-left: 28px !important; \
    padding-right: 28px !important; \
    max-width: 100% !important; \
                 } \
                 ');

    if (window.location.href.indexOf('Main_Page') < 0)
    {
    GM_addStyle (' \
    .mw-body { \
    position: relative; \
    left: -68px; \
    margin-right: -68px; \
    padding-bottom: 24px; \
    padding-left: 24px; \
    padding-right: 24px; \
    padding-top: 20px; \
                 } \
                 ');

    GM_addStyle (' \
    .mw-body { \
        margin-top: -1px; \
        border: 1px solid #a7d7f9; \
        border-right-width: 0; \
        background-color: rgb(255, 255, 255); \
    } \
    .mw-page-container, .vector-toc { \
    background-color: inherit !important; \
                 } \
                 ');

    GM_addStyle (' \
    body { \
    background-color: rgb(246, 246, 246); \
    } \
                 ');

    GM_addStyle (' \
    #p-logo a { \
        background-position: center center; \
        background-repeat: no-repeat; \
        display: block; \
        width: 10em; \
        height: 160px; \
        text-decoration: none; \
    } \
    .mw-wiki-logo { \
        background-image: url(/static/images/project-logos/enwiki.png); \
    } \
    .mw-logo { \
    display: none !important; \
    height: 1px !important; \
    } \
    .vector-header-start { \
    height: 50px; \
                 } \
                 ');

    GM_addStyle (' \
    #mw-panel-toc { \
    margin-top: -48px; \
    } \
    #vector-main-menu, #vector-toc { \
    margin-top: 75px;}  \
    #mw-sidebar-button { \
    position: relative; \
    left: 185px; \
    top: 8px; \
    } \
                 ');

    //Add the old, big logo to the top of the left sidebar
    var logoNode         = document.createElement ('div');
    logoNode.id = 'logo-container';
    logoNode.style.cssText = 'width: 135px; height: 155px; display: block; position: relative; top: 50px; left: -30px;';
    logoNode.innerHTML   = '             \
    <div id="p-logo" role="banner">       \
            <a class="mw-wiki-logo" style="background-image: url(/static/images/project-logos/enwiki.png); width: 135px; height: 155px; display: block;" href="/wiki/Main_Page" title="Visit the main page"></a> \
        </div> \
    ';

    var menuButtonNode = document.getElementById('mw-sidebar-button');
    var headerStartNode = menuButtonNode.parentNode;
    headerStartNode.insertBefore(logoNode, menuButtonNode.nextElementSibling);
    }

  • (Score: 0) by Anonymous Coward on Tuesday January 24 2023, @10:41PM

    by Anonymous Coward on Tuesday January 24 2023, @10:41PM (#1288444)

    And Version 2.1 fixes the layout for pages that have no table of contents. I'm getting bored of this so not sure how many more updates there will be. I might be persuaded to post more if someone tells me they're actually using this script.

    // ==UserScript==
    // @name        Wikipedia
    // @namespace   soylentnews_greasemonkey
    // @description De-yuckify the 2023 Wikipedia overhaul
    // @include     https://en.wikipedia.org/wiki/*
    // @version     2.1
    // @grant       GM_addStyle
    // @grant       GM_getResourceText
    // @grant       GM_getResourceURL
    // ==/UserScript==

    //--- Add some custom style tweaks.
    GM_addStyle ( '                 \
        div.mw-page-container {     \
            min-width: 100% !important; \
        }                           \
    ' );

    GM_addStyle ( '                 \
        div.mw-content-container {     \
            min-width: 100% !important; \
            width: 100% !important; \
            max-width: 100% !important; \
        }                           \
    ' );

    GM_addStyle ('                \
    #mw-sidebar-button::before {   \
        background-image: none !important; \
        content: "Menu"; \
        color: black;  \
        font-size: 11px; \
        font-stretch: ultra-condensed; \
        overflow: visible !important; \
        display: block !important; \
        #margin-left: -40px !important; \
        left: -6px !important; \
        position: relative !important; \
    }                    \
                 ');

    GM_addStyle ('                \
    #mw-sidebar-button: {   \
        overflow: visible !important; \
        #width: 95px !important; \
        min-width: 26px !important; \
        #margin-left: -40px !important; \
    }                    \
                 ');

    GM_addStyle ('                \
    .mu-ui-icon: {   \
        overflow: visible !important; \
    }                    \
                 ');

    GM_addStyle ('  \
    .vector-search-box > div {  \
        max-width: 100% !important; \
    }                               \
                 ');

    GM_addStyle ('  \
    .vector-search-box-inner {  \
        float: right !important; \
        min-width: 284px;        \
    }                            \
                 ');

    GM_addStyle (' \
    #mw-panel-toc, \
    #vector-toc, \
    .vector-main-menu-container, \
    .mw-table-of-contents-container { \
        max-width: 168px !important; \
    } \
                 ');

    GM_addStyle (' \
    .mw-page-container { \
    padding-left: 28px !important; \
    padding-right: 28px !important; \
    max-width: 100% !important; \
                 } \
                 ');

    if (window.location.href.indexOf('Main_Page') < 0)
    {
    var navNode = document.getElementById('mw-navigation');
    var navContainer = navNode.parentNode;
    if (navContainer.getAttribute('class').indexOf('vector-sidebar-container-no-toc') >= 0)
    {
    GM_addStyle (' \
    .mw-body { \
    position: relative; \
    padding-bottom: 24px; \
    padding-left: 24px; \
    padding-right: 24px; \
    padding-top: 20px; \
                 } \
                 ');
    }
    else
    {
    GM_addStyle (' \
    .mw-body { \
    position: relative; \
    left: -68px; \
    margin-right: -68px; \
    padding-bottom: 24px; \
    padding-left: 24px; \
    padding-right: 24px; \
    padding-top: 20px; \
                 } \
                 ');
    }

    GM_addStyle (' \
    .mw-body { \
        margin-top: -1px; \
        border: 1px solid #a7d7f9; \
        border-right-width: 0; \
        background-color: rgb(255, 255, 255); \
    } \
    .mw-page-container, .vector-toc { \
    background-color: inherit !important; \
                 } \
                 ');

    GM_addStyle (' \
    body { \
    background-color: rgb(246, 246, 246); \
    } \
                 ');

    GM_addStyle (' \
    #p-logo a { \
        background-position: center center; \
        background-repeat: no-repeat; \
        display: block; \
        width: 10em; \
        height: 160px; \
        text-decoration: none; \
    } \
    .mw-wiki-logo { \
        background-image: url(/static/images/project-logos/enwiki.png); \
    } \
    .mw-logo { \
    display: none !important; \
    height: 1px !important; \
    } \
    .vector-header-start { \
    height: 50px; \
                 } \
                 ');

    GM_addStyle (' \
    #mw-panel-toc { \
    margin-top: -48px; \
    } \
    #vector-main-menu, #vector-toc { \
    margin-top: 75px;}  \
    #mw-sidebar-button { \
    position: relative; \
    left: 185px; \
    top: 8px; \
    } \
                 ');

    if (navContainer.getAttribute('class').indexOf('vector-sidebar-container-no-toc') >= 0)
    {
    //Add the old logo to the top when there's no table of contents
    var logoNode         = document.createElement ('div');
    logoNode.id = 'logo-container';
    logoNode.style.cssText = 'width: 135px; height: 155px; display: block; position: relative; top: 5px; left: -30px;';
    logoNode.innerHTML   = '             \
    <div id="p-logo" role="banner">       \
            <a class="mw-wiki-logo" style="background-image: url(/static/images/project-logos/enwiki.png); width: 135px; height: 155px; background-size: 80px; display: block;" href="/wiki/Main_Page" title="Visit the main page"></a> \
        </div> \
    ';
    }
    else
    {
    //Add the old, big logo to the top of the left sidebar
    var logoNode         = document.createElement ('div');
    logoNode.id = 'logo-container';
    logoNode.style.cssText = 'width: 135px; height: 155px; display: block; position: relative; top: 50px; left: -30px;';
    logoNode.innerHTML   = '             \
    <div id="p-logo" role="banner">       \
            <a class="mw-wiki-logo" style="background-image: url(/static/images/project-logos/enwiki.png); width: 135px; height: 155px; display: block;" href="/wiki/Main_Page" title="Visit the main page"></a> \
        </div> \
    ';
    }

    var menuButtonNode = document.getElementById('mw-sidebar-button');
    var headerStartNode = menuButtonNode.parentNode;
    headerStartNode.insertBefore(logoNode, menuButtonNode.nextElementSibling);
    }