Come Centro intestazioni in CSS su WordPress

May 1

Come Centro intestazioni in CSS su WordPress


Il file header.php di un tema WordPress contiene il codice che del tema. Come minimo, questo codice comprende sia HTML e programmazione PHP. Cascading Style Sheet (CSS) del codice --- solitamente si trova nel file style.css --- controlla l'aspetto e il posizionamento del contenuto dell'intestazione. È necessario modificare il codice foglio di stile per centrare un colpo di testa in WordPress. Impostare i margini automatici per l'intestazione in CSS per rendere il browser calcolare una posizione centrata.

istruzione

1 Aprire il browser e caricare la cartella wp-admin del tuo sito web WordPress. Inserisci il tuo nome utente e la password per accedere al cruscotto.

2 Passare a "Editor" sotto "Aspetto" per caricare la schermata "Modifica Themes". Caricare il file di modello header.php per casella Editor facendo clic sul suo collegamento sotto il titolo "Modelli".

3 Individuare il set di tag involucro intorno alla vostra intestazione. A seconda del tema e lo standard di HTML utilizzato, si potrebbe trovare "<div>", "<header>" o "<section>" tag. Trovare l'ID assegnato al tag confezione:

<Div id = "myHeader">

Header Content qui ...

</ Div>

Nell'esempio di cui sopra, "myHeader" è l'ID che vi serve.

4 Carico style.css nell'editor facendo clic sul link in fondo alla lista dei file di modello. Trova il selettore che gli obiettivi l'intestazione. Ecco un esempio utilizzando il "myHeader" ID:

myHeader {

fondo: URL (path / to / image.png) centro no-repeat;

width: 960px;

height: 200px;

}

5 Aggiungere il seguente codice CSS tra le parentesi graffe per il selettore "#myheader":

margin-left: auto;

margin-right: auto;

Fare clic sul pulsante blu "Update File" per salvare il lavoro.

Consigli e avvertenze

  • È necessario impostare una larghezza per il colpo di testa a centrare correttamente. Impostare la larghezza di un valore percentuale, se non si desidera utilizzare una larghezza statico per il colpo di testa.
  • Il metodo di centraggio di cui sopra non funziona in Internet Explorer 6. Avvolgere l'intestazione di una nuova serie di "<div>" tag con un ID e impostare la proprietà "text-align" in CSS per "centro" per sostenere quel browser.