Rahmenfarbe um Bilder variabel gestalten klingt einfach, isses aber nich.

[flexx]

Folgendes Problem stellt sich mir.
Ich möchte im Main Content Bilder teilweise mit Rahmen, teilweise aber auch ohne darstellen.
Eine allgemeine Definition über #main img fällt also schon einmal weg.

In TinyMCE kann man ja nun einstellen ob das eingefügte Bild einen Rahmen haben soll und wie dick dieser sein soll.
Der Rahmen ist dann aber immer schwarz.
Wenn ich einen Rahmen möchte, dann soll er aber aufgrund der CI den Farbwert #ccc haben.
Da die Farbe des Borders aber nicht über eine Klasse definiert wird stelle ich mir das Ganze etwas schwierig vor.

Kann sich hier jemand einen Lösungweg vorstellen? TinyMCE aufbohren liegt ja wohl kaum in der Hand der Entwickler....

[xchs]

Hallo flexx,

am einfachsten wird sein, wenn Du in den betreffenden Inhaltselementen eine eigene Klasse angibst und in Deinem Stylesheet dann die CSS-Regeln dazu definierst.

[flexx]

Danke für die Antwort.
Das hatte ich mir auch überlegt, jedoch funktioniert das nicht, da ich beim Bildelement von TinyMCE logischerweise keine eigene Klasse angeben kann.
Fügt man ein Bld imText von Tiny ein, dann wird daraus im HTML border: 2px solid black gemacht.
Die Rahmendicke gibt man ja im Popup Fenster an.
Jede vorher definierte Klasse würde also durch das "black" von Tiny überschrieben.

[xchs]

Danke für die Antwort.
Das hatte ich mir auch überlegt, jedoch funktioniert das nicht, da ich beim Bildelement von TinyMCE logischerweise keine eigene Klasse angeben kann.

Du kannst im Stylesheet "basic.css" Selektoren und Regeln definieren, die dann im TinyMCE unter "Format" zur Verfügung stehen. Dort fügst Du dann Dein Bild ein und wählst die entsprechende vorher definierte Klasse aus.

[frank]

Hallo flexx,

Fügt man ein Bld imText von Tiny ein, dann wird daraus im HTML border: 2px solid black gemacht.

Aber nur dann, wenn das in Deinen Stylesheets so definiert ist. Also setzt Du das erst einmal standardmäßig auf "0px"! Danach kannst Du im TinyMCE direkt unter "Format" für jedes Bild einen individuellen Rahmen festlegen, z.B. "border: 1px solid #ccc;". Vielleicht solltest Du Dich auch einmal mit CSS etwas näher auseinandersetzten!?

Freundliche Grüße
Frank

Ups, xchs war schneller.

[flexx]

Nun ja.
Danke für den Hinweis aber css ist wirklich nicht mein Problem.
Das Problem ist, dass ich in der basic.css keine Definition zur Rahmenfarbe bei Bildern finde.
Diese wird dort nicht definiert oder ich bin blind.

Ich habe dann selbst eine definiert.
Daraufhin war die Rahmenfarbe im Tiny Textfeld auch korrekt wurde aber nachher auf der Seite wieder mit black definiert.
Offensichtlich nutzt Tiny diese Klasse also nur zur Darstellung im Textfeld aber nicht für die endgültige Erstellung des html Codes.
Da wird ja auch wie gesagt keine Klasse verwendet, sondern die Definitionen direkt vergeben also 1px (jenachdem was in den Einstellungen angegeben wurde) solid black.

Das genau ist das Problem.
Alle Klassen die ich erstelle werden von Tiny wieder überschrieben.

Irgendwie scheint es hier keine Lösung zu geben, da das Ganze in der Programmierung von Tiny steckt.
Also muss wohl irgendwie ein Workaround her...

Kurzer Nachtrag:
Unter "Format" in Tiny erscheint übrigens nichts. Auch nicht die Klassen die ich für img erstellt habe.

[xchs]

Hallo flexx,

naja, wenn Du beim betreffenden Bild zusätzlich auch noch die Inline-Styles des TinyMCE definiert hast, dann ist es klar, dass diese letztendlich "siegen".

Hier nochmals schnell die Vorgangsweise:

• In der "basic.css" eine Klasse definieren (z.B. ".imgborder") mit beispielsweise folgenden Regeln:
  

  .imgborder { padding:2px; border:1px solid #ccc; }

• Dann im TinyMCE das betreffende Bild über den Button einfügen und KEINE (!) Einstellungen den Rahmen betreffend machen.
• Anschließend noch diesem Bild über "Format" die zuvor erstellte neue Klasse "imgborder" zuordnen.
• Da CSS ja laut Deinen Angaben kein Problem ist, brauchst Du zukünftig nur in der "basic.css" das gewünschte Aussehen dieses Rahmens festlegen.
• Fertig!

[xchs]

Kurzer Nachtrag:
Unter "Format" in Tiny erscheint übrigens nichts. Auch nicht die Klassen die ich für img erstellt habe.

Wird in Deinem (Standard-)Seitenlayout überhaupt ein Stylesheet "basic.css" eingebunden?

Ein Alternative zur vorhin genannten Lösung wäre noch, wenn Du die Klasse und die betreffenden Regeln in Deinem eigenen Stylesheet definierst und dann über den Button "Attribute einfügen/bearbeiten" dem Bild so die Klasse mitgibst. Allerdings ist dieser Weg nicht ganz so komfortabel wie erstgenannter, wo Du den Namen dieser Klasse direkt im "Format"-Feld auswählen kannst.

Viele Wege führen nach Rom...

[flexx]

Ja. Wie gesagt. Genau den Weg bin ich ja gegangen.
Gut ich habe die Klasse jetzt nicht imgborder genannt sonder img2 - Fakt ist aber, dass diese unter Format nicht erscheint.
Das ist ja das Problem.
Ändere ich die EInstellungen von img sorgt das für keine Änderung im endgültigen HTML Code.

basic.css ist eingebunden. Wo sollte Tiny sonst die Definitionen her haben?
Ansonsten funktioniert ja alles.

[pmmueller]

In TinyMCE kann man ja nun einstellen ob das eingefügte Bild einen Rahmen haben soll und wie dick dieser sein soll. Der Rahmen ist dann aber immer schwarz.

Die erste Frage wäre, ob die Bilder wirklich unbedingt im TinyMCE eingefügt werden müssen. Kann man den Text nicht auf verschiedene Inhaltselemente aufteilen, die jeweils ein Bild enthalten?

Dann kannst du das Bild mit "Ein Bild hinzufügen" einbauen. Die Platzierung ist dadurch viel einfacher und man kann dem Inhaltselement eine Klasse wie z. B. "bilderrahmen" mit geben und das Bild dann im CSS gestalten: #main div.bilderrahmen img { ... } .

Oder man sogar ein eigenes Inhaltselement für das Bild nehmen (.ce_image) und dem eine Klasse vergeben.

Aber auch im Tiny-Editor geht das mit dem grauen Rahmen:

Direkt stylen (ohne Klasse)
Wenn ich im Editor ein Bild einfüge und dann auf dem Register "Aussehen" einen Rahmen eingebe von sagen wir mal 2(px), dann steht bei mir (TL V2.8.3) direkt darunter im Feld "Format" border: 2px solid black;. Da kann man dann "black" einfach durch "#ccc" ersetzen. Wird im HTML als style-Attribut eingebunden. Da kann man vom Stylesheet aus nur mit !important drüber.

Zuweisen einer Klasse
Wie hier im Thread beschrieben mit basic.css. In Contao 2.9 gibt es in tl_files ein Stylesheet tinymce.css. Damit geht das Definieren der Klassen glaube ich auch, sogar per Theme, und man muss die Datei nicht im Seitenlayout einbinden.

Ich weiß (noch) nicht genau, wie sich das zur basic.css verhält, ob es das ersetzt oder ergänzt, aber die Idee, ein Extra-Stylesheet für den TinyMCE zu haben finde ich nicht schlecht.

[xchs]

In Contao 2.9 gibt es in tl_files ein Stylesheet tinymce.css. Damit geht das Definieren der Klassen glaube ich auch, sogar per Theme, und man muss die Datei nicht im Seitenlayout einbinden.

Aha, gut zu wissen! Die kannte ich noch nicht. Wird die dann auch (automatisch) im Frontend im HEAD mit eingebunden oder wie läuft das ab?
Wenn nämlich dieses Stylesheet "tinymce.css" nicht automatisch mitgeladen wird, frage ich mich, woher der Browser die Regeln für die Klassendefinition sonst holen soll...?

NACHTRAG:
Hab jetzt mal in die Datei reingeschaut und tatsächlich

The stlye sheet will be included in the editor and the page layout automatically.

[pmmueller]

Aha, gut zu wissen! Die kannte ich noch nicht.

Fraachmichnich wie, aber es geht.

Habe gerademal .bilderrahmen mit grauem 2px-Rahmen und 2px padding definiert, Im Dialogfeld gibt's im RC1 zum Einfügen des Bildes auf der Registerkarte "Aussehen" jetzt sogar ein Feld namens "CSS-Klasse", in der dann "bilderrahmen" zugewiesen werden kann. Richtig gut und komfortabel.

An flexx:
Ich hatte es schon öfter mal, dass Änderungen im TinyMCE erst nach dem Löschen des Browsercache durchgekommen sind.

[xchs]

Im Dialogfeld gibt's im RC1 zum Einfügen des Bildes auf der Registerkarte "Aussehen" jetzt sogar ein Feld namens "CSS-Klasse", in der dann "bilderrahmen" zugewiesen werden kann. Richtig gut und komfortabel.

Schau her, das wird ja immer besser! Danke für den Hinweis. Bis zur Version 2.8.3 konnte man nämlich - soweit ich weiß - im Reiter "Erweitert" nur eine CSS-ID vergeben (und das ist irgendwie nicht praktikabel, wenn die selbe Definition mehrmals auf der Seite gebraucht wird).

Gut, da man beginnend mit Contao 2.9 nun auch direkt in den Bildeigenschaften die Klasse zuweisen kann, dürfte das gegenständliche Problem wohl irgendwie zu lösen sein.

Wenn ich das recht sehe, dann haben wir hier im Thread mittlerweile schon 4-5 verschiedene Lösungen für das Problem von Flexx aufgezeigt. Damit dürfte das dann zu schaffen sein...

[pmmueller]

Schau her, das wird ja immer besser! Danke für den Hinweis.

Tja, ich hatte das mit CSS-Klasse vorher auch noch nicht wahrgenommen. Danke an flexx für die Fragen

Zu 2.9RC1:
Es gibt eine system\themes\tinymce.css, in der grundlegende Formatierungen für den Editor vorgenommen werden. Die können wohl in der tl_files\tinymce.css überschrieben werden.

Bei ersten Versuchen haben Anweisungen wie body#tinymce in der basic.css keinerlei Auswirkungen mehr. Demnach würde die basic.css keine Rolle mehr spielen. Diese Aussage ist aber ohne Gewähr. Kann das jemand bestätigen?

[pmmueller]

Sowie es aussieht, spielt die basic.css ab 2.9 tatsächlich nicht mehr mit:

V2.8.3 system/config/tinymce.php Zeile 77

content_css : "<?php echo TL_PATH; ?>/basic.css,
<?php echo TL_PATH; ?/system/themes/tinymce.css",

V2.9RC1 system/config/tinymce.php Zeile 79

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,
<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Irgendwie ist es so sauberer.

[xchs]

Also, wenn ich mir den Quelltext der Contao 2.9.RC1 Demo "Music Academy" anschaue, dann wird dort beispielsweise die im Seitenlayout eingebundene "basic.css" NACH der "tinymce.css" geladen. So gesehen, könnte man daher in der "basic.css" etwaige Regeln noch überschreiben...

NACHTRAG:
Wenn ich in der "basic.css" meine Klasse ".imgborder" definiere, wird sie zwar in das Stylesheet übernommen, allerdings taucht sie nicht im DropDown "Format" auf. Dort werden anscheinend nur die Klassen der "tinymce.css" gelistet.

[pmmueller]

So gesehen, könnte man daher in der "basic.css" etwaige Regeln noch überschreiben...

Siehe oben. Die basic.css wird in der Konfiguration für den TinyMCE anscheinend gar nicht mehr geladen.

[xchs]

Die "basic.css" wird dann wohl wegen der Kompatibilität noch mitgenommen und im Frontend mitgeladen, sodass etwaige dort definierte Klassen auch weiterhin noch zur Verfügung stehen...

[pmmueller]

Die "basic.css" wird dann wohl wegen der Kompatibilität noch mitgenommen und im Frontend mitgeladen, sodass etwaige dort definierte Klassen auch weiterhin noch zur Verfügung stehen...

Oder anders ausgedrückt: Die basic.css hat ihren Nebenjob als TinyMCE-Gestalter verloren und wird auf ihre eigentliche Bestimmung als Reset-Stylesheet fürs Frontend reduziert. Das meinte ich mit "sauberer"

UPDATE

Nix mit Arbeitsteilung. Gerade gemerkt, dass die tinymce.css nicht nur den Editor gestaltet, sondern auch das Layout. Steht auch in der Datei oben beschrieben:

"...will be included in the editor and the page layout automatically."

Wer liest ist eindeutig im Vorteil...

[flexx]

Au Weia. Da habe ich ja was angestossen.

Vielen Dank an pmmueller. Wir haben alle viel zu kompliziert gedacht.
natürlich kann man das von Hand im Register Aussehen von Tiny ändern.
Warum zur Hölle bin ich da nicht drauf gekommen?

Das ist schlicht und ergreifend die einfachste Lösung bis v2.9 stable rauskommt.
Solange kann ich damit leben.

Da macht es keinen Sinn sich einen Wolf zu cssen...

[xchs]

Da macht es keinen Sinn sich einen Wolf zu cssen...

Naja, Sinn würden die Lösungen mit einer eigenen Klasse schon machen. Insbesondere wenn es gilt, später mal Änderungen (Farbe, Abstände usw.) an diesem Rahmen vorzunehmen. Dies wäre ja gerade der Vorteil von CSS und einer Klasse...

Wenn Du diese Eigenschaften bei jedem Bild einzeln definierst, müsstest Du eine ev. zukünftige Anpassung dann auch bei all diesen Bildern manuell vornehmen...

Ich will Dir da aber nicht reinreden, mach es ruhig, wie Du es am besten / einfachsten für Dich empfindest!

[pmmueller]

Au Weia. Da habe ich ja was angestossen.

<grins>War einfach nur gutes Timing, denn ich hatte gestern gerade beim Buch schreiben das Kapitel über "Inhaltselemente" abgeschlossen und die Frage "basic.css vs. tinymce.css" sowieso die ganze Zeit im Hinterkopf. Deine Frage war nun der Anlass, dem mal etwas entschiedener nachzugehen. Und nebenbei habe ich noch einige nette Kleinigkeiten gefunden, nach denen ich gar nicht gesucht hatte</grins>