Trick # 278 | Dieser Beitrag beinhaltet 736 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Unter WordPress lassen sich Seiten und Beiträge passwortgeschützt veröffentlichen. Wird dann der Inhalt aufgerufen, erscheint zunächst eine Passwortabfrage, welche im Divi-Theme aber reichlich karg daher kommt. Sie lässt sich indes mit einfachen Mitteln verschönern. Hier erfahren Sie, wie das geht.
Mehr individuelle Style können Sie dem Formular mit folgendem Code beibringen. Diesen können Sie in das CSS-Stylesheet Ihrer Website kopieren – im Backend unter Design/Customizer/Zusätzliches CSS:
.post-password-required .et_password_protected_form {
width: 50%;
margin: 0 auto;
margin-top: 25vh;
margin-bottom: 25vh;
background: #fff; /* Hintergrundfarbe */
padding: 60px 40px 80px 50px;
border-top: 6px solid #293280;
border-radius: 5px;
box-shadow: 0 30px 50px -6px rgba(64, 65,72,.2);
}
.et_password_protected_form p input {
background: #59b14b33; /* Hintergrund Passworteingabe */
color: #fff;
border-radius: 3px!important;
border: 1px solid #293280!important; /* Rand Passworteingabe */
box-shadow: 10px 10px 10px -6px rgba(64, 65,72,.3);
margin: 30px 30px;
}
.et_password_protected_form > p {
color: #000000; /* Schriftfarbe */
}
.et_password_protected_form .et_submit_button {
color: #fff!important; /* Button Schriftfarbe */
font-family: "Montserrat"!important;
border-width: 0px!important;
border-radius: 26px;
letter-spacing: 1px;
font-size: 13px;
font-weight: 800!important;
background-color: #293280; /* Button Hintergrundfarbe */
padding-top: 15px!important;
padding-bottom: 15px;
padding-left: 30px!important;
padding-right: 30px;
}
.et_password_protected_form .et_submit_button {
display: block;
float: right;
margin: 8px auto 0;
font-family: inherit;
cursor: pointer;
}
.et_pb_button:hover:after {
opacity: 0;
}
.et_password_protected_form .et_submit_button:hover {
background-color: #59B14B; /* Button Hintergrundfarbe Hover */
color: #fff!important; /* Button Schriftfarbe Hover */
font-family: "Montserrat"!important;
border-width: 0px!important;
border-radius: 26px;
letter-spacing: 1px;
font-weight: 800!important;
padding-top: 15px!important;
padding-bottom: 15px;
padding-left: 30px!important;
padding-right: 30px;
}
Werbung
Hin und wieder trifft Divi das Ankerziel nur so halbwegs und scrollt nicht ganz an die richtige Stelle der Webseite. Falls dies bei Ihrer WordPress-Site auch der Fall ist, empfehlen wir Ihnen diesen kleinen CSS-Hack.
WordPress liefert ein Widget mit, um Beiträge in der Seitenleiste anzuzeigen. Wer jedoch das Divi-Theme benutzt und stattdessen die Projects auflisten lassen möchte, sucht vergebens. Die Projects lassen sich jedoch fast ebenso einfach ...
Je länger Sie am CSS-Stylesheet arbeiten, je besser und individueller Ihre Website ausschaut - eines Tages wird möglicherweise alles wieder auf die Standardwerte des Divi-Themes gesetzt sein. Und Sie werden nicht begreifen, was geschehen ist. ...
Ihr Website-Content lässt sich mit ein bisschen CSS-Code auch mehrspaltig darstellen. Das ergibt dann das Look & Feel einer gedruckten Zeitung oder Zeitschrift.
Keine Inhalte gefunden.




