Textbox mit abgerundeten Ecken und Schatten möglich?

  • Hallo, ich würde gerne Textboxen mit abgerundeten Ecken und Schatten erstellen, wie es auch bei Bildboxen und Link-Boxen möglich ist. Geht das? Wenn ja wie?

    Danke schon mal und viele Grüße

    EBKS

    Danke und viele Grüße

    EBKS

    Ich nutze Zeta Producer 16.8.7.0 Business

  • Hallo,

    Ja das geht über Einstellung die CSS bearbeiten.

    Hier ein Beisbiel ist aber nicht für die Textbox:

    <style>


    .zp-form.zp14.autohidelabels .resizablefield.nolabel textarea {

    box-shadow: 6px 6px 6px grey;

    border-radius: 10px

    }

    .zp-form.zp14.autohidelabels .resizablefield input.typetext {

    box-shadow: 6px 6px 6px grey;

    border-radius: 10px;

    margin-bottom: 25px;

    }

    .zp-form.zp14.autohidelabels .resizablefield select{

    box-shadow: 6px 6px 6px grey;

    border-radius: 10px

    }

    .samson-schatten {

    box-shadow: 6px 6px 6px grey;


    }

    </style>

  • Hallo,

    Hier mal für Dich als Beisbiel:

    border: rgba(50, 50, 50, 0.2) solid 2px; border-radius: 10px;box-shadow: 2px 2px 10px rgba(3, 3, 3, 0.2), -2px -2px 10px rgba(255, 255, 255, 0.5);

  • Hinweis: Wenn Sie direkt Inline-CSS eingeben, dann müssen Sie im Feld "CSS-Klasse" nichts eingeben.

    Abgesehen davon werden CSS-Klassen ohne Anführungszeichen und führende punkte eingegeben.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo, vielen Dank für die Beispiele und Hinweise. Damit kann ich es für einzelne Textboxen umsetzen, wenn auch die Textabstände dann nicht mehr stimmen. Aber auch dafür wird es eine Lösung geben.

    Sehe ich es richtig, dass ich den Code nur im CSS-Code eintragen kann und kein Dialog existiert, der dem bei den Link- und Bildboxen entspricht?

    Kann ich das im Layout für die ganze Website übergreifend einstellen? Oder nur für konkrete Textboxen?

    Danke nochmal und viele Grüße

    EBKS

    Danke und viele Grüße

    EBKS

    Ich nutze Zeta Producer 16.8.7.0 Business

  • Das kannst Du auch für alle Texboxen einstellen.

    Das machst Du dann über Eistellung CSS.

    Mußt dann über den Browser untersuchen rausfinden wie die Textbox heist.

    Gruß

    Samson

  • Hallo EBKS,

    richtig, das Text-Widget hat keine Einstellmöglichkeiten wie bspw. die Linkboxen. Hier kann also nur eigenen CSS eingesetzt werden.

    Natürlich kannst Du die Einstellungen auch global vornehmen. Hier wäre es gut zu wissen, mit welchem Layout Du arbeitest. Ich habe gerade mit Clean Style experimentiert. Hier sähe das so aus:

    <style>

    #contentbox {

    border: solid 1px red; /* Rahmen: durchgehend, 1px stark, rot */

    border-radius: 30px; /* Eckenradius */

    box-shadow: 6px 6px 6px grey; /* Schatten, grau */

    padding: 25px; /* Innenabstand Rahmen-Text */

    }

    </style>

    Den Code trägst Du unter „Einstellungen“ > „CSS“ ein. In den Text-Widgets musst Du natürlich den bis dato genutzten Code entfernen.

    Alles was zwischen den schrägen Klammern steht, dient der Erläuterung und kann stehen bleiben. Du kannst „rot“ oder „grey“ natürlich auch durch einen Hex-Code ersetzen, bspw. #DB2A24.

    Mit „ … wenn auch die Textabstände dann nicht mehr stimmen.“ meinst Du vermutlich den Abstand Rahmen/Text. Das sollte sich mit obigem Padding lösen lassen.

    Viele Grüße

    Tom

Jetzt mitmachen!

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