Wie kann man einen Textartikel mit einem Rahmen und einer Hintergrundfarbe versehen?

    hallo forum, hallo zeta team,
    Wie kann man einen Textartikel (Standard oder Zweispaltig) mit einem Rahmen und einer Hintergrundfarbe versehen?

    gibt es da möglichkeiten? wäre super wenn ihr da etwas zur graphischen aufwertung hättet.
    gruss

    wolfgang

    Dazu musst Du in die Quelltext-Ansicht des Artikels wechseln und das HTML/CSS anpassen. Über den Artikel-Editor ist das so nicht möglich.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

    guten morgen steffen,
    vielen dank für deine antwort, freut mich das es geht, nur wie macht man das? die üblichen anleitungen die man so findet sind ja immer auf eine webseite bezogen und nicht auf einen artikel im cms....oder ist das bei einem artikel genau das gleiche, also das übliche prozedere mit html->body......body->html?

    kannst du mir das kurz beschreiben, also mit befehlssytax (grobe struktur) sprich für dumme.....

    gruss

    wolfgang

    Hallo Wolfgang,

    da fügst Du einfach ein DIV-Tag und etwas Inline-CSS ein. Also beispielsweise so:

    <div style="background-color:#0000FF; border-width:1px; border-style:solid; border-color:#000000;">
    <p>Deine bereits bestehender Code...</p>
    </div>

    Hintergrundfarbe: Blau
    Rahmen: Schwarz

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

    hallo sparenlohnsich,
    danke für den tipp....wieder was gelernt, eine bitte, wärst du so nett, das mal für uns so nicht so versierte an einem beispiel zu erklären, also mit entsprechender befehlssyntax....also so wie es der jochen immer macht, einfach ausführlich....vorteil, man kann sich ne menge ausprobiererei ersparen und auch die rückfragen halten sich in grenzen, wäre super wenn du ein bisschen zeit dafür findest.....

    mit externe css meinst du die styles.css oder?

    gruss
    wolfgang

    Hallo,

    Du hast recht. Mit einem Beispiel ist es immer besser zu erklären und zu verstehen.

    In die style.css z.B. das hier schreiben:

    div.contentBox {
    border: 1px solid #E1E1E1;
    background-repeat: repeat-y;
    font-size: 12px;
    line-height: 18px;
    padding: 10px 10px 10px 10px;
    }

    div.contentBox= der Name des DIV. Für contentBox kann also ein eigener Name verwendet werden
    border: 1px solid #E1E1E1 = border ist der Rahmen, hier 1 Pixel dick / #E1E1E1 ist die Farbe / Farbgeneratoren gibt es im Internet oder auch mal nach SI ColorPicker schauen
    background-repeat: repeat-y = beschreibt den Background Hintergrund Wiederholung. Es kann auch ein Bild oder Farbe definiert werden
    font-size: 12px = ist die Schriftgröße / die Schriftart ist hier die gleiche wie das in Zeta Layout eingestellt wurde
    line-height: 18px = ist die Zeilenhöhe, hier 18 Pixel
    padding: 10px 10px 10px 10px = Abstand des Inhaltes zum DIV-Rand / oben, rechts, unten, links

    Den Artikel in Zeta anlegen. Dann zur HTML-Ansicht wechseln und vor dem Text dies einfügen:

    <div class="contentBox">

    Nach dem Text dies eingeben:

    </div>

    So wird ein um den Text dann ein grauer Rahmen (nach o.g. Beispiel) angezeigt und der Text zum Rahmen hat einen Abstand zu allen Seiten von 10 Pixel.

    Bitte folgendes beachten:
    Vorher eine Kopie der Original Style.css machen. Mit einer zweiten Kopie kann dann gearbeitet werden. Die Style.css dann per FTP hochladen (soltte standarmäßig im "_media" Ordner liegen). Wenn ein Projekt komplett erstellt und veröffentlicht wurde, immer danach die eigene style.css hochladen.

    guten morgen in die runde, guten morgen sparenlohntsich,

    absolut super, besser geht es nicht, vielen vielen dank....freue mich schon auf die umsetzung

    by the way, habe da noch mal ne frage im speziellen...

    ich benutze ja das layout cars und dieses hat ein newsbox padding von : 8px 5px 8px 10px;

    wenn also z.B ein hintergrund anders eingefärbt werden soll (rot) wird ja nur der artikel(text) bereich eingefäbt....in meinem fall ist der newsbereich allgemein dunkel....

    ergebnis ist also ein schmaler dunkler bereich um den roten (text)breich (kann ich gut mit leben)....nur grundsätzlich für andere fälle, kann man das vielleicht irgendwie umgehen, gibts es bspw. ein negatives padding, um den roten bereich größer zu machen und so den dunklen bereich zu überdecken?


    gruss

    wolfgang

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden