WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 21.06.2017 15:08:14

cliff
Member

[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 15:13:44

florian
Administrator

Re: [Erledigt] Editor und css wie im Frontend

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

Offline

#3 21.06.2017 16:20:57

cliff
Member

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 16: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.

Last edited by bernd (21.06.2017 16:25:48)


2 x ROT13 hält besser ...

Online

Liked by:

florian

#5 21.06.2017 16: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

Offline

#6 21.06.2017 17:06:20

cliff
Member

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 17:14:36

cliff
Member

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!

Last edited by cliff (21.06.2017 17:17:45)

Offline

#8 21.06.2017 17:21:53

cliff
Member

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 17: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 ;-)

Last edited by bernd (21.06.2017 17:27:07)


2 x ROT13 hält besser ...

Online

#10 21.06.2017 17:25:43

cliff
Member

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 20:59:11

grindmobil
Guest

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 12:14:57

cliff
Member

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 12:43:31

bernd
Developer

Re: [Erledigt] Editor und css wie im Frontend

uups

website wrote:

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

glasses


2 x ROT13 hält besser ...

Online

#14 22.06.2017 13:15:32

cliff
Member

Re: [Erledigt] Editor und css wie im Frontend

bernd wrote:

uups

website wrote:

... 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

Board footer

Powered by FluxBB

up