Hoe maak je de achtergrond van een gradiënt van Wordpress

Hoe maak je de achtergrond van een gradiënt van Wordpress


Omdat Cascading Style Sheet of CSS, code verlopen bevat, kunt u alleen-CSS helling achtergronden toevoegen aan uw websites zonder enige noodzaak voor gesegmenteerde afbeeldingen. U kunt in Wordpress, CSS helling achtergronden toevoegen aan je style.css bestand. U kunt het verloop op de lichaamsmarkering toepassen zoals jij voor solide achtergronden, maar u kunt een div die wraps rond de gehele website. Veel thema's gebaseerd op CSS kaders al omvatten dergelijke een div, al u toevoegen kunt als uw thema niet.

Instructies

1

Ga naar de "wp-admin" directory van uw website en log in op de Wordpress dashboard. Ga naar de "Weergave" en klik op de link "Editor". Klik op de link "header.php" onder de "Templates" rubriek aan het laden van het HTML-bestand met uw website lichaamsmarkering.

2

Zoekt u een div met een ID van "container" direct onder de lichaamsmarkering in uw "header.php" bestand. Als u niet kunt een vinden, toevoegen. Hier is wat het zou moeten uitzien:

< div id = "container" >

Sla het bestand door te klikken op de blauwe "updatebestand" knop. Als u een div-element hebt toegevoegd, laden "footer.php" in de editor en voeg "< / div >" direct boven "< / body >" om te sluiten van de div.

3

Laden "style.css" in de editor. Voeg deze code toe aan de onderkant van het bestand:

container {}

background-color: #038394;

achtergrond-afbeelding: lineaire-gradient(top, #038394, #00CCCC);

achtergrondafbeelding: - webkit-lineaire-gradient(top, #038394, #00CCCC);

achtergrondafbeelding: - moz-lineaire-gradient(top, #038394, #00CCCC);

}

De bovenstaande code stelt een uitwijkmogelijkheid voor browsers die geen verlopen ondersteunen. Instellen "background-image" naar "lineair-verloop" wordt gemaakt van de gradatie achtergrond. U wilt op zijn minst een richting voor het verloop moet beginnen op en klik vervolgens twee kleuren die in elkaar overvloeien instellen. Toevoegen dat coderegel nog twee keer, de Webkit en Mozilla voorvoegsels voor Chrome, Safari en Firefox browsers.

4

Klik op de blauwe knop van het "Update File" als uw "style.css"-bestand wilt opslaan. Uw achtergrond met kleurovergang verschijnt nu op elke pagina van uw Wordpress website.

Tips & waarschuwingen

  • Alle marges ingesteld op nul voor uw div 'container', als je witte ruimte rond uw verloop ziet.