Jak vytvořit gradientní pozadí v aplikaci WordPress

CSS umožňuje nastavit plynulé přechody, takže můžete přidat gradientní pozadí pouze pomocí stylů, aniž byste museli používat obrázky. V WordPressu nelze gradient aplikovat přímo na značku body, ale lze ho nastavit na kontejner div, který obaluje celý web. Většina moderních motivů již takový kontejner obsahuje; pokud ne, můžete jej snadno doplnit.

Krok 1 – Otevření souboru hlavičky

Přihlaste se do administrace WordPress (wp‑admin) a v levém menu vyberte Vzhled → Editor. V seznamu souborů klikněte na header.php, kde se nachází otevírací značka <body>.

Krok 2 – Přidání kontejneru

V souboru header.php hned pod značkou <body> najděte <div id="container">. Pokud tento div neexistuje, vložte jej takto:

<body>
    <div id="container">

Soubor uložte tlačítkem Aktualizovat soubor. Poté otevřete footer.php a těsně před uzavírací značku </body> přidejte ukončovací tag </div>:

    </div>
</body>

Krok 3 – Definice gradientu v CSS

V editoru otevřete soubor style.css a na jeho konec přidejte následující kód:

#container {
    background-color: #038394; /* fallback pro starší prohlížeče */
    background-image: linear-gradient(to bottom, #038394, #00CCCC);
    background-image: -webkit-linear-gradient(to bottom, #038394, #00CCCC); /* Chrome, Safari */
    background-image: -moz-linear-gradient(to bottom, #038394, #00CCCC);    /* Firefox */
    margin: 0; /* odstraní mezery kolem gradientu */
}

Uložte změny opět tlačítkem Aktualizovat soubor. Gradient se okamžitě projeví na všech stránkách vašeho webu.

Tip

• Pokud kolem gradientu zůstává bílá mezera, nastavte pro #container margin na nulu (viz výše).