Nach zusätzlichem CSS stimmt Editor und Seitenansicht nicht überein

Gelöst pixel2404
(@pixel2404)

vor 3 Jahren, 6 Monaten
Hallo zusammen,

zum testen bzw. herumspielen nutze ich das Template „Reykjavik“. Dies hat mir auf jeder Seite oben unterm dem Header eine graue Box über die ganze Seite angezeigt in welcher der Seitentitel stand. Dies habe ich mit zusätzlichem CSS im Template:
```
#intro-container {
	background: none;
	border: none;
}
.page-title {
	display: none;
}
```
ausgeblendet. Auf der Seite sieht auch alles richtig aus. Im Editor wird diese Box jedoch noch angezeigt:

Ist das normal?

Viele Grüße
pixel2404
- Dieses Thema wurde geändert vor 3 Jahren, 6 Monaten von pixel2404.
- Dieses Thema wurde geändert vor 3 Jahren, 6 Monaten von pixel2404.

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren, 6 Monaten

Hallo,
wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
Viele Grüße
Hans-Gerd

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 6 Monaten

Das Theme verwendet einige Editor-Stylesheets, z.B. editor-style.css, mit denen das Layout auch im Backend ansatzweise umgesetzt werden soll, um bereits beim Schreiben einen Eindruck zu vermitteln wie die Seite später aussehen wird. Nimmst du Änderungen am Stylesheet des Themes vor und möchtest, dass diese Änderungen auch im Editor berücksichtigt werden, musst du ein Child-Theme erstellen und auch die Editor-Stylesheets anpassen.

Thread-Starter pixel2404
(@pixel2404)

vor 3 Jahren, 6 Monaten

wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.

Das wird ja in zweierlei Hinsicht schwer. Zum einen ist meine Installation hier lokal und von außen nicht zugänglich. Zum Anderen sieht man den Effekt ja nur im Backend. Im Frontend (Seite) passt ja alles.

Oder habe ich es falsch verstanden?

Das Theme verwendet einige Editor-Stylesheets, z.B. editor-style.css, mit denen das Layout auch im Backend ansatzweise umgesetzt werden soll, um bereits beim Schreiben einen Eindruck zu vermitteln wie die Seite später aussehen wird.

Hm, ok. Diese Anpassung muss ich also an der Datei „editor-style.css“ direkt auf dem Filesystem durchführen, richtig?

Ich ergänzen einfach die gleichen Zeilen wie im Backend „Zusätzliches CSS“ im Theme?

Bin noch Anfänger 🙂
Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 6 Monaten
Zum einen ist meine Installation hier lokal und von außen nicht zugänglich.

In solchen Fällen wäre es schön, wenn du das direkt mit angibst.

Zum Anderen sieht man den Effekt ja nur im Backend. Im Frontend (Seite) passt ja alles.

Wir fragen eigentlich nie nach der URL zur Website, weil wir gerne fremde Webseiten lesen möchten, sondern weil wir mit den Entwicklertools des Browsers sehr viele Informationen abfragen können, die uns dann bei der Beurteilung des Problems helfen, unter anderem …
- welche WordPress-Version verwendest du?
- welches Theme?
- welche Plugins? (nicht alle werden ausgegeben)
- gibt es JavaScript-Fehlermeldungen in der Konsole?
- welchen Webserver und welche PHP-Version verwendest du?
- sind Website- und WordPress-URL richtig eingetragen?
- gibt es einen offensichtlichen Befall mit Malware?
Besonders Design-Anpassungen lassen sich mit den Entwickler-Tools des Browser viel besser nachvollziehen. „Ich hab da, also, äh, eine Webseite mit einem Abschnitt mit hellgrauem Hintergrund und möchte da den oberen Rand dicker und den Kasten mit einem Schatten haben …“ zaubert viele Fragezeichen auf die Gesichter der Leute, die dir gerne helfen würden, das anhand der Beschreibung aber nicht konkret nachvollziehen können.

Diese Anpassung muss ich also an der Datei „editor-style.css“ direkt auf dem Filesystem durchführen, richtig?

Nein, das würde beim nächsten Theme-Update überschrieben.
Du müsstest, wie beschrieben, ein Child-Theme anlegen, also eine Ergänzung zum verwendeten Theme die nicht bei Updates überschrieben wird. Mehr Informationen findest du in der WordPress-Dokumentation: https://developer.wordpress.org/themes/advanced-topics/child-themes/

Ich ergänzen einfach die gleichen Zeilen wie im Backend „Zusätzliches CSS“ im Theme?

Im Prinzip ja. Im Einzelfall kommt das auf die CSS-Regeln an. Nutzt du eine spezifische CSS-Regel die eine CSS-Klasse für eine bestimmte Seite verwendet (sowas wie .page-id-42 .site-content h2 { color: red; }, also eine Farbanpassung für Überschriften auf der Seite mit der ID 42), nutzt es wenig, das in das Editor-Stylesheet zu übertragen – dort wird ja mit dem Editor eine andere Seite angezeigt.
Thread-Starter pixel2404
(@pixel2404)

vor 3 Jahren, 6 Monaten

Ok, ich habe es geschafft die Installation 1:1 auf den Webserver zu bekommen und habe sie dort in einen Unterordner gepackt.

http://www.gehr-edv.de/wp01/

Wir fragen eigentlich nie nach der URL zur Website, weil wir gerne fremde Webseiten lesen möchten,

Da gibt es auch noch nicht wirklich was zu sehen und das was man sieht ist (noch) nicht schön. Versuche mich ja gerade erst an WP.

ich versuche alle Infos zu liefern …

– WorPress-Version: 5.5.1
– Theme: Reykjavik
– PHP: (7.3.17-nmm1) Ist bei All-Inkl

* installierte Plug-Ins *
(wurden aber anscheinend autom. installiert)
– aThemeArt Theme Helper
– FameTheme Demo Importer
– Smart Slider 3
– WP Fastest Cache
– WPForms Lite

gibt es JavaScript-Fehlermeldungen in der Konsole?

In den Firefox-Tools (F12)? Ich sehe zumindest keine.

sind Website- und WordPress-URL richtig eingetragen?

ja

gibt es einen offensichtlichen Befall mit Malware?

Nein, das System war bis heute ja nur lokal hier und nicht zugänglich.

Du müsstest, wie beschrieben, ein Child-Theme anlegen, also eine Ergänzung zum verwendeten Theme die nicht bei Updates überschrieben wird.

Ok, ich versuche es. Heute soll auch mein Buch zu WP kommen. Dann klärt sich eventuell auch einiges.

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 6 Monaten

Da haben wir uns wohl missverstanden. Ich wollte dir eigentlich nur erklären, wieso wir nach der URL zur Website fragen.

Wenn du außerdem Informationen zu deiner Website liefern möchtest, geht das einfacher, wenn du Werkzeuge > Websitezustand > Bericht aufrufst, wartest bis alles geladen ist, auf den Button klickst und dann den Bericht unverändert aus der Zwischenablage einfügst.

Aber inzwischen hast du ja die wesentliche Information, in einem Child-Theme die Editor-Stylesheets zu kopieren und nach deinen Wünschen abzuändern – mehr brauchen wir da ja eigentlich gar nicht zu wissen.

Thread-Starter pixel2404
(@pixel2404)

vor 3 Jahren, 6 Monaten

Hallo,

ich wollte noch kurz Rückmeldung geben. Ich habe die Tage das Buch „Einstieg in WordPress5“ fast durch gearbeitet und mich erst einmal mit dem System auseinander gesetzt. Hierdurch sind doch schon viele Fragezeichen verschwunden und ich konnte mit einem anderen Theme als Basis ganz gut arbeiten bzw. das Ergebnis ist schon mal deutlich besser.
Das Thema hier wird sicher wieder kommen aber bis dahin sollte ich tiefer in WP einsteigen und würde dann ggf. nochmal auf diesen Beitrag zurück kommen 🙂

Viele Grüße

Moderator Angelika Reisiger
(@la-geek)

vor 3 Jahren, 6 Monaten

Hallo @pixel2404

danke für die Rückmeldung. Da deine neuen Fragen nicht mehr das eingangs erwähnte Theme betreffen werden, setze ich diesen Thread auf gelöst.

Bitte öffne ggf. einen neuen Thread – s. auch FAQ, Punkt A) 8.: Eine Frage = ein Thread (Thema)

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Das Thema „Nach zusätzlichem CSS stimmt Editor und Seitenansicht nicht überein“ ist für neue Antworten geschlossen.

Ansichten