Macht aus einem Textfeld eine Sprechblase mit Pfeil Links. Dieses Snippet kommt zweiteilig, einmal für Desktop und einmal für Mobile Endgeräte. Ursprünglich war dieses Snippet als Sprechblasen-Box für PS-Voting Shortcodes konzipiert, doch mit etwas Anpassung sind der Kreativität keine Grenzen gesetzt.

Du kannst diese Zeilen löschen wenn Du im Textfeld nicht den PS-Voting-Shortcode nutzt:

/* Behebt Konflikt mit Voting-Shortcode falls inkl. */
.wdpv_clear {
clear: none;
}

.plain-text-container {
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 200px; <-Passe hier bei Bedarf die Höhe an
margin: 20px;
max-width: 45%; <-Passe hier bei Bedarf die Breite an
list-style: none;
}

Das Untere Snippet „uf-textfeld-sprechblase-links-mobile“ ist für den Responsive-Modus zur Ergänzung. Ich lege dazu zB. zwei Klassen an: Desktop: „Sprechblase“ und „Sprechblase_mobile“ und füge den CSS-Code entsprechend zu.

DerN3rd (13)

Lese mehr vom selben Autor:

• UpFront Fullwidth
• UfMaterial Theme Style-Guide
• UpFront Burger Menü Material CSS
• UpFront Archivseite Grid Material
• Spirit Theme Style Guide