Textschatten bzw. Kontur im Header

    Hallo Forum,

    Ich nutze das Layout Poster Responsive und habe im Header z.Zt. 8 Fotos mit einem Text eingebunden. Da die Fotos natürlich unterschiedliche Motive haben bzw. mal heller, mal dunkler sind ist der Text nicht optimal lesbar.

    Dank Codeschnipsel von Mario habe ich es hinbekommen, dass der Text eine Kontur bekommt, leider funktioniert dies aber nicht mit der Überschrift vom Header. Egal ob ich im Layout bei der "Kopfgrafik" die Einstellungen ändere oder im HTML-Code den h2-Tag mit der class=kontur setze ....

    Die Schriftfarbe kommt aus den Layout-Einstellungen, die Schattenfarbe aus dem CSS-Code ...

    Hier zwei Screenshots auf denen man hoffentlich erkennt, was ich meine:

       

    der Code, den ich unter Einstellungen - CSS eingefügt habe lautet:

    CSS
    <style>
/* Kontur-Textschatten (Header) */
.konturen {

text-shadow: 0 -2px #000000, 2px 0 #000000 , 0 2px #000000 , -3px 0 #000000 ;

}

</style>

    Ich kenne mich mit CSS nicht wirklich aus, daher kann ich nicht sagen, ob es einen "besseren" oder "einfacheren" Weg gibt .... :/

    Ich wünsche allen schon mal einen guten Start ins neue Jahr :S

    Viele Grüße

    Sven :/

    ------------------------------------------

    Zeta Producer 14.3.0 Business

    normalerweise kann man in den Layouteinstellungen Textschatten einstellen...

    Ich nutze den Zeta Producer 16.8.7 Premium - :evil: :thumbup:
    Ich meine es auch nicht böse :P

    Hallo nemessis,

    ja - damit hatte ich auch "experimentiert" - leider ist dieser zu schmal, um die Lesbarkeit zu verbessern ....

    Viele Grüße

    Sven :/

    ------------------------------------------

    Zeta Producer 14.3.0 Business

    Wie genau hast du den dem Header die CSS-Klasse "konturen" zugewiesen? Ich finde in diesem Layout im Header keine Möglichkeit außer direkt über den Quelltext.

    Du kannst deiner Klasse auch die H2 zuweisen. Hierzu die erste Zeile ".konturen {" erweitern in ".konturen, .konturen h2 {".

    Folgendes CSS würde sich auf alle Texte und Überschriften in allen Headern des Projektes auswirken.

    Code
    <style>
.flex-caption, .flex-caption h1, .flex-caption h2, .flex-caption h3 {
 text-shadow: 0 -2px #000000, 2px 0 #000000 , 0 2px #000000 , -3px 0 #000000 ;
}
</style>

    Hallo Mario,

    Zitat von Mario

    Wie genau hast du den dem Header die CSS-Klasse "konturen" zugewiesen? Ich finde in diesem Layout im Header keine Möglichkeit außer direkt über den Quelltext.

    Genau. beim Textfeld in der Header-Konfiguration rechte Maustaste - erweitert - HTML-Quelltext.

    Leider hat es nicht funktioniert - oder ich habe einen Fehler im Code. Hier ein Screenshot von dem Bild, wo man es am deutlichsten sieht. Oben die Überschrift aus dem entsprechenden Feld, unten dann mit dem h2-Tag im Quellcode:

    CSS unter "Einstellungen":

    CSS
    <style>
/* Kontur-Textschatten (Header) */

.konturen, .konturen h2 {

text-shadow: 0 -2px #000000, 2px 0 #000000 , 0 2px #000000 , -3px 0 #000000 ;

}

</style>

    HTML-Quelltext im Header-widget zu dem Bild:

    HTML
    <h2 class="konturen">Wohnmobil-Waschanlage</h2>
<p class="konturen"><strong>Bei Reisemobilen in allen Größen, kann man hier gut 
den Schmutz ablösen ....</strong> </p>
<p class="konturen">Nach einer "Vorwäsche" mit dem Hochdruckreiniger wird die 
Anlage "von Hand" gefahren, da jedes Wohnmobil mit Aufbauten etc. 
unterschiedlich ist.</p>

    Vielen Dank schonmal

    Viele Grüße

    Sven :/

    ------------------------------------------

    Zeta Producer 14.3.0 Business

    Hm sollte alles richtig sein. Keine Ahnung warum das nicht funktioniert.:/

    Aber wenn du das eh nicht global nutzen willst und sowieso direkt ins HTML musst kannst du das auch direkt mit Inline-CSS umsetzen.

    Das alte CSS löschen und dann im Header folgendes HTML einfügen.

    Code
    <h2 style="text-shadow: 0 -2px #000000, 2px 0 #000000 , 0 2px #000000 , -3px 0 #000000">Wohnmobil-Waschanlage</h2>
<p style="text-shadow: 0 -2px #000000, 2px 0 #000000 , 0 2px #000000 , -3px 0 #000000"><strong>Bei Reisemobilen in allen Größen, kann man hier gut den Schmutz ablösen ....</strong> </p>
<p style="text-shadow: 0 -2px #000000, 2px 0 #000000 , 0 2px #000000 , -3px 0 #000000">Nach einer "Vorwäsche" mit dem Hochdruckreiniger wird die Anlage "von Hand" gefahren, da jedes Wohnmobil mit Aufbauten etc. unterschiedlich ist.</p>

    Alternativ dazu kannst du auch dein CSS nutzen indem das in einen DIV packst.

    Deinen Text und Überschriften normal im Textfenster schreiben. Anschließend auf HTML umschalten. Nun dem ganzen folgendes Voran setzen <div class="konturen"> Und dann ganz am Ende den DIV mit mit </div> abschließen.

    Sollte dann so aussehen:

    Code
    <div class="konturen">
<h2>Wohnmobil-Waschanlage</h2>
<p><strong>Bei Reisemobilen in allen Größen, kann man hier gut den Schmutz ablösen ....</strong> </p>
<p>Nach einer "Vorwäsche" mit dem Hochdruckreiniger wird die Anlage "von Hand" gefahren, da jedes Wohnmobil mit Aufbauten etc. unterschiedlich ist.</p>
</div>

    Hallo Mario ,

    erst einmal ein gesundes und erfolgreiches Jahr für Dich.

    Und ich nehm die "div-Variante" - funktioniert prima. :thumbup: :thumbup:Ist etwas übersichtlicher und bei z.Zt. 8 Bilder im Header auch einfacher - und es könnten noch welche hinzukommen.

    Vielen Dank für Deine Unterstützung. :thumbup:

    Viele Grüße

    Sven :/

    ------------------------------------------

    Zeta Producer 14.3.0 Business

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden