Zum Inhalt springen

„Gespräch:MediaWiki HTML 1“ – Versionsunterschied

aus AufEinWort, der freien Forschung
← Zum vorherigen Versionsunterschied

Nikolaos (Diskussion | Beiträge)

12 Benutzergruppen
266.527 Bearbeitungen
VisuellWikitext
K Textersetzung - „=== Nikolaos: ===↵––––“ durch „=== Nikolaos: ===“
K Textersetzung - „|Teilnehmer1“ durch „|Teilnehmer“
 
Zeile 1: Zeile 1:
{{AufEinWortGespräch
{{AufEinWortGespräch
|Benennung=MediaWiki HTML 1
|Benennung=MediaWiki HTML 1
|Teilnehmer1=ChatGPT Sophos GPT-4
|Teilnehmer=ChatGPT Sophos GPT-4
|Erstelldatum=4. März 2025
|Erstelldatum=4. März 2025
|Nummer=00
|Nummer=00

Aktuelle Version vom 8. Oktober 2025, 04:42 Uhr

Über diese Seite Gespräch

MediaWiki HTML 1
ChatGPT Sophos GPT-4
4. März 2025 n. Chr. erst.  
Ausgabe 00
Ausgabe 00
unüberarbeitet ungeprüft
keine Datei

MediaWiki

Sophos:

Hallo Nikolaos, welche Sachfrage in Bezug auf dein MediaWiki möchtest du klären?

Nikolaos:

Ich nutze in Mediawiki den Dark Mode, jedoch ist diese Anpassung des Erscheinungsbild nicht soweit vom Entwickler der Extension aufbreitet worden, daß er alle Hintergründe berücksichtigt, so daß ich hier und da auf Seiten weiße Schrift auf weißem Hintergrund habe wie vergleichsweise für die Klasse ".ext-replacetext-searchoptions".

wie könnte man in Common CSS eine CSS einrichten, sodaß derartige Felder in den Hintergundfarbe auf ein dunkelgrau oder anthrazit stehe?

Sophos:

Du kannst in deiner MediaWiki:Common.css eine CSS-Regel definieren, um das Problem mit der .ext-replacetext-searchoptions-Klasse (und ähnlichen Fällen) zu beheben. Wenn der Dark Mode nicht alle Hintergrundfarben anpasst, kannst du gezielt diese Elemente überschreiben.

Lösung mit Common.css:

Füge folgende CSS-Regel in deine MediaWiki:Common.css ein:

css

KopierenBearbeiten

.ext-replacetext-searchoptions {

    background-color: #2E2E2E !important; /* Dunkelgrau/Anthrazit */

    color: #FFFFFF !important; /* Weiß für den Text */

    border: 1px solid #555; /* Optional: Grenze für bessere Sichtbarkeit */

}

.ext-replacetext-searchoptions input,

.ext-replacetext-searchoptions select,

.ext-replacetext-searchoptions textarea {

    background-color: #3A3A3A !important; /* Etwas helleres Dunkelgrau für Eingabefelder */

    color: #FFFFFF !important;

    border: 1px solid #666;

}

Erklärung:

  • background-color: #2E2E2E; – Setzt den Hintergrund auf Dunkelgrau.
  • color: #FFFFFF; – Setzt die Schriftfarbe auf Weiß.
  • border: 1px solid #555; – Fügt eine leicht sichtbare Umrandung hinzu.
  • Die spezifischen Regeln für input, select und textarea sorgen dafür, dass Eingabefelder ebenfalls angepasst werden.

Anpassung für den Dark Mode:

Falls die Regel nur im Dark Mode aktiv sein soll und dieser mit einer CSS-Klasse wie skin-dark am <body>-Tag erkannt wird, dann kannst du das CSS so anpassen:

css

KopierenBearbeiten

body.skin-dark .ext-replacetext-searchoptions {

    background-color: #2E2E2E !important;

    color: #FFFFFF !important;

}

body.skin-dark .ext-replacetext-searchoptions input,

body.skin-dark .ext-replacetext-searchoptions select,

body.skin-dark .ext-replacetext-searchoptions textarea {

    background-color: #3A3A3A !important;

    color: #FFFFFF !important;

}

Falls noch weitere Bereiche betroffen sind, kannst du deren CSS-Klassen einfach mit ähnlichen Regeln ergänzen. Teste es und passe die Farbtöne an, falls nötig! 😊

Nikolaos:

Es soll nur im Darkmode aktiv sein. Wier kann man es jedoch so einrichten, daß ich nicht für jeden Fall einen neuen Eintrag hinzufügen muß, also wie könnte man da grundlegender ansetzen, da es ja jeden Hintergrund bertrifft. Ich kann nur annehmen, daß DarkMode nur die nativen MediaWiki Seiten jedoch nicht die der Extensions verwaltet.

Sophos:

Ja, das klingt danach, als ob der Dark Mode in deinem MediaWiki nur die nativen MediaWiki-Elemente berücksichtigt, während Erweiterungen eigene Stile mit hellen Hintergründen beibehalten. Eine generelle Lösung wäre, alle weißen Hintergründe in den Dark Mode umzuwandeln, ohne explizit jede einzelne Klasse aufzuzählen.

Globale Lösung für Dark Mode

Anstatt jede Klasse einzeln zu überschreiben, kannst du eine allgemeine Regel für Elemente mit weißem Hintergrund definieren, wenn der Dark Mode aktiv ist.

Lösung: MediaWiki:Common.css

Füge dies in MediaWiki:Common.css hinzu:

css

KopierenBearbeiten

/* Gilt nur, wenn der Dark Mode aktiv ist */

body.skin-dark * {

    background-color: #2E2E2E !important; /* Standard-Dunkelgrau für alle weißen Hintergründe */

    color: #FFFFFF !important; /* Textfarbe auf Weiß setzen */

}

/* Eingabefelder, Textbereiche und Auswahlfelder im Dark Mode */

body.skin-dark input,

body.skin-dark select,

body.skin-dark textarea {

    background-color: #3A3A3A !important;

    color: #FFFFFF !important;

    border: 1px solid #666 !important;

}

/* Tabellen und Formularfelder, die weiß sein könnten */

body.skin-dark table,

body.skin-dark th,

body.skin-dark td,

body.skin-dark .mw-body-content {

    background-color: #222222 !important;

    color: #FFFFFF !important;

}

/* Entfernt zu starke Kontraste oder umrandete Container */

body.skin-dark .mw-panel,

body.skin-dark .mw-footer {

    background-color: #1E1E1E !important;

}

/* Links besser sichtbar machen */

body.skin-dark a {

    color: #00AEEF !important; /* Helles Blau für bessere Sichtbarkeit */

}

body.skin-dark a:visited {

    color: #9A79A6 !important;

}

/* Code-Blöcke (falls betroffen) */

body.skin-dark pre,

body.skin-dark code {

    background-color: #191919 !important;

    color: #FFFFFF !important;

}

/* Spezifische Korrektur für „Replace Text“-Erweiterung */

body.skin-dark .ext-replacetext-searchoptions {

    background-color: #2E2E2E !important;

    color: #FFFFFF !important;

    border: 1px solid #444;

}

Erklärung der Regeln

  • body.skin-dark *: Setzt die Hintergrundfarbe für alle Elemente auf Dunkelgrau (#2E2E2E).
  • input, select, textarea: Spezifische Anpassung für Formulareingaben.
  • table, th, td, .mw-body-content: Umfasst Tabellen und Wiki-Inhalte.
  • .mw-panel, .mw-footer: Dunkelt Navigationsleisten und den Footer ab.
  • a: Setzt die Linkfarbe für bessere Sichtbarkeit an dunklem Hintergrund.
  • pre, code: Stellt sicher, dass Code-Blöcke gut lesbar sind.
  • .ext-replacetext-searchoptions: Direktanpassung für die von dir genannte Klasse.

Warum ist das effizient?

  1. Universelle Anpassung: Es betrifft alle weißen Hintergründe, egal aus welcher Erweiterung sie stammen.
  2. Kein manuelles Hinzufügen: Falls eine neue Erweiterung weiße Hintergründe verwendet, wird sie automatisch angepasst.
  3. Saubere Dark-Mode-Erfahrung: Die Lesbarkeit bleibt durch die Linkfarben erhalten.

Nächster Schritt

Falls einige Erweiterungen dennoch Ausnahmen benötigen (z. B. wenn sie spezielle Farben nutzen), kannst du spezifische !important-Regeln für einzelne Klassen hinzufügen.

Probier es aus und sag mir, ob noch weitere Feinanpassungen nötig sind! 😊

Nikolaos:

Lösung: MediaWiki:Common.css eingesetzt und gespeichert bleibt ohne Wirkung. Ich habe den Cache in Safari gelöscht.

2/2

Sophos:

Wenn die Änderungen in MediaWiki:Common.css keine Wirkung zeigen, gibt es einige mögliche Ursachen und Lösungen:

1. Stelle sicher, dass Common.css tatsächlich geladen wird

Prüfe, ob deine Änderungen überhaupt in MediaWiki aktiv sind:

  1. Gehe zur URL deiner Common.css-Seite: arduino KopierenBearbeiten https://deine-wiki-url.de/wiki/MediaWiki:Common.css
  2. → Wird der neue CSS-Code dort angezeigt?
  3. Falls die Datei nicht geladen wird, könnte die serverseitige Caching-Einstellung das Problem sein.

2. Serverseitigen Cache leeren

Falls Common.css nicht sofort wirksam wird, leere MediaWikis internen Cache:

  1. Gehe zu https://deine-wiki-url.de/wiki/Special:InvalidateCache
  2. Alternativ kannst du manuell über SSH (falls du Serverzugang hast) Folgendes ausführen: sh KopierenBearbeiten php maintenance/run.php update
  3. php maintenance/run.php runJobs
  5. Falls du Zugriff auf die LocalSettings.php hast, füge temporär hinzu: php KopierenBearbeiten $wgUseFileCache = false;
  6. $wgCacheEpoch = gmdate( 'YmdHis', time() );
  7. Dadurch erzwingst du, dass die Stylesheets neu geladen werden.

3. Überprüfe, ob das Stylesheet in der Seite geladen wird

Nutze die Entwicklerkonsole in Safari (oder Chrome/Firefox):

  1. Öffne Entwicklerkonsole:
    • Safari: Cmd + Option + C
    • Chrome/Firefox: F12 oder Strg + Shift + I
  1. Wechsle zum "Elements"-Tab und suche nach: html KopierenBearbeiten <link rel="stylesheet" href="/w/load.php?lang=de&modules=site.styles&only=styles&skin=vector">
  2. Falls die Datei fehlt, ist die CSS-Auslieferung blockiert.
  3. Teste, ob Änderungen geladen werden:
    • Öffne den "Network"-Tab (Cmd + Option + R in Safari).
    • Filtere nach Common.css.
    • Siehst du hier die geänderten Regeln? Falls nicht → Cache-Problem!

4. Prüfe, ob eine andere CSS-Regel Vorrang hat

Falls eine andere Regel das Common.css überschreibt, versuche, die Regeln noch spezifischer oder wichtiger zu machen:

  1. Verwende !important in allen Anweisungen (falls noch nicht geschehen): css KopierenBearbeiten body.skin-dark * {
  2.     background-color: #2E2E2E !important;
  3.     color: #FFFFFF !important;
  4. }
  6. Setze Regeln für spezifische Skins (falls vorhanden): css KopierenBearbeiten body.vector.skin-dark * {
  7.     background-color: #2E2E2E !important;
  8. }
  10. Falls .skin-dark nicht als Klasse im <body> vorhanden ist, prüfe, ob der Dark Mode wirklich diese Klasse verwendet.

5. Falls Dark Mode von einer Extension kommt: Debuggen

Falls du eine MediaWiki-Dark-Mode-Extension nutzt, kann es sein, dass die Common.css überschrieben wird. In dem Fall:

  1. Suche in den geladenen CSS-Dateien (F12 > Sources > CSS-Dateien).
  2. Falls der Dark Mode eigene Stylesheets lädt, musst du sie in LocalSettings.php deaktivieren oder Common.cssanpassen.

Zusammenfassung

✅ Überprüfe, ob Common.css tatsächlich geladen wird.

✅ Leere den MediaWiki-Cache (Special:InvalidateCache oder php run.php update).

✅ Prüfe im Browser, ob die Datei korrekt eingebunden wird.

✅ Falls nötig, nutze !important oder spezifischere Selektoren.

✅ Falls eine Dark-Mode-Extension verwendet wird, überprüfe deren CSS-Dateien.

Teste das und sag mir, ob sich das Problem löst oder ob ich weiterhelfen soll! 😊

Nikolaos:

[media pointer="file-service://file-KGqrxvqqZnKp3rUAxnFiU9"]

Auch der Einfache Code wie folgt funktioniert nicht:

.ext-replacetext-searchoptions {

    background-color: #2E2E2E !important; /* Dunkelgrau/Anthrazit */

    color: #FFFFFF !important; /* Weiß für den Text */

    border: 1px solid #555; /* Optional: Grenze für bessere Sichtbarkeit */

}

eventuell ist es anders zu erreichen. Siehe Anhang

Sophos:

Danke für den Screenshot! Ich sehe, dass das fieldset-Element mit der Klasse .ext-replacetext-searchoptionsimmer noch die Hintergrundfarbe #fafcfe aus load.php erhält. Das bedeutet, dass entweder:

  1. Deine Common.css nicht richtig geladen wird oder
  2. Eine andere CSS-Regel Vorrang hat und deine überschreibt.

Lösungsansätze:

1. Prüfen, ob Common.css geladen wird

Öffne die Entwicklerkonsole (F12 oder Cmd + Option + I in Safari) und führe im Console-Tab folgenden Befehl aus:

javascript

KopierenBearbeiten

mw.loader.load('/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css');

Dann lade die Seite neu. Falls die Änderungen dann greifen, war das CSS vorher einfach nicht aktiv.

2. Spezifischere CSS-Regel schreiben

Falls eine andere Regel Vorrang hat, kannst du versuchen, sie durch eine noch spezifischere Regel zu überschreiben:

css

KopierenBearbeiten

body.skin-dark fieldset.ext-replacetext-searchoptions {

    background-color: #2E2E2E !important;

    color: #FFFFFF !important;

    border: 1px solid #555 !important;

}

Falls das nicht reicht, kannst du es mit einer noch stärkeren Regel versuchen:

css

KopierenBearbeiten

body.skin-dark fieldset.ext-replacetext-searchoptions,

body.skin-dark .ext-replacetext-searchoptions {

    background-color: #2E2E2E !important;

    color: #FFFFFF !important;

    border: 1px solid #555 !important;

}

Falls MediaWiki durch load.php Styles überschreibt, kannst du versuchen, :root zu verwenden:

css

KopierenBearbeiten

:root body.skin-dark fieldset.ext-replacetext-searchoptions {

    background-color: #2E2E2E !important;

    color: #FFFFFF !important;

}

3. Prüfen, welche Regel Vorrang hat

  1. Öffne die Entwicklerkonsole (F12 oder Cmd + Option + I in Safari).
  2. Gehe in den "Elements"-Tab und wähle das fieldset-Element mit der Klasse .ext-replacetext-searchoptions.
  3. Schaue im "Styles"-Panel nach, welche Regel gerade aktiv ist.
    • Falls dort deine Regel durchgestrichen ist, wird sie von einer anderen Regel überschrieben.
    • Falls load.php Vorrang hat, könnte es sein, dass die Dark Mode-Extension eine andere Methode benötigt.

Falls load.php Vorrang hat und deine Regel ignoriert wird, versuche, sie mit einer benutzerdefinierten JavaScript-Anpassung durchzusetzen (siehe Schritt 4).

4. (Alternativ) Hintergrundfarbe per JavaScript setzen

Falls Common.css nicht greift, kannst du es über eine MediaWiki:Common.js-Anpassung setzen:

  1. Gehe zu https://deine-wiki-url.de/wiki/MediaWiki:Common.js.
  2. Füge diesen Code ein:

javascript

KopierenBearbeiten

document.addEventListener("DOMContentLoaded", function() {

    if (document.body.classList.contains('skin-dark')) {

        var elements = document.querySelectorAll(".ext-replacetext-searchoptions");

        elements.forEach(function(el) {

            el.style.backgroundColor = "#2E2E2E";

            el.style.color = "#FFFFFF";

            el.style.border = "1px solid #555";

        });

    }

});

  1. Speichern und Special:InvalidateCache aufrufen.
  2. Seite neu laden.

Fazit

  • Teste zuerst, ob Common.css überhaupt geladen wird (mw.loader.load(...)).
  • Versuche spezifischere Selektoren (body.skin-dark fieldset.ext-replacetext-searchoptions).
  • Falls load.php Vorrang hat, überschreibe es mit :root oder JavaScript.

Probiere die Änderungen aus und lass mich wissen, ob sie Wirkung zeigen! 😊

Nikolaos:

Da ich ja den DarkMode nutze sind bereits die MediaWiki css Codes überschrieben und ch weiß nicht ob da Eingaben mit Body.skin-dark greifen.

Informiere dich über die Nutzung unter https://www.mediawiki.org/wiki/Extension:DarkMode

Die Änderungen greifen erst wenn ich DarkMode in LocalSettigs.php einmal aus und dann wieder an schalte.

Sophos:

Danke für das Feedback! Das bedeutet, dass die DarkMode-Extension beim Umschalten ihre eigenen Styles neu lädtund dabei Common.css überschreibt oder nicht sofort einbindet. Daher müssen wir eine Methode finden, damit deine Common.css-Änderungen direkt nach dem Umschalten von DarkMode aktiv sind.

Lösungen für das Problem

Es gibt zwei Hauptwege, das Problem zu lösen:

1️⃣ CSS-Änderungen dynamisch durchsetzen (empfohlen)

Da DarkMode seine eigenen Styles dynamisch lädt, können wir sicherstellen, dass unsere Änderungen nach dem Umschalten aktiv werden. Das geht mit JavaScript in MediaWiki:Common.js.

🔧 Lösung: MediaWiki:Common.js hinzufügen

  1. Gehe zu: https://dein-wiki-url.de/wiki/MediaWiki:Common.js
  2. Füge diesen Code hinzu und speichere:

javascript

KopierenBearbeiten

mw.hook('darkmode.toggled').add(function() {

    if (document.body.classList.contains('client-darkmode')) {

        document.querySelectorAll(".ext-replacetext-searchoptions").forEach(function(el) {

            el.style.backgroundColor = "#2E2E2E";

            el.style.color = "#FFFFFF";

            el.style.border = "1px solid #555";

        });

    }

});

  1. Dann einmal den Cache leeren: https://dein-wiki-url.de/wiki/Special:InvalidateCache
  2. DarkMode umschalten und testen!

🔍 Erklärung:

  • Der mw.hook('darkmode.toggled')-Hook sorgt dafür, dass die Anpassung sofort nach dem Umschaltenausgeführt wird.
  • Die .client-darkmode-Klasse wird von der Extension gesetzt, sobald Dark Mode aktiv ist.
  • Alle .ext-replacetext-searchoptions-Felder bekommen sofort die gewünschte Hintergrundfarbe.

2️⃣ CSS-Regel mit stärkerer Priorität definieren

Falls du doch lieber nur CSS verwenden willst, kannst du :root mit !important kombinieren:

css

KopierenBearbeiten

:root .client-darkmode .ext-replacetext-searchoptions {

    background-color: #2E2E2E !important;

    color: #FFFFFF !important;

    border: 1px solid #555 !important;

}

Warum hilft das?

  • Die Klasse .client-darkmode wird von der Extension gesetzt, wenn Dark Mode aktiv ist.
  • :root kann helfen, Vorrang gegenüber anderen Styles zu bekommen.

Falls sich die CSS-Änderungen trotzdem erst nach einem Neustart von DarkMode zeigen, ist die JavaScript-Methode (1️⃣) zuverlässiger.

Zusammenfassung & Empfehlung

✅ Wenn es sofort nach Umschalten von DarkMode funktionieren soll → Nutze die JavaScript-Lösung (1️⃣) mit mw.hook('darkmode.toggled').

✅ Wenn du nur CSS nutzen willst → Versuche :root .client-darkmode .ext-replacetext-searchoptions in Common.css.

Teste es aus und sag mir, ob es klappt! 😊🚀

Abgerufen von „https://aufeinwort.info/w/index.php?title=Gespräch:MediaWiki_HTML_1&oldid=148604“