Search Widget designen

Vektorgrafik individuell von 'wegerl' mit Plazet vom Bildautor, krzysztof-m

Bspw. ist hier das 'Suche Widget' durch das Design hervorgehoben. Dies ist alleinig über CSS bewerkstelligt. Hierzu ist es gar nicht so einfach, die Schablonen zu finden. Folglich sind paar Hinweise zu nützen, aus denen das Beispiel auf dieser Website hervorgeht. 

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://wegerl.at/wp-content/uploads/2019/06/puzzle-suche-pro2.svg") top left no-repeat; margin-bottom: 0px; height:175px; width:auto;
}

/* Such-Feld 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: Widgets ergeht eine Schrifteinrückung nicht mit Leerzeichen, aber mit  &nbsp. Diese sind zwar nach dem Abspeichern des Widgets verschwunden und dennoch bleiben die Leerzeichen visuell.

Das SVG ist mit Größe 700 px mal 400 px abgespeichert.

War der Beitrag hilfreich?