WordPress das Search Widget designen

Lesedauer so 1 Min.
Lernzeit ein wenig mehr 2021-Dezember 2019-Juni Ditmar

Bild geschneidert von Wegerl. Puzzle-Vektorgrafik von krzysztof-m

Info echo

Ist der Classic-Editor schon zu kennen? –

“Advanced Editor Tools – ist so klasse!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit Advanced Editor Tools

“Advanced Editor Tools – ist das ausgezeichnete!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …

“Advanced Editor Tools – ist so sehr gut !”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

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

“Advanced Editor Tools – und tut sehr gut!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Advanced Editor Tools aktive Installationen: 2+ Millionen

“Advanced Editor Tools – ist so fabelhaft!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zur Lancierung

“Advanced Editor Tools – ist de luxe!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets

“Classic Widgets – sind so grandiose!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

“Advanced Editor Tools – ist so fein!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Bspw. könnt man das ‘Search 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

Search Widget 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.