Umschaltblock im Wordpress text editor farbig machen

    Hallo,
    Im Textmodul des WP editors kann man eine Umschaltbox hinzufügen ([box]Text in Box[/box]
    Der Text dazwischen erscheint dann in einem Rahmen.
    Ich möchte nun dem ganzen Rahmen eine Farbe geben.
    Dies war mein Ansatz, der aber nur halb funktioniert:

    Code
    [box]
<div style="background-color: #0296d6; color: #0296d6; padding=5px;text-align: center;">
<h2>Über den Autor</h2>
[/box]

    color: --> macht gar nichts.
    background-color: --> erfasst nicht die ganze Box.

    Weiß jemand hier wie ich das anpassen kann? Müsste mit CSS doch gehen, oder?

    Gerne auch ein paar Zusatz-Tipps, wie man z.B. den Platz zwischen Text und Rand der Box verkleinert, so dass mehr Text in die Box passt. Momentan lässt er mir da zu viel Platz, so dass ich mit dem Text zu früh in eine zweite Zeile rutsche, was unnötig ist.
    Danke!

    VG
    Andi

    • Gerade eben
    • 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

    Dein div-Element ist vermutlich unnötig, vor allem aber hast du es nicht geschlossen.

    Nimm es mal raus, so dass du die Box wie gehabt im Browser sehen kannst.
    Schnapp dir ein Webentwickler-Tool und untersuche die Box, als was sie im Quelltext wirklich definiert ist: Welches Element? Welche Klasse? Und wie ist die Klasse in CSS bereits definiert? ([box] ist ja kein HTML, sondern einfach nur ein Shortcode, um eine Box einzubinden)
    Dann schreibst du deine veränderten und/oder ergänzten CSS-Definitionen in die Stylesheet-Datei deine Child-Themes oder in die Stylesheet-Datei, die dir von Theme oder einem entsprechenden PlugIn als custom Stylesheet zur Verfügung gestellt wird.

    Für Innenabstände ist das padding zuständig.
    Aber hier bitte etwas Eigeninitiative. Das ist pures CSS, die grundlegendsten Grundlagen – und hat nix mit WordPress zu tun (außer dass die meisten Menschen, die WordPress benutzen, auch CSS benutzen, um ihre Seiten nett aussehen zu lassen). Will sagen: das sprengt dann etwas den Rahmen eines WordPress-Forums. Es gibt aber wirklich sehr gute Seiten im Internet, die CSS sehr gut erklären. Such dir diejenige aus, mit der du am besten zurechtkommst.

    Gruß
    helix

    Wo hast du das denn eingetragen? Im Template? Wenn du dem Rahmen eine Farbe geben willst, musst du auch den Rahmen ansprechen und nicht die Box selbst ;)
    border-style: solid;
    border-color:[COLOR=#333333]#0296d6;

    Untersuch die Seite im Firefox mal mit Firebug, da kannst du direkt mit CSS rumspielen. Platz zwischen Text und Box verkleinern müsste über padding gehen.[/COLOR]

    Hi,
    ja, ich bin nicht gänzlich unbedarft mit CSS.
    Nur wenn man es länger nicht intensiv benutzt geht es zurück; das ist wie mit einer Fremdsprache.
    Auf meiner Site hatte ich das <div> übrigens schon abgeschlossen, ich hatte nur nachlässig hier hin kopiert.
    Es geht ja hier nicht um irgendein besonderes Theme oder eine "exotische" Box. Das ist die absolute Standard-Box, die mit dem Standard-Wordpress-Editor über das entsprechende Icon im visuellen Modus eingefügt wird (der erscheinende Tool-Tip sagt dann: "Einen Umschaltblock hinzufügen", Icon: mit so einem Pfeil nach oben und einem Pfeil nach unten).
    Daher bin ich davon ausgegangen, dass irgendjemand so eine Box schon mal für sich farbig gestellt hat.
    Okay, dass es sich hierbei auch um einen Shortcode handelt ist schon mal ein Hinweis.
    Zudem hatte mein Code schon "halbert" funktioniert - nur eben nicht über die komplette Box.

    Ich bin mir ziemlich sicher, dass das nicht schwierig ist und ich dafür nicht erst einen 10-tägigen CSS-Kurs machen muss, zumal mir CSS prinzipiell geläufig ist. Ich weiß momentan nur nicht, wo genau ich einhaken muss.
    Finde ich es heraus, werde ich es Euch hier hinterlassen.

    Danke dennoch.
    Schönen Gruß

    Einmal editiert, zuletzt von AndiD (3. September 2016 um 17:28)

    Hast du die genannten Lösungen denn schon ausprobiert? Da steht doch im Grunde schon alles drin, vor allem wenn du in CSS "nicht gänzlich unbedarft" bist...? Du klingst gerade etwa eingeschnappt und ich frage mich, wieso? :D

    Zitat von AndiD

    […] Es geht ja hier nicht um irgendein besonderes Theme oder eine "exotische" Box. Das ist die absolute Standard-Box, die mit dem Standard-Wordpress-Editor über das entsprechende Icon im visuellen Modus eingefügt wird (der erscheinende Tool-Tip sagt dann: "Einen Umschaltblock hinzufügen", Icon: mit so einem Pfeil nach oben und einem Pfeil nach unten).


    Schön.

    In meiner Testumgebung – aktuelles WordPress, Standardtheme Twenty Sixteen, keine PlugIns – erscheint so ein Icon im visuellen Editor nicht. Und wenn ich im Texteditor den Shortcode eingebe, wird mir der im Beitrag auch wieder genauso ausgegeben, also „box“ bzw. „/box“ in eckigen Klammern.

    Also vielleicht doch Theme oder PlugIn? Braucht ja weder besonders noch exotisch zu sein.

    Wo du den Punkt findest, wo du einhaken musst, habe ich dir schon geschrieben.
    Alternativ ist es nützlich, wenn du den Link zu deiner Seite postest.

    Ich habe nie etwas von 10-tägigem CSS-Kurs geschrieben.
    Ist es zuviel verlangt, in das Suchfeld einer Suchmaschine die Begriffe „css padding“ einzugeben?
    Oder eine Suchmaschine nach „Webentwickler-Tools“ zu fragen?

    Gruß
    helix

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden