Hvordan lage en Wordpress Gradient Bakgrunn

Hvordan lage en Wordpress Gradient Bakgrunn


Fordi Cascading Style Sheet, eller CSS, inneholder kode gradienter, kan du legge CSS-bare gradient bakgrunn til nettsteder uten behov for skiver bilder. I Wordpress, kan du legge til CSS gradient bakgrunn til din style.css fil. Du kan ikke bruke gradient til kroppen tag som du gjør for solid bakgrunn, men du kan bruke en div som brytes rundt hele nettstedet. Mange temaer bygget på CSS rammeverk inkluderer allerede et slikt div, men du kan legge til en hvis temaet ikke.

Bruksanvisning

1 Gå til "wp-admin" katalog av nettstedet ditt og logge deg på Wordpress dashbordet. Naviger til "Utseende" og klikk på "Editor" linken. Klikk på linken til "header.php" under "Maler" overskriften for å laste HTML-fil som inneholder nettstedets body-koden.

2 Se etter en div med en ID på "container" rett under kroppen koden i "header.php" fil. Hvis du ikke finner en, legg en. Her er hva det skal se slik ut:

<Div id = "container">

Lagre filen ved å klikke på den blå "Update File" -knappen. Hvis du har lagt en div, last "footer.php" i editoren og legge til "</ div>" rett over "</ body>" for å lukke div.

3 Last "style.css" i editoren. Legg denne koden til bunnen av filen:

container {

background-color: # 038394;

background-image: lineær-gradient (topp, # 038394, # 00CCCC);

background-image: -webkit-lineær-gradient (topp, # 038394, # 00CCCC);

background-image: -moz-lineær-gradient (topp, # 038394, # 00CCCC);

}

Koden ovenfor setter en fallback for nettlesere som ikke støtter gradienter. Innstillingen "background-image" til "lineær-gradient" skaper gradient bakgrunn. I alle fall må du angi en retning for forløpn å starte på og deretter to farger som falmer i hverandre. Legg den linjen med kode igjen to ganger, og legger den Webkit og Mozilla prefikser for Chrome, Safari og Firefox.

4 Klikk på den blå "Update File" -knappen for å lagre "style.css" fil. Din gradient bakgrunn ser nå på hver side av Wordpress nettsted.

Hint

  • Sett alle marginer til null for din "container" div hvis du ser en hvit ramme rundt ditt gradient.