Práce s Vlastním CSS stylem

Úprava CSS stylu je určena převážně pro zkušenější uživatele. Protože ale na našem blogu čas od času publikujeme i konkrétní návody na úpravu vzhledu či formátování vašich stránek, možnost upravit si CSS styl určitě ocení i méně zkušení uživatelé.

V rubrice Hrajeme si s CSS jsme již dříve popisovali Jak změnit barvu nebo velikost písma případně jak si efektivně Upravit tabulku.

Po přihlášení do administrace naleznete po kliknutí na záložku Vzhled v pravém menu Vlastní CSS styl. Zde máte možnost vložit nové pravidla stylů. V závislosti na tom, co zvolíte v Nastavení, se budou nové styly chovat.

Rychlé a jednoduché úpravy

Pokud například chcete pozměnit barvu nadpisů, odsazení odstavců, apod. je vhodné dopsat stylová pravidla a v Nastavení zatrhnout Nastavit styl jako aktivní. Tím docílíte toho, že se nové stylové definice vloží za již použitý výchozí styl, který ale stále zůstává aktivní. Za předpokladu, že správně zapíšete definici vč. jejího zanoření, přepíše nová definice definici starou. Je třeba si ale uvědomit, že stále využívat styly dva - výchozí a vámi definovaný vlastní CSS styl. Tato úprava se hodí pokud nenahrazujete příliž mnoho stylových pravidel - v opačném případě je vhodnější původní styl zcela nahradit.

Změna vzhledu, složitější úprava

V případě, že zamýšlíte výrazně pozměnit vzhled či plánujete složitější úpravu, je vhodné, v Nastavení zatrhnout Vypnout výchozí styl šablony. Nemusíte tak řešit otázku nepohodlného přepisování stylových pravidel a vše si můžete nadefinovat podle vašich potřeb čistě a odzačátku. Tato možnost je doporučována pouze zkušenějším uživatelům. V okamžiku kdy výchozí styl vypnete, přicházíte o všechno již nadefinované formátování a tím i nastavený vzhled vašich stránek.

Využíváme vlastní obrázky

S úpravou vzhledu si určitě pokládáte i otázku, jak zapsat do vlastního CSS stylu odkaz na nějaký váš obrázek, který jste si vytvořili. Aby jste mohli zapsat cestu k obrázku, musíte jej napřed někam uložit. Představíme si tři nejběžnější způsoby uložení obrázků i jak se na ně odkazovat. Nejvhodnější je využít pro ukládání obrázků FTP prostor.

Obrázek ukládáme přes administraci

Nahrávat obrázky a vytvořit fotogalerii určitě umíte, možná ale nevíte, že i na takto uložené obrázky se můžete odkazovat ve Vlastním CSS stylu a to takto:

background: url(/obrazek/1/nazev-png/) no-repeat 0 0;

Kde /obrazek/ je povinná část systémové cesty a /nazev-png/ je jméno obrázku. Následné číslo /1/ případně /2/ /3/ /4/ je systémové označení velikosti obrázků. inPage každý obrázek, který si nahrajete zpracuje - uloží originál /3/ a dogeneruje si miniatury /1/ /2/ /4/ na základě předdefinované max. výšky či šířky - tyto náhledy jsou dále využity pro fotogalerii, eshop, apod.

Obrázek ukládáme přes FTP

Programy inPage STANDARD a PREMIUM mají k dispozici vlastní FTP úložiště, kam si můžete obrázky pohodlně nahrát a následně se na ně odkazovat. Toto je nejvhodnější řešení pro práci s vlastními obrázky a úpravou CSS. Odkazovat se na obrázek pak budeme následovně:

background: url(/ftp/nazev.png) no-repeat 0 0;

Kde /ftp/ je povinná část systémové cesty a nazev-png je jméno obrázku.

Obrázek ukládáme na externí server

Obrázky si samozřejmě můžete uložit, pokud máte možnost, i na jiný - externí server následně se na ně odkazovat:

background: url(http://www.název-domény.cz/cesta-k-obrázku/nazev.png) no-repeat 0 0;

Tuto variantu vám ale příliž nedoporučujeme, a to z důvodu, že vám nemůžeme garantovat dostupnost. Externí úložiště může mít výpadek či přestane z jakéhokoliv důvodu fungovat a následně se vám obrázky nebudou zobrazovat.

Používáme nestandardní fonty

Nestandardními fonty chápeme takové, které jsou specifické pro operační systém či které jste si do počítače sami doinstalovali. I když se vám takový font na vašem počítači zobrazuje správně, problém nastává na straně návštěvníka vašich stránek. Pokud v počítači nemá nadefinovaný font nainstalovaný, jednoduše ho neuvidí. A celá vaše práce s tvorbou krásných fontů tak může být zcela zbytečná.

Pokud se s takovým řešením nesmíříte a chcete použít jiný font, existují dvě možné řešení:

Google Fonts, Cufón, sIFR...

Jsou řešením na principu Java Scriptu, které se neodkazují na určitý systémový font, ale fungují přesně na opačném principu - font si někam nahrajete, případně se na něj odkazujete. Výhoda tohoto řešení spočívá v tom, že návštěvník pak vidí přesně ten font, který jste zamýšleli použít. Protože jsou tyto metody poměrně specifické, je nutné si užití nastudovat. Nic ale nebrání tomu, aby jste i toto řešení v inPage využili.

Obrázky, obrázky, obrázky...

Pokud se vám zdá výše uvedené řešení složité, vždy si můžete udělat obrázkový nápis a do kódu si ho vložit. Je to sice poměrně pracné a údržba není pohodlná ani rychlá, nicméně toto řešení stále funguje. Je potřeba si ale uvědomit, že pro dobrou indexaci a optimalizaci pro vyhledávače je povinné u obrázku vyplňovat parametr alt="" (popis obrázku) do kterého bychom měli napsat přesně to, co je napsáno na obrázku. Robot který prochází vaše stránky a zpracovává indexaci nemůže tušit, co máte na obrázku napsané a toto je nejjednoduší možnost jak mu to sdělit.

Vojtěch Štursa
vojtech.stursa(zav)zoner.cz