Změna obrázku v pozadí šablony
Změna obrázku v pozadí
V několika krocích si ukážeme, jak snadno změnit pozadí šablony. Zkusíme změnit barvu pozadí, vkládat do pozadí fotografii nebo obyčejný obrázek.
Vše podstatné jsme si už popsali výše, tak můžeme pokračovat už v jednotlivých krocích.
Celé to závisí na velikosti obrázku a toho, co vlastně chcete. Podle toho také budeme upravovat CSS kód.
- Velký obrázek nebo fotografie na pozadí
- Např.: šablona A, na pozadí je jeden velký obrázek
- Malý obrázek, který se mi bude kopírovat v pozadí
- Např.: šablona F má na pozadí malý obrázek, který se kopíruje a vytváří tak mřížku
Varianta 1: Velký obrázek nebo fotografie na pozadí
- Uložte obrázek do administrace v Nastavení - Rozšířené - Obrázky. Adresu obrázku (napr.: /img/40/obrazek.jpg) si někam schovejte nebo uložte, ať se poté nemusíte vracet.
- Přejděte do Nastavení - Vzhled - Design a klikněte na Upravit CSS
- Tato část se bude opět lišit u každého designu, ale pořád mám vybranou šablonu D zelenou a najdu následující kód: body{background:#CCEA81;text-align:center;font-family:Tahoma,Arial,sans-serif;font-size:.8em;margin:0px;padding:0px}
- Tuto část vezmeme background:#CCEA81; a nahradíme vlastní částí background: url(/img/40/obrazek.jpg) no-repeat; všimněte si, že za url jsem vložil i adresu již dříve uloženého obrázku.
- Dejte uložit jako novou šablonu.
Dosáhli jsme teď toho, že obrázek se umístí vlevo nahoře a díky parametru no-repeat za adresou obrázku se nebude kopírovat směrem doprava a potom i dolů. Pokud chcete obrázkem pohybovat směrem doprava nebo dolů, tak jednoduše za no-repeat připište třeba 20% 0%. Obrázek se vám posune zleva o 20 % celkové šířky okna. První parametr je posouvání zleva a druhý odshora. Místo procent mužete použít i parametry center, left center right pro posun zleva nebo top, center, bottom pro posun odshora.
Takže pokud mám velký obrázek a chci jej na pozadí celé stránky, protože vím, že je širší jak 800px, tak kód bude:
background: url(/img/40/obrazek.jpg) no-repeat 50% 50%;
nebo
background: url(/img/40/obrazek.jpg) no-repeat center center;
Upozornění: pokud to zkoušíte na jiné šabloně, tak v bodě 3 můžete narazit na kód, který je opět odlišný, a už v něm něco takového je background: url(/img/40/obrazek.jpg) no-repeat 50% 50%;. V tomto případe jen vezměte adresu obrázku a vložte ji do závorek za url. Poté si můžete kód upravit, jak chcete, nebo jednoduše zbytek za závorkou umažte a nechte jen středník.
Upozornění2: Hodně šablon má také obrázek v pozadí uložen ješte na jiném místě v CSS šablone. Najdete ho v
Řá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.
Varianta 2: Malý obrázek nebo fotografie na pozadí
Podobný postup jako předtím:
- Uložte obrázek do administrace v Nastavení - Rozšířené - Obrázky. Adresu obrázku (napr.: /img/40/obrazek.jpg) si někam schovejte nebo uložte, ať se poté nemusíte vracet.
- Přejděte do Nastavení - Vzhled - Design a klikněte na Upravit CSS
- Tato část se bude opět lišit u každého designu, ale pořád mám vybranou šablonu D zelenou a najdu následující kód: body{background:#CCEA81;text-align:center;font-family:Tahoma,Arial,sans-serif;font-size:.8em;margin:0px;padding:0px}
- Tuto část vezmeme background:#CCEA81; a nahradíme vlastní částí background: url(/img/40/obrazek.jpg); opět si všimněte, že za url jsem vložil i adresu již dříve uloženého obrázku.
- Dejte uložit jako novou šablonu.
V čem je od Varianty 1 změna? Jednoduše jsem umazal no-repeat a docílil tak toho, že obrázek se bude sám kopírovat doprava i dolů.
Většina šablon má nahoře úzký pás, který je obrázek, a směrem dolů přechází nějakou barvu. K tomu nám slouží takovýto kousek kódu:
background: #eeccdd url(/img/40/obrazek.jpg) repeat-x;
Těm všímavějším neunikne, že jsme jen spojili všechny varianty dohromady. Za background vidíme definovanou barvu pozadí #eeccdd opět v hexa, ale můžeme zde napsat třeba white. Poté url(), která nám udává adresu obrázku, a nakonec repeat-x, které obrázku říká, aby se kopíroval pouze v Xsové ose (obrázek se bude kopírovat doprava). Pokud chci, aby se kopíroval směrem po Ynové ose (čili směrem dolů), změním parametr na repeat-y.
Petr Zapletálek
Komentáře
obrázek nebo barva na pozadí příspěvku
Hezký den, jak se dá vložit pozadí do pozadí příspěvku? Pomocí HTML? Když kod vložím přímo v editaci příspěvku, tak se mi v editoru ukáže, ale ve výsledných stránkách už ne. Mám styl D-modrý. Děkuji. E-mail: mihulkova.l@seznam.cz
stránky, patička
Hezký den, mám problém u těchto stránek.
http://www.taekwondo-havirov.estranky.cz/
Patička se mi celá posunula doleva. Děkuji za radu.
Re: Re: stránky, patička
Zdravím,
někde v kódu budete pravděpodobně mít navíc ukončovací značku </div>. Pokud si s opravou nebudete vědět rady, napište na podpora@estranky.cz - něco vymyslíme.
úprava u těchto stránek
Hezký den, co tady s těmi stránkami?
http://taekwondo-havirov.estranky.cz
U každých se mi nezobrazuje pozadí, nebo je to posunuté dolů celé, když změním jiný styl.
Změna pozadí
Dobrý den,
chci si změnit pozadí stránek www.cat-birma.cz. Můžete mi napsat, kam přesně mám vložit adresu obrázku?
Děkuji Vám
Styl C - hnědý
Dobrý den,
zajímalo by mě, jak lze u tohoto stylu změnit obrázek na pozadí.
Děkuji
Re: Styl C - hnědý
Dobrý den,
úpravu úplně snadno provést nelze - Styl C má totiž část pozadí vloženou v obrázku horní části stránek. Všechno okolní pozadí ale můžete upravit dle návodu v CSS v části "html, body", kde jsou uloženy informace o barvě pozadí.
Pokud byste úpravu nezvládl a trval na ni, kontaktujte nás na mailu podpora@estranky.cz - kde se můžete domluvit na ceně úpravy našim programátorem.
Hezký den, P. Doseděl
Styl - Trend červený
Dobrý den chtěl bych se zeptal
1. jak u tohoto stylu ,abych mohl změnit obrázek na pozadí.
2.jak změnit bílá pole (mám na mysli např v horní nabídce,na hlavní nabídce atd.) na jinou barvu
Děkuji
Re: Styl - Trend červený
Dobrý den,
při změně pozadí Vás bude v CSS zajímat
".bg { background: #fafafa url("<!--/ img_root /-->background.jpg") no-repeat center center fixed;"
Jednotlivé bloky musíte v CSS najít.
U postranních bloků je to: .column div.section
U menu: #navigation .inner_frame
U drobečkové navigace: #breadcrumb-nav
U textu na úvodní straně: #perex
...
vypnutí obrázku v záhlaví
Dobrý den, prosím o radu. Chci si jako pozadí šablony nastavit fotografii, kterou ale ruší obrázek v záhlaví. Jde zobrazení obrázku v záhlaví nějak vypnout? Děkuji předem
Re: vypnutí obrázku v záhlaví
Dobrý den,
napište mi prosím konkrétní stránky, kterých se úprava týká.
Re: Re: vypnutí obrázku v záhlaví
Jde o tyto stránky http://www.body-art.estranky.cz/. Mám v záhlaví obrázek, který jsem si vytvořila, ale protože chci použít do pozadí šablony fotografii, obrázek tam pak zavazí, nevypadá to pěkně. Je možné že jej někdy zase budu chtít vrátit, a pozadí šablony udělám nějaké neutrální. Momentálně ale mám připravenou fotku která se na to pozadí hodí a bude to vypadat moc hezky, když tam nebude ten obrázek...děkuji
Re: Re: Re: vypnutí obrázku v záhlaví
Je potřeba upravit CSS šablony. Jsou dvě možnosti. Buď obrázek v záhlaví úplně odstraníme, nebo ho jen skryjeme (tzn. zůstane na stránce volné místo).
Pro první variantu vložte nakonec CSS #header {display: none;}
pro druhou pak #header {visibility: hidden;}
Stačí takto?
Re: Styl S - hnědý
Dobrý den,
pravděpodobně je to kvůli tomu, že máte aktivovaný program "Zdarma". Tuto šablonu můžete najít v záložce "Placené" v přehledu šablon a případně si ji dokoupit pomocí SMS.
S přátelským pozdravem Petr Doseděl
Re: Re: Styl S - hnědý
Mám nekomerční program.
Potřeboval bych jen vědět kterou část kódu mám změnit.
Styl L
Dobrý den, jak lze upravit pozadí u stylu L? www.taekwondo-wtf.eu Můj mejl:
Mihulkova.L@seznam.cz
Odpovědět