Anpassen von WordPress-Widgets für abgerundete Ecken

Abgerundete Ecken sind in Webdesigns im gesamten Internet zu sehen. Dies ist ein einfacher Effekt, aber Sie fragen sich vielleicht, wie Sie ihn in einem WordPress-Blog anwenden können. Da Blogs „Themes“ verwenden - Vorlagen, die das Erscheinungsbild von WordPress steuern - müssen Sie das für Ihr Design verwendete Stylesheet bearbeiten. Zuvor müssen Sie jedoch auch den Klassennamen allen Widgets im Design zuweisen. Wenn Sie die Eigenschaft "border-radius" zu einer Stilregel hinzufügen, die auf die Widgets-Klasse abzielt, erhalten Sie diese abgerundeten Ecken.

1

Laden Sie Ihr Blog in einen Browser, z. B. Internet Explorer, und klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Browserfenster. Wählen Sie "Quelltext anzeigen", um den Quellcode für das Blog zu laden. Lesen Sie den Code so lange durch, bis Sie etwas mit einer ID oder einem Klassennamen sehen, das Widgets erwähnt:

  • Das obige Beispiel stammt von einem der beiden "offiziellen" WordPress-Themes "Twenty Ten".

    2

    Notieren Sie sich den Klassennamen, der für jedes Widget verwendet wird. In „Twenty Ten“ verwendet beispielsweise jedes Widget „Widget-Container“. Sie würden „widget_search“ nicht verwenden, da dies nur für das Widget „Suchen“ gilt.

    3.

    Melden Sie sich bei Ihrem WordPress-Blog an und klicken Sie in der Seitenleiste auf "Appearance", um das Untermenü "Appearance" zu erweitern. Gehen Sie zu „Editor“ unter „Appearance“, um den Bildschirm „Edit Themes“ zu laden.

    4

    Scrollen Sie im Code-Bearbeitungsfeld ganz nach unten. Schreiben Sie eine Stilregel für den Klassennamen, den Ihre Widgets verwenden:

    .widget-container {}

    5

    Fügen Sie die Eigenschaft "border-radius" innerhalb der geschweiften Klammern Ihrer Stilregel hinzu:

    .widget-container {border-radius: 10px; }

    Der Randradius ist ein Pixelwert oder ein Prozentwert, der den Rundungsbetrag darstellt, den Sie auf die Ecken eines Elements anwenden möchten. Das Element ist in diesem Fall das Widget.

    Warnungen

    • Wenn Sie Ihren Widgets keinen Rahmen oder eine Hintergrundfarbe hinzufügen, werden die abgerundeten Ecken nicht angezeigt.
    • Internet Explorer (IE) -Versionen 6 bis 9 unterstützen die Eigenschaft "border-radius" nicht. Lassen Sie die Ecken in diesen Browsern scharf, oder fügen Sie CSS3 PIE hinzu - ein Skript, das älteren IE-Versionen Unterstützung für CSS-Level-3-Eigenschaften hinzufügt - zum Code für das Design Ihres Blogs.
  •  

    Lassen Sie Ihren Kommentar