Jdi na obsah Jdi na menu
 


Změna barvy pozadí šablony

V několika krocích si ukážeme, jak snadno změnit pozadí šablony Vašich eStránek. Zkusíme změnit barvu pozadí, vložit fotografii do pozadí nebo zobrazit na pozadí obyčejný obrázek. Návod je poměrně jednoduchý, ale je pouze pro placené programy.

clipboard01.jpg

Obtížnost: jednoduchá

Program: placené programy

 

 Změna barvy pozadí

Vezmeme to postupně a vše si vyzkoušíme na nějaké jednoduché šabloně. Samozřejmě pokud nechcete šablonu měnit, nemusíte. Ale většina šablon má v pozadí nejen barvu, ale i obrázek. Proto když aplikujete změny, které si popíšeme, tak se Vám obarví pouze půlka stránky. Předejdete zděšení proboha, co jsem si to zase se stránkami provedl.

Zvolil bych šablonu D a to například zelenou verzi.

Klikněte na tlačítko Upravit CSS. Potom najděte následující řádek. Protože se v CSS kódu špatně hledá a je opravdu dlouhý, doporučuji využít vyhledávání prohlížeče a to pomocí tlačítka F3 v Google Chrome nebo Firefoxu. V Internet Exploreru je vyhledávání klávesovou zkratkou CTRL + F.

Zdrojový kód:
body{background:#CCEA81;text-align:center;font-family:Tahoma,Arial,sans-serif;font-size:.8em;margin:0px;padding:0px}

Opět v každé šabloně je velikost tohoto kódu jiná, proto se neděste. Zajímá nás pouze kód, který se nachází mezi složenými závorkami {}.

Tato část zdrojového kódu background:#CCEA81; nám reprezentuje barvu, která se nám zobrazuje v pozadí. Pokud ji chcete změnit, stačí když místo #CCEA81  napíšete svou barvu. Nemusíte napsat zrovna tento hexadecimální tvar, ale můžete použít anglické názvy barev, jako je například green, brown, white, black, navy. Seznam hexa barev.

Takže kód bude vypadat po naší úpravě takto: background: white;

Výsledný kód bude vypadat 

Zdrojový kód:
body{background:white;text-align:center;font-family:Tahoma,Arial,sans-serif;font-size:.8em;margin:0px;padding:0px}

Jakmile skončíme se změnou barvy, tak dole na stránce dáme Uložit jako nový design.

Výsledná stránka by měla po změně barvy v pozadí na bílou vypadat nějak takto.

 

clipboard01.png

 

Upozornění: Dbejte na neporušení kódu, neznám nic horšího při zkoušení nových věcí než umazané závorky nebo středník na konci. Dbejte na to, aby za barvou byl středník.

Upozornění 2: Může se Vám stát, že v některé jiné šabloně se Vám budou překrývat barvy a barva na výsledné stránce bude jiná, než jste si vybrali. Barvu najdete pravděpodobně v CSS šabloně u následujícího parametru:

Zdrojový kód:
#document{background: #9C7450;}

Upozornění 3: Také hodně šablon má obrázek v pozadí uložen ještě na jiném místě v CSS šabloně. Najdete ho v

Zdrojový kód:
#document{background-image: url(http://www001.estranky.cz/resources/userServers/design_1000000002/img/bg3.jpg);}

Řádek s background: smažte až po nejbližší středník, ale pouze background, nemažte celý #document. Obsahuje důležité parametry a mohli byste si poškodit šablonu.

Vypisování změn u všech šablon by bylo velmi zdlouhavé, tak zkuste podat dotaz do komentářů.

Petr Zapletálek

 
3. 1. 2011

Komentáře

numiz-luka.estranky 5. 12. 2016 11:00

Štýl Zápisník - modrý

V CSS som nič podobné nenašiel. Chcem zmenu farby pozadia z bielej napr na DeepSkyBlue, teda 00BFFF. Môžete mi poradiť prosím ?
Ďakujem.

ladik 16. 3. 2016 10:14

prhližeč seznam.cz

změna,barvy prohližče.

Vladka 29. 9. 2013 23:18

Pozadí šablony J

Mám šablonu J červená, ale chtěla bych hezčí odstín té červené, ale prostě ten kod s barvou pozadí ne a ne najít.
Děkuji

Petr Doseděl - eStránky.cz 15. 10. 2013 10:00

Re: Pozadí šablony J

Dobrý den,
u šablony J je přes celé pozadí umístěn obrázek, takže pokud chcete změnit barvu. Budete muset obrázek stáhnout, upravit a v css souboru zadat novou adresu.

Řádek, kterého se to týká začíná značkou "#document" - místo "<!--/ img_root /-->document.jpg" můžete vložit odkaz na jakýkoli obrázek, ke kterému máte autorská práva.

Jirka 2. 9. 2013 21:36

nová šablona

Konkurenční servery nabízejí šablony designů šitých na míru fotografům, kteří stránky používají hlavně k prezentaci svých fotografií. Chystají i estránky nějaký takový design? Myslím, že by to mnoho uživatelů ocenilo....

Děkuji