titelbild_widget-suche4

Search Widget designen

Bild geschneidert von Wegerl. Puzzle-Vektorgrafik von krzysztof-m
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend

Bspw. könnt man das 'Suche Widget' durch das Design hervorheben. Dies ist alleinig über CSS zu bewerkstelligen. Hierzu ist es gar nicht so einfach, die Schablonen zu finden. Folglich sind paar Hinweise zu nützen.

WordPress Search Widget – How to Style It.

Stil von Such- und Abonnementformularen ändern.

CSS Deckkraft / Transparenz

Widget-Suche Design

/* --- Widget-Suche Design --- */
.widget_search { position:relative; background: url("https://..puzzle-suche-pro2.svg") top left no-repeat; margin-bottom: 0px; height:175px; width:auto;
}

/* Des Such-Felds die Höhe */
.widget .search-field {height: 45px;
}

/* Such-Feld Fontsize und Transparenz */
.widget_search form input[type="search"]{font-size: 20px; opacity: 0.5;
/*filter: alpha(opacity=50);*/
}

Anmerkung: Den Widgets ergeht eine Schrifteinrückung nicht mit Leerzeichen, doch mit   . Diese sind zwar nach dem Abspeichern des Widgets verschwunden und dennoch bleiben die Leerzeichen visuell.

… Und wie ist dein Erfolg des Beitrags?