Zum Abrunden der Ecken auf meinem WordPress-Blog

March 30

Zum Abrunden der Ecken auf meinem WordPress-Blog

Viele WordPress-Blog-Themen machen Verwendung von abgerundeten Ecken zur visuellen Reiz. Runde Ecken auf einer Webseite zu machen ist nicht schwer, dank der Eigenschaft "Border-Radius" Cascading Style Sheets oder CSS. In WordPress können Sie die wichtigsten Stylesheet-Datei aus Ihrem Dashboard laden und Stilregeln, die bestimmte Seitenelemente gerundet wie Überschriften, Spalten, Formularelemente oder einem Hintergrund, der mehrere Spalten umfasst, machen hinzufügen. Bewerten Sie zuerst Ihre Website und bestimmen Sie, welche Elemente mit abgerundeten Ecken am besten aussehen würde, und bearbeiten Sie entsprechend Ihrem Stylesheet.

Anweisungen

1 Direkt von Ihrem Webbrowser in das Verzeichnis "wp-Admin" Ihrer WordPress-Website, und melden Sie sich auf dem Armaturenbrett. Navigieren Sie zu "Darstellung" aus dem Menü auf der linken Seite. Klicken Sie auf "Editor" unter "Darstellung", um den Bildschirm "Themen bearbeiten" zu laden. Klicken Sie auf den Link zu Ihrer Datei "index.php" und überprüfen Sie den Code, der in den Editor geladen wird. Laden Sie "header.php", wenn Sie den Header untersuchen möchten; Laden "footer.php" Footer-Code untersuchen.

2 Tags, die Elemente zu erstellen, die Sie Restyle mit abgerundeten Ecken, z. B. "Div" oder "Abschnitt" Tags um Spalten oder Überschriften-Tags, um die Website-Titel möchten zu finden. Beachten Sie die Klasse oder ID-Name jeder Satz von Tags zugewiesen. Wenn möglich, den Klassennamen des mehrere Tags Hinweis, wenn Sie möchten ihnen allen abgerundete Ecken geben, wie eine Klassen-ID zu einem Zeitpunkt nur einen Tag angewendet wird.

3 Die "style.css" Stylesheet-Datei in das Thema Editor zu laden. Bauen Sie einen CSS-Selektor, um "die Elemente, die Sie Stil mit abgerundeten Ecken durch ihre ID oder Klasse Namen möchten auswählen". Verwenden Sie das Hash-Zeichen-Präfix nach ID und einem Dot-Präfix durch Klassennamen auswählen auswählen. Hier finden Beispiele für beide Arten von Selektoren:

.Post {}

Header {} 4 Verketten Sie Ihre Selektoren, wenn Sie planen, geben alle Ihre abgerundeten Ecken den gleichen "Border-Radius"-Wert. Verwenden Sie Kommas, um die Selektoren trennen und jeweils in einer eigenen Zeile, die WordPress-Leitlinien für CSS-Code passend zu setzen:

.Post,

Header {} 5 Schreiben Sie Ihre Eigenschaft-Wert-Paare zwischen den geschweiften Klammern Ihre Selektoren. Abrunden der Ecken legen Sie mithilfe der Eigenschaft "Border-Radius" und einen Wert in Pixel oder in Prozent. Hier ist ein Beispiel für die "Border-Radius"-Eigenschaft veranschaulicht:

.Post {}

border-radius: 10px;

}

Der obige Code gibt jeder Post-Container einen Grenze-Radius von 10 Pixeln, dezent abgerundete Ecken erstellen.

Tipps & Warnungen

  • Runde bestimmte Ecken in Ihrem Blog "Border-Radius" in "Grenze-X-y" wobei "X" oben oder unten und "y" ist zu ändern ist nach links oder rechts.
  • Sichern Sie Ihre Design-Dateien vor der Bearbeitung.