Webdesign und Medien
comments 22

Wikipedia Redefined

The design company NewIsNew has published a conceptual design how Wikipedia could look like. In my opinion, they have a lot of great
ideas and lovely details in the images. So I decided to create a
working style based on this design. Because of nearly pure CSS I only
included some of the features. To test the style in German or English
Wikipedia simply follow the instructions bellow:

  • log in and head to your preferences (Einstellungen)
  • click Appearance (Aussehen)
  • click Custom JS in the simple (Einfach) row to create a simple.js file
  • copy and paste this line:
  • save
  • go back to Appearance and click Custom CSS in the simple (Einfach) row to create a simple.css file
  • copy and paste this line:
  • save
  • go back to Appearance, enable the simple skin and save

To get rid of the skin click on your user name, preferences, Appearance and change back to vector.

This is Android, also tested with FireFox and Chromium

Browser Tests

Internet Explorer 8 Works with design issues
Internet Explorer 9, 10 Some other bugs (this browser really failes)
Firefox 15 Works, please report bugs
Opera 12 Works with minor design issues, please report bugs
Chromium 18 Works, please report bugs
Android 4 stock browser Works, please report bugs
Firefox Android 15 Works, please report bugs

Update

Nice feedback. First I got links from netzpolitik.org, @netzpolitik and many Wikipedians. Now a screencast showing this this page in TagesWEBschau. Thanks!

22 Comments

  1. Ephraim says

    Das sieht ja schon ganz nett aus.

    Wenn ich (mit Internet Explorer 8) auf “In anderen Sprachen” gehe, öffnet sich eine leider viel zu kleine Box für die Interwikilinks, sodass man zu viel scrollen muss.

    Außerdem fehlen mir einige Werkzeuge, die ich ständig nutze: “Links auf diese Seite”, “Änderungen an verlinkten Seiten”, “Datei hochladen”. Wie muss ich denn die css-Datei ändern, um diese Punkte in die erste Zeile zu bringen?

    • Hat die Box einen grauen oder weißen Hintergrund? Ich habe mal zwei Screenshots mit IE8 unter Win7 32bit gemacht. Die große Box mit weißem Hintergrund ist bei eingeschaltetem JavaScript, die kleine Box mit grauem Hintergrund ist bei ausgeschaltetem JavaScript. Wenn du die graue Box hast, ist deine simple.js evtl nicht in Ordnung. Oder es gibt ein anderes Problem 😉

      Du kannst die Links mit folgender Ergänzung in simple.js einschalten, dann wird es aber ziemlich breit in der oberen Zeile. Mir fällt aber keine Lösung ein, wo diese Links platziert werden könnten.

      /* upload a file (not a link to commons!) */
      li#t-upload { display:list-item; }
      /* links to this page */
      li#t-whatlinkshere { display:list-item; }
      /* changes at linked pages */
      li#t-recentchangeslinked { display:list-item; }
  2. Harry Potter says

    Hilfe! Klappt bei mir nicht. So sieht das bei mir aus. Bin unter Appearance gegangen. Dann wusste ich aber nicht mehr weiter.

    Wo ist denn bitte die “Custom JS in the simple”? Ich habe einfach die Custom JavaScript bei “Shared CSS/JavaScript for all skins” genommen. Danach die Custom CSS.

    Das hat zwar einiges verändert, aber nichts hat geklappt. Hier wie die Seite für mich aussieht:

    http://imgur.com/TQxECiQ

    • Scheinbar gibt es in Wikipedia nicht mehr das “simple” Styling, auf dem Wikipedia Redefined basiert. Genaueres weiß ich dazu nicht.

Leave a Reply

Your email address will not be published. Required fields are marked *