Fandom

Wikia Deutschland

Kommentare9

Häufig gefragter Code

Störung durch Adblocker erkannt!


Wikia ist eine gebührenfreie Seite, die sich durch Werbung finanziert. Benutzer, die Adblocker einsetzen, haben eine modifizierte Ansicht der Seite.

Wikia ist nicht verfügbar, wenn du weitere Modifikationen in dem Adblocker-Programm gemacht hast. Wenn du sie entfernst, dann wird die Seite ohne Probleme geladen.

CSS-Editor-Wikia.png

Die Seite MediaWiki:Wikia.css benutzt man, um CSS-Styles anzulegen

In diesem Blog-Beitrag möchte ich euch häufig gefragten Code für CSS und JS zeigen. Ihr könnt den Code dann für euer Wiki übernehmen und für dieses anpassen. Eventuell ist das hier auch eine kleine CSS- und JS-Bibliothek, aber mal sehen. Die Idee dieses Blog-Posts kommt von KCCreations aus dem englischen Community Central! Den Blog von KCCreations findet ihr hier.

CSS

Wie ersetze ich den Chat-Mod-Stern im Chat?

Das geht ziemlich einfach mit dem unten gezeigten Code. Packt diesen einfach auf die Seite MediaWiki:Chat.css und ersetzt die URL durch eine andere URL eines Bildes auf Fandom.

/* Entfernen des Chat-Mod-Sterns */
.User.chat-mod .username:after {
    background-image:none;
}
 
/* Hinzufügen eines neuen Sterns für Chat-Mods */
.User.chat-mod .username:after {
    content: url("http://images3.wikia.nocookie.net/__cb20150305184300/zedd/images/4/48/Chatmod_icon.png");
}

Wie hebe ich die Admins im Wiki farblich hervor?

Packe diesen Code auf die Seite MediaWiki:Common.css oder MediaWiki:Wikia.css und ersetze "Benutzername" durch den Namen des Admins. Hinter "color:" könnt ihr die Farbe ändern (hier "blue"). Für mehr Infos über die Namen der Farben lese Hilfe:Farben.

a[href$=":Benutzername"], a[href$="/Benutzername"] {
    color: blue !important; /* Das kann jede Farbe sein oder Hex-Code */
    font-family: Arial  !important; /* Das kann nur eine Schriftart sein, die Fandom kennt */
}

Wie sorge ich dafür, dass die Navigation in meinem Wiki rund ist?

Packe diesen Code auf MediaWiki:Wikia.css. Der Code funktioniert unabhängig von der Hintergrundfarbe deines Wikis.

/* Rounded corners for nav */
 
.WikiHeader .navbackground, .WikiHeader > nav .subnav-2 {
     border-radius: 0 5px 0 5px;
}
 
.WikiHeader > nav li:first-child {
     border-radius: 5px 0 0 0;
}
 
.WikiHeader > nav li:last-child {
     border-radius: 5px 0 0;
}
 
.WikiHeader nav li.marked, .WikiHeader > nav .subnav-2 .marked2 .subnav-2a {
     border-radius: 5px 5px 0 0;
}
 
.WikiHeader nav {
     border-radius: 1em 1em 0 0;
}
 
.WikiHeader > nav li.marked > a {
     border-top: none;
}
 
.WikiNav .navbackground > div {
    background-color:transparent;
}
 
.WikiNav .nav-item.marked > a {
    border-color: transparent;
}
 
.WikiHeader > nav .subnav-3 {
     border-radius: 0 5px 5px 5px;
}
 
.WikiHeader > nav li.marked > a {
     border-top: none;
}

Wie ändere ich die Schriftfarbe von einem Label im Profil (wie z. B. "Admin")

Füge diesen Code auf der Seite MediaWiki:Wikia.css ein und ändere hinter "color:" die Farbe- Für mehr Infos über Farben siehe Hilfe:Farben.

/* Tags wie "Chat-Moderator" im Profil */
.UserProfileMasthead .masthead-info .tag {
	color: black;
}

JavaScript

Wie schaffe ich es, dass die {{USERNAME}}-Vorlage funktioniert?

Als erstes musst du Vorlage:USERNAME mit folgenden Code erstellen:

<span class="insertusername">{{{1|<insert name here>}}}</span>

Diesen Code fügst du auf der Seite MediaWiki:Common.js ein und lässt ihn von Fandom-Mitarbeitern überprüfen:

/* Skript für die USERNAME-Vorlage (ersetzt Inhalt der Vorlage durch den Namen des Lesers) */
 
function UserNameReplace() {
    if(typeof(disableUsernameReplace) != 'undefined' && disableUsernameReplace || wgUserName === null) return;
    $("span.insertusername").html(wgUserName);
 }
 addOnloadHook(UserNameReplace);
 
/* Ende des Username-Skripts */

Wie importiere ich mehrere Skripts aus dem Dev-Wiki

Um mehrere Skripte aus dem Dev-Wiki (oder anderen Wikis bzw. lokalen Seiten) zu importieren, kannst du folgenden Code benutzen. Fandom arbeitet derzeit an einer anderen Möglichkeit, die auf Hilfe:Einbinden von zusätzlichem CSS und JS erklärt wird. Jedoch hat diese den Nachteil, dass diese importieren Skripte als letztes geladen werden und nur ausgewählte Seiten importiert werden können.

Wichtig ist, dass beim letzten Skript, welches importiert wird, das Komma ausgelassen wird. Alles weitere habe ich im Code-Beispiel selbst erklärt:

importArticles({
    type: 'script',
    articles: [
        'MediaWiki:Lokales.js', //Das Skript ist auf der Seite MediaWiki:Lokales.js in deinem Wiki gespeichert. Einfach "Lokales" durch den Namen des Skripts ersetzen.
        'u:dev:PurgeButton/code.js', //Dieses Skript befindet sich im Dev-Wiki (dev.wikia.com). Du kannst so auch andere Skripte aus dem Wiki importieren, indem du "PurgeButton" durch den Namen einer anderen Seite (anderen Skripts) einfügst. 
        'w:c:de.clashofclans:MediaWiki:Common.js/TopBox.js' // Beispiel für das Importieren eines Skripts aus einem anderen Wiki (in diesem Fall das Skript "TopBox.js" aus dem deutschen Clash-Wiki). Einfach "de.clashofclans" durch die URL ersetzen und "MediaWiki:Common.js/TopBox.js" durch den Seitennamen, wo sich das andere Skript befindet, um ein Skript aus einem anderen Wiki zu importieren.
    ]
});

Wenn du das für dein Wiki angepasst hast, dann füge es auf der Seite MediaWiki:Common.js ein.

In Planung

  • Benutzergruppe neben dem Namen anzeigen
  • Angepasste Tags im Profil (anhand eines Skripts im Dev-Wiki)

Schlusswort

Ihr solltet auf jeden Fall das Dev-Wiki besuchen, was viele Codes und Styles enthält, die man importieren kann.

Das sind zwar noch relativ wenige Codes, aber eventuell füge ich in Zukunft etwas kompliziertere Beispiele ein, die ganz nett sein könnten. Solltet ihr Fragen oder Vorschläge für weitere Skripts haben, dann lasst es mich wissen!

Auch bei Fandom

Zufälliges Wiki