Come per arrotondare gli angoli sul mio blog WordPress

August 6

Come per arrotondare gli angoli sul mio blog WordPress


Molti temi WordPress blog fanno uso di angoli arrotondati per impatto visivo. Fare angoli arrotondati in una pagina Web non è difficile, grazie alla proprietà "border-radius" in Cascading Style Sheets, o CSS. In WordPress, è possibile caricare il file principale del foglio di stile dal cruscotto e aggiungere regole di stile che rendono alcuni elementi della pagina arrotondati, come intestazioni, colonne, elementi del modulo o uno sfondo che si estende su più colonne. Valuta il tuo primo sito web e determinare quali elementi avrebbero cercato meglio con gli angoli arrotondati e modificare il foglio di stile di conseguenza.

istruzione

1 Indirizzare il browser Web nella directory "wp-admin" del vostro sito WordPress e accedere al cruscotto. Passare a "Aspetto" dal menu a sinistra. Fai clic su "Editor" sotto "Aspetto" per caricare la schermata "modificare i temi". Clicca sul link per il file "index.php" e ispezionare il codice che carica nell'editor. Load "header.php", se si desidera esaminare l'intestazione; caricare "footer.php" per esaminare il codice piè di pagina.

2 Trova i tag che creano gli elementi che si desidera restyling con angoli arrotondati, come ad esempio "div" tag "o sezione" intorno a colonne o tag di titolo di tutto il titolo del sito web. Prendere nota del nome della classe o l'ID assegnato a ciascun set di tag. Quando è possibile, prendere nota del nome della classe di più tag quando si vuole dare loro tutti gli angoli arrotondati, come un ID di classe viene applicata solo a un tag alla volta.

3 Caricare il file del foglio di stile "style.css" nell'editor tema. Costruire un selettore CSS per "selezionare" gli elementi che si desidera per lo stile con gli angoli arrotondati di entrambi i loro nomi d'identità o di classe. Utilizzare il prefisso hash segno di selezionare per ID e un prefisso dot per selezionare in base al nome della classe. Ecco alcuni esempi di entrambi i tipi di selettori:

.post {}

intestazione {}

4 Catena tuoi selettori se si pensa di dare tutti i tuoi angoli arrotondati lo stesso valore "border-radius". Utilizzare le virgole per separare i selettori e mettere ognuno su una riga, rispettando le linee guida WordPress per il codice CSS:

.inviare,

intestazione {}

5 Scrivi i tuoi coppie proprietà-valore tra le parentesi graffe dei vostri selettori. Arrotondare gli angoli utilizzando la proprietà "border-radius" e un valore impostato in pixel o percentuali. Ecco un esempio di come utilizzare la proprietà "border-radius":

.post {

border-radius: 10px;

}

Il codice di cui sopra dà ad ogni contenitore dopo un bordo-raggio di 10 pixel, creando angoli leggermente arrotondati.

Consigli e avvertenze

  • angoli arrotondati specifiche nel tuo blog modificando "border-radius" per "border-xy" dove "x" è superiore o inferiore e "y" è a sinistra oa destra.
  • Eseguire il backup dei file del tema prima di modificarli.

Articoli Correlati