Kaip sukurti gradientinį foną WordPress

CSS leidžia kurti gradientinius fonus, todėl galite pridėti tik CSS pagrindu sukurtus gradientus į WordPress svetaines be papildomų paveikslėlių.

WordPress negalima tiesiogiai taikyti gradientų body žymai, bet galite naudoti div konteinerį, kuris apgaubia visą puslapį. Dauguma temų, sukurtų ant CSS framework'ų, jau turi tokį konteinerį; jei ne – jį pridėsite patys.

1 žingsnis

Eikite į savo svetainės wp-admin sritį ir prisijunkite prie WordPress valdymo skydelio. Skiltyje Appearance spustelėkite Theme Editor (redaktorius). Iš šablonų sąrašo pasirinkite header.php, kad atidarytumėte HTML failą, kuriame yra body žyma.

2 žingsnis

Header.php faile po body žyma ieškokite div su ID container. Jei tokio elemento nėra, pridėkite jį:

<div id="container">
    <!-- Jūsų turinys -->
</div>

Išsaugokite failą spustelėdami mėlyną mygtuką Update File. Jei pridedate div, atidarykite footer.php ir prieš įterpkite uždarančią </div> žymą.

3 žingsnis

Redaktoriuje atidarykite style.css ir failo apačioje pridėkite šį kodą:

#container {
    background-color: #038394;                     /* atsarginė spalva */
    background-image: linear-gradient(to bottom, #038394, #00CCCC);
    background-image: -webkit-linear-gradient(top, #038394, #00CCCC);
    background-image: -moz-linear-gradient(top, #038394, #00CCCC);
}

Kodas nustato atsarginį foną naršyklėms, nepalaikančioms gradientų, ir apibrėžia gradientą nuo viršaus į apačią su dviem spalvomis. Išsaugokite paspausdami Update File. Dabar gradientinis fonas matomas visuose puslapiuose.

Patariama

• Jei aplink gradientą matote baltą erdvę, nustatykite #container elementui margin: 0;.