CSS im WYSIWYG-Editor

  • Guten Abend zusammen!

    Ich bereite Worpress als CMS für einen Kunden vor; der kennt sich mit HTML nicht aus und wird nur den WYSYWIG-Editor benutzen. Es gibt ja die erweiterte Symbolleiste, und dort kann man über eine Dropdownliste Absatzformate auswählen: Absatz, Adresse, Monospace usw. Wie hängen die mit dem CSS zusammen? Kann ich jedem dieser Formate eine CSS-Definition zuordnen und wenn ja wie heißen sie (z.B. "Überschrift 1" entspricht "h1")? Oder sind das festgelegte Formate, die sich über CSS nicht steuern lassen?

    Vielen Dank für jeden Tip!

    Einmal editiert, zuletzt von Frau_Braun (10. Juni 2008 um 22:42)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ich glaub das ist Theme abhängig. Du hast ja eine php in der der Post aufruf steht single.php meistens. Da stehen alle formationen. die du dann in der CSS einfach formatierst.bei mir steht für das datum zB

    PHP
    <?php the_date('d. F Y', '<h1 class="date">', '</h1>') ?>


    und in der CSS ist dann das date h1 formatiert. schau dir also die single.php an

    Denke ich wenn ich falsch liege belehrt mich eines besseren

    Wie es ist,bleibt es nicht .

  • Ich habe keine single.php geschrieben. Dort kann ich das also anlegen? Muss ich mir mal anschauen.

    Ich möchte jedenfalls gern das Formatmenü im WYSIWYG-Editor nutzen können, um bestimmte CSS-Formate zuweisen zu können. Z.B. könnte ich dann eine der Überschriften so formatieren, dass ich sie als eigenes Format für Bildunterschriften verwenden kann usw. Denn es ist ja wohl nicht möglich, dass ich eine Definition "Bildunterschrift" als eigenen Punkt in diese Dropdownliste aufnehme (wie das z.B. im WYSYWIG-Editor von Joomla möglich ist).

  • Ich habe keine single.php geschrieben. Dort kann ich das also anlegen? Muss ich mir mal anschauen.

    Ich möchte jedenfalls gern das Formatmenü im WYSIWYG-Editor nutzen können, um bestimmte CSS-Formate zuweisen zu können. Z.B. könnte ich dann eine der Überschriften so formatieren, dass ich sie als eigenes Format für Bildunterschriften verwenden kann usw. Denn es ist ja wohl nicht möglich, dass ich eine Definition "Bildunterschrift" als eigenen Punkt in diese Dropdownliste aufnehme (wie das z.B. im WYSYWIG-Editor von Joomla möglich ist).

    Du suchst sicher so was hier: http://forum.wordpress-deutschland.org/attachments/al…nyextension.jpg

    Das ist Bestandteil meines Themes, könnte ich aber als kleines Plugin extrahieren. Es wird eine selbstgeschriebene Stylesheet Datei innerhalb des Visuellen Editor benutzt, die auch im Blog zusätzlich geladen wird. Somit werden z.B: <ul> <li> schon mal so formatiert wie es muß und man kann über die dropdown Liste <p> so formatieren wie man will (kann man auch auf anderes anwenden wie <img> ).

    Meintest du das so etwa ?

  • Guten Morgen, codestyling,

    ja, das sieht genau so aus wie das, was ich suche, perfekt!
    Wenn Du mir behilflich sein würdest?

    Großer Blumenstrauß!

    Frau Braun

    Einmal editiert, zuletzt von Frau_Braun (11. Juni 2008 um 10:58)

  • Guten Morgen, codestyling,

    ja, das sieht genau so aus wie das, was ich suche, perfekt!
    Wenn Du mir behilflich sein würdest?

    Großer Blumenstrauß!

    Frau Braun

    Hab das mal schnell als Mini-Plugin samt einem Artikel bereitgestellt: Code Styling Project » TinyMCE - Schreiben mit Theme basiertem Stylesheet

    Feedback ist erwünscht und Kritik ist erlaubt :mrgreen:

  • Aha, gut, ich habe jetzt nur die Formate reingenommen, die auch tatsächlich benutzt werden. Verdana, also die Schrift, die jetzt bei mir im WYSYWIG-Editor zu sehen ist, benutze ich aber gar nicht...

    Außerdem habe ich zwar "klappt!" gerufen, und im Editor sieht man auch was, aber nicht im im Ergebnis. Hmm.

  • Wenn du Styles in dieser Datei definierst aber nicht in deinem style.css deines Themes, dann wird auch im Blog nix anders angezeigt.

    Ich hab meinen Artikel erweitert deswegen. Entweder du führst die Styles auch noch mal in deiner style.css auf, die dein Theme hat oder du importierts das neue Stylesheet am Ende der style.css:

    Code
    [I]@import “tinymce_blog_themed.css”;[/I]
  • Wo kommt das hin? Direkt in die style.css, hinter die letzte Definition? Jetzt sind einige der Formate verloren gegangen. Ich kann mir das nicht erklären.

    Sind eigentlich auch Überschriften (h1, h2) erlaubt? Ich sehe im Wordpress-HTML nur, dass der Text von <p>-Tags umgeben wird.

    Wenn man übrigens den Namen der tinymce_blog_themed.css ändern möchte, muss man das wohl auch im Plugin-Editor ändern, richtig?

    Entschuldige, dass ich so hartnäckig nachfrage.

  • Kein Problem.

    Also, alles was TinyMCE macht ist, den markierten oder aber Bereich (wenn nicht markiert ist) die entsprechend ausgewählte Klasse zu geben. Wenn du also eine Überschrift (was ein <h1> ist) zuerst formatierts und dann zum Beispiel important anklickst, bleibt es ein h1 nur eben mit
    <h1 class="important"> ... </h1>

    Wenn du es am Ende der style.css einbindest, überschreibt es die bereits enthaltenen Styles oben drüber mit den Definitionen, die du importierts.
    Wenn du es am Anfang einbindest, werden Definitionen aus der Datei mit denen aus dem style.css überschrieben.

    Du solltest dir eine geeignete Trennung überlegen, wie du das am besten machst.

    Die Konstante kannst du im Texteditor ändern und hochladen oder im Plugineditor ganz nach Belieben.

  • Aja, man muss erst die Überschrift zuweisen und dann die Klasse. Das gleiche kann man mit Listen machen: Erst als Liste anlegen, dann eignes Listenformat zuweisen.

    1000 Dank erstmal, das ist schon mal ziemlich gut alles. Ein paar Dinge habe ich noch nicht gelöst, ich muss aber für heute Schluss machen. Darf mich hier noch mal melden, wenn die Tüftelei nicht hilft?

    Einmal editiert, zuletzt von Frau_Braun (24. Juni 2008 um 13:08)

  • Hallo Codestyling!

    Ich benutze auch Dein Plugin - Vielen Dank!
    Im Editor funktioniert alles wunderbar aber auf dem Blog kommt "nix an" - trotz Deines Hinweis:

    Code
    [I]@import “tinymce_blog_themed.css”;[/I]

    Ich habe auch schon versucht, alles was ich im tinymce_blog_themed.css angegeben habe auch im style.css reinzuschreiben. Ohne sichtbaren Erfolg, bzw. kommt nur ein Teil der Einstellungen an... Das hat doch bestimmt irgendetwas damit zu tun, dass die beiden stylesheets gegeneinander arbeiten, oder???

    Was mache ich falsch?

    Freue mich über Hilfe!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!