0 Kč bez DPH

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.

Tip: Kliknutím na odkaz výchozí styl si zobrazíte seznam všech stylů a pravidel, použitých u vaší prezentace. Pravidla jsou rozdělena do bloků, které jsou komentovány a odděleny a mělo by tak být snažší rozpoznat, které třídy a ID se kde využívají. Je vhodné si odtud nejprve zkopírovat požadovaný styl a až následně provést jeho úpravu. Jednak je to rychlejší než ho psát celý odzačátku, ale také se tak vyhnete možnosti, že by jste se přepsali a neuvedli korektní cestu ke třídě, elementu nebo ID, které měníte.

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.

Tip: I při složitější úpravě je vhodné si výchozí styl zkopírovat a pouze poupravit příslušné styly. Vždy je pro vás výhodnější nepotřebné styly zaměnit nebo odmazat než je celé psát odzačátku. Případně si z výchozího stylu můžete zkopírovat pouze to, co vám vyhovuje - formátování fotogalerie, komentáře, formuláře, apod.

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á.

Je proto vhodné si dohledat seznam univerzálních fontů pro použití na webu a používat výhradně tyto fonty.

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

Přidat komentář

Přehled komentářů

  • Farba pozadia

    28. 3. 2011 12:40:57 | duSan

    Po zadaní kodu: body {background-color:#000000} sa pozadie sfarbí do čierna ale len do polovice stránky. Čo s tým?

    Odpovědět

  • RE: farba pozadie

    29. 3. 2011 11:16:16 | Hana Medková

    Dobry den, pokud potrebujete zmenit pozadi stranek je potreba do vlastniho CSS stylu zadat tento zápis:
    body { background-color: none repeat-x scroll 0 0 black; } - pozadí v inPage se totiž skládá ze dvou prvků - v horní části je obrázek, ve spodní části je barva. Tím CSS zápisem tedy nejdříve zrušíte platnost horního obrázku a ten se pak překryje nastavenou barvou.

    Odpovědět

  • RE:farba pozadia

    31. 3. 2011 22:11:19 | duSan

    ďakujem za reakciu, ale bohužiaľ stále mi tá čierna vystupuje len do polovice. Môžete mi prosím uviesť uviesť /polopaticky/ celý kód? Ide o šablónu č.4
    ďakujem.

    Odpovědět

  • RE: farba pozadie 2

    1. 4. 2011 8:07:58 | Hana Medková

    Dobrý den, s tímto zápisem CSS níže se mi podařilo to pozadí bez problému změnit na černé (celé pozadí)

    body { background: none repeat-x scroll 0 0 black; }

    Pokud Vám to po zadání tohoto zápisu do vlastního CSS pozadí na černo neobarví, kontaktujte nás prosím na admin@zoner.cz s problémem a uveďte prosím název domény. Děkujeme

    Odpovědět

  • RE:farba pozadia

    1. 4. 2011 12:33:10 | duSan

    Ok, faj diki moc už to šlape. Ešte raz vďaka za pomoc.

    Odpovědět