Hvordan lage en gradientbakgrunn i WordPress

Cascading Style Sheet Webdesignkode inkluderer et gradientalternativ, slik at du kan legge til CSS-bare gradientbakgrunner til WordPress-nettstedene dine uten behov for skivede bilder. I WordPress kan du ikke bruke gradienten til body-taggen slik du ville gjort for solid bakgrunn, men du kan bruke en div-container som brytes rundt hele nettstedet. Mange temaer bygget på CSS-rammer inkluderer allerede en slik div, selv om du kan legge til en hvis temaet ikke gjør det.

Trinn 1

Gå til wp-admin katalogen til nettstedet ditt og logg på WordPress-dashbordet. Navigere til Utseende og klikk på Redaktør lenke. Klikk på lenken til header.php under Mal-overskriften for å laste inn HTML-filen som inneholder kroppskoden til nettstedet ditt.

Steg 2

Se etter en div med ID "container" rett under body-taggen i header.php-filen. Hvis du ikke finner en, legg til en. Slik ser det ut:

Lagre filen ved å klikke på den blå knappen ** Oppdater fil **. Hvis du la til en div, laster du inn ** footer.php ** i redigeringsprogrammet og legger til **

rett over ** for å lukke div.

Trinn 3

Laste style.css i redaktøren. Legg til denne koden helt nederst i filen:

container {

bakgrunnsfarge: # 038394; bakgrunnsbilde: lineær gradient (topp, # 038394, # 00CCCC); bakgrunnsbilde: -webkit-lineær-gradient (topp, # 038394, # 00CCCC); bakgrunnsbilde: -moz-lineær-gradient (topp, # 038394, # 00CCCC); }

Ovennevnte kode setter en reserve for nettlesere som ikke støtter graderinger. Hvis du setter "bakgrunnsbilde" til "lineær gradering", skapes gradientbakgrunnen. I det minste må du sette en retning for stigningen å starte på og deretter to farger som falmer inn i hverandre. Legg til den kodelinjen igjen to ganger, og legg til Webkit og Mozilla prefikser for Chrome, Safari og Firefox nettlesere.

Klikk på det blå Oppdater fil -knappen for å lagre style.css-filen. Gradientbakgrunnen din vises nå på hver side på WordPress-nettstedet ditt.