Hvordan runde hjørnene på min WordPress blog

Mange WordPress bloggtemaer gjøre bruk av avrundede hjørner for visuell appell. Lage runde hjørner på en webside er ikke vanskelig, takket være "border-radius" eiendom i Cascading Style Sheets, eller CSS. I WordPress, kan du laste den viktigste stilark fil fra dashbordet og legge stil regler som gjør visse sideelementer avrundet, for eksempel overskrifter, kolonner, skjemaelementer eller en bakgrunn som strekker seg over flere kolonner. Evaluer ditt nettsted først og bestemme hvilke elementer ville se best med avrundede hjørner og redigere stilark tilsvarende.

Bruksanvisning

1 Direkte nettleseren til "wp-admin" katalog av din WordPress nettsted og logge på dashbordet. Naviger til "Utseende" fra menyen til venstre. Klikk "Editor" under "Utseende" for å laste "Rediger Temaer" skjerm. Klikk på linken til "index.php" fil og inspisere koden som laster i editor. Load "header.php" hvis du ønsker å undersøke overskriften; laste "footer.php" for å undersøke bunnteksten kode.

2 Finn kodene som skaper de elementene du ønsker å restyle med avrundede hjørner, for eksempel "div" eller "delen" koder rundt søyler eller overskriften koder rundt nettstedet tittel. Ta note av klassen eller ID-navnet som er tildelt hvert sett med koder. Når det er mulig, merk klasse navn av flere koder når du ønsker å gi dem alle avrundede hjørner, som en klasse ID bare brukes på én kode om gangen.

3 Last inn "style.css" style sheet fil i temaet editor. Bygg en CSS velgeren på "velg" de elementene du ønsker å style med avrundede hjørner av enten deres ID eller klasse navn. Bruk skigard prefiks for å velge etter ID og en prikk prefiks for å velge etter klassenavnet. Her er eksempler på begge typer velgere:

.post {}

header {}

4 Chain dine velgere hvis du har planer om å gi alle dine avrundede hjørner samme "border-radius" verdi. Bruk komma for å skille velgere og sette hver og en på sin egen linje, som samsvarer med WordPress retningslinjer for CSS-kode:

.stolpe,

header {}

5 Skriv din eiendom-verdi-par mellom klammeparentes av dine velgere. Rund hjørnene ved hjelp av "border-radius" eiendom og en verdi som ligger i enten piksler eller prosenter. Her er et eksempel på hvordan du bruker "border-radius" eiendom:

.post {

border-radius: 10px;

}

Koden ovenfor gir hvert innlegg beholder en border-radius på 10 piksler, noe som skaper subtilt avrundede hjørner.

Hint

• Round spesifikke hjørner i bloggen din ved å endre "border-radius" til "border-xy" der "x" er øverst eller nederst og "y" er venstre eller høyre.
• Sikkerhetskopiere tema filer før du redigerer dem.