WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 21.06.2017 14:08:14

cliff
Mitglied

[Erledigt] Editor und css wie im Frontend

Hallo,

ich habe mir gerade die Frage gestellt, ob ich das individuelle CSS eines genutzten Templates auch irgendwie im CSS vom CKEditor einbauen könnnte, sodass ich zum Beispiel im Adminbereich beim Texte eingeben die Formatierung vom Frontend sehen kann. Insbesondere Überschriften, Schriftarten, Links, Farben und Bilder mit speziellen CSS Zuordnungen (Schatten, Rahmen usw.).

Weiß hier jemand, in welcher Stylesheet-Datei ich die css-Inhalte aus dem Template einfügen müsste?

Beste Grüße
Cliff

Offline

#2 21.06.2017 14:13:44

florian
Administrator

Re: [Erledigt] Editor und css wie im Frontend

Im Templateverzeichnis eine editor.css mit den Styles anlegen. Siehe Hortal/Vertal


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 21.06.2017 15:20:57

cliff
Mitglied

Re: [Erledigt] Editor und css wie im Frontend

Hey Florian und besten Dank!

Ich habe jetzt eine editor.css mit den css-Inhalten des Templates erstellt und auch in den Ornder "templates" geschoben, aber im Adminbereich ändert sich irgendwie nichts. Den Hinweis auf "Hortal/Vertal" habe ich auch nicht ganz verstanden  sad

Offline

#4 21.06.2017 15:25:11

bernd
Developer

Re: [Erledigt] Editor und css wie im Frontend

Bei solchen Änderungen mußt du auf alle Fälle den Browser-Cache löschen, damit sie sichtbar werden.

Dann eine weitere beliebte Falle: in der editor.css nur die wirklich "nackten" Formatierungen übernehmen.
wenn du z.B. in deiner template.css sowas hast:

#content h1 { .... }

dann darf das in der editor css nur so aussehen:

h1 { ... }

Der Hinweis auf hortal/vertal meinte, dort (bei den Standardtemplates) kannst du spicke, wie das gemacht wird.

Beitrag geändert von bernd (21.06.2017 15:25:48)


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

florian

#5 21.06.2017 15:29:11

florian
Administrator

Re: [Erledigt] Editor und css wie im Frontend

Ich hatte mich unklar ausgedrückt, bitte entschuldige.
Die editor.css muss ins Verzeichnis des Templates, also /templates/dein_template
Bei den Templates Hortal und Vertal, die bei WBCE 1.2 standardmäßig dabbei sind, kannst Du sehen, wie das aufgebaut ist, d.h. es gibt eine /templates/wbce_hortal/editor.css und eine /templates/wbce_vertal/editor.css


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#6 21.06.2017 16:06:20

cliff
Mitglied

Re: [Erledigt] Editor und css wie im Frontend

ah ... jetzt hat es teilweise geklappt und ich denke den Rest bekomme ich auch noch nach Überprüfung der eingefügten CSS-Anweisungen hin!

Besten Dank Euch beiden  smile

Offline

#7 21.06.2017 16:14:36

cliff
Mitglied

Re: [Erledigt] Editor und css wie im Frontend

Vielleicht noch eine kleine Frage, bzw. etwas, das mich gerade verwirrt. Ich nutze für Überschriften (h1 etc.) und dem allgemeinem Text je eine Google-Schriftart, die ich im Head der index.php im Template einbinde. Komischerweise wird die Schriftart für die Überschriften auch im Editor angezeigt, aber der allgemeine Text (wird über body angesprochen) ist im Editor nicht identisch. Liegt das daran, dass "body" in der editor.css nicht gültig ist?!

Auch eine css-Anweisung über "p" klappt leider so nicht ... Das ist nicht so tragisch, aber schön wäre es schon, wenn ich im Editor auch die Schriftart wie im Frontend sehen würde  tongue

EDIT: Mir fällt gerade ein, dass ich die externen Schriftarten von Google auch irgendwie in der CSS einbauen kann ... muss mal probieren!

Beitrag geändert von cliff (21.06.2017 16:17:45)

Offline

#8 21.06.2017 16:21:53

cliff
Mitglied

Re: [Erledigt] Editor und css wie im Frontend

Das hat geklappt:

Ganz oben in der editor.css habe ich einfach das hier eingefügt:

@import url(http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu);
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
@import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

Falls hier jemand liest und das gleiche Problem hat  big_smile

Jetzt sieht es im Editor genau so aus, wie es auch vorne angezeigt wird!

Offline

#9 21.06.2017 16:22:48

bernd
Developer

Re: [Erledigt] Editor und css wie im Frontend

Du mußt die Schriftart in der editor.css explizit dem "body" mitgeben, dann sollte das auch klappen.

Hintergrund: das Editierfeld ist in einem iframe (also quasi ein vollständiges HTML-Dokument in einem HTML-Dokument) und hat (dadurch) einen eigenen "body".
----
Nachtrag: das Gleiche gilt auch für font-size, color und ähnliches, auch wenn es in deiner template.css nicht für den body definiert ist sonder z.B. für irgendein container-div in dem sich dein Seiteninhalt tummelt.
---
Nachtrag 2: stimmt, das @import hatte ich ganz übersehen ;-)

Beitrag geändert von bernd (21.06.2017 16:27:07)


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#10 21.06.2017 16:25:43

cliff
Mitglied

Re: [Erledigt] Editor und css wie im Frontend

Danke Bernd und das habe ich jetzt auch so umgesetzt. Es fehlten in der editor.css nur die Importbefehle für die Google-Schriftarten  wink

Offline

#11 21.06.2017 19:59:11

grindmobil
Gast

Re: [Erledigt] Editor und css wie im Frontend

Mal eine Frage am Rande: Wo hast du denn das Template her? Bei den "offiziellen" sollte das eigentlich überall passen.

#12 22.06.2017 11:14:57

cliff
Mitglied

Re: [Erledigt] Editor und css wie im Frontend

Moin,

also mein Template basiert auf dem "simple responsive template", wurde aber stark modifiziert. Jedoch hatte ich im Adminbereich zu keinem Zeitpunkt die Anzeige wie im Frontend. Mit der editor.css hat es jetzt aber 100%ig geklappt.

Zu sehen ist das Template hier: www.packhalle-openair.de

Offline

#13 22.06.2017 11:43:31

bernd
Developer

Re: [Erledigt] Editor und css wie im Frontend

uups

website schrieb:

... welches am 10.06.2018 zum 2. mal durchgeführt wurde

glasses


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#14 22.06.2017 12:15:32

cliff
Mitglied

Re: [Erledigt] Editor und css wie im Frontend

bernd schrieb:

uups

website schrieb:

... welches am 10.06.2018 zum 2. mal durchgeführt wurde

glasses

oh ... besten Dank für die Aufmerksamkeit! Ich bin meist einfach zu schnell oder gar hastig beim tippen wink

Offline

Fußzeile des Forums

up