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.
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!
Irgendwas klappt da bei mir nicht…vor allem die Schriftart…Ideen? Siehe Link
Meinst du die Serifen? Die Wikipedia verwendet fast immer die Standard-Schrift, weil der Browser am besten wissen sollte, welche Schrift optimal funktioniert. Wenn du auf die serifenlose Schrift deines Browsers umschalten möchtest, erstelle eine commons.css und füge diese Zeile ein:
body { font-family: sans-serif; }Hei,
Naja, ich meine einfach nur, dass es bei mir so aussieht: http://imageshack.us/photo/my-images/33/statuettedescheopswikip.png/
In deinem Screenshot sieht das alles sehr gelungen aus, auf meinem sieht es schrecklich aus 🙂
Ich glaube, da ist kein großer Unterschied. Die unterstrichenen Links dürftest du in den Einstellungen angemacht haben, oder?
Bei mir klappt das gar nicht, woran könnte das liegen? Hier ein Screenshot: http://imageshack.us/photo/my-images/269/120812screenshotwiki.jpg/. Als Browser nutze ich Chrome, aber daran kanns ja nicht liegen, oder?
Viele Grüße, Nico
ups, hab den Link aus versehen falsch formatiert, so ist richtig: http://imageshack.us/photo/my-images/269/120812screenshotwiki.jpg/
Wie lautet dein Benutzername?
Mein Benutzername ist Albe_ni.
Du hast das Style in den Vektor Skin eingebaut. Er muss aber in Simple (Einfach), so wie du es vorher schon hattest. Anschließend Simple aktivieren, und du siehst das Design.
ich kann auf den anderen Comment nicht mehr antworten, daher hier: Ich hab das gemacht, aber es funktioniert immer noch nicht vernünftig, könnte das an der common.css liegen? Ich lad gleich mal nen screenshot hoch, aber irgendwie ist jetzt chaos…
hier der screenshot: http://imageshack.us/photo/my-images/692/120812screenshotwiki2.jpg/
Auf dem Bild vom 12. August hast du das reine Simple-Skin. Das ist so weit richtig. Jetzt musst du noch in der simple.css das @import… einfügen.
das ist ja das problem, das habe ich bereits eingebunden, siehe hier.
Schwer zu sagen. Schuss ins Blaue: Probier mal http:// anstelle von https://. Wenn du Firebug oder eine Fehlerkonsole hast, schau dort nach.
Schreib mal bitte an den Anfang der simple.css noch diese Zeile um zu sehen, ob sie überhaupt geladen wird. Davon sollte die Wikipedia einen gelben Hintergrund bekommen.
body { background-color:yellow; }ne, funktioniert leider immer noch nicht, der hintergrund wird gelb -> laden tut er schon -.-
Fürs Protokoll: Der Import in der simple.css wurde nicht ausgeführt. Ich weiß leider nicht warum.
Wir haben einen Workaround gefunden. Nico kopierte den Inhalt der WikipediaRedefined.css direkt in seine simple.css.
Mit dem letzten Update sollte das Problem behoben sein.
funktioniert! Danke
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; }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.