0 Kč bez DPH

Jak upravit barvu písma, nadpisů a odkazů

25. 01. 2008

Administrační rozhraní inPage vám umožní nejenom výběr z připravených šablon vzhledu a barevných schémat. S trochou šikovnosti vytvoříte web, který se původní šabloně nepodobá ani trochu. Začít můžete pozvolna, například nastavením vlastních barev pro obsah, nadpisy a odkazy.

Pro nastavení barev, ale i pro většinu dalších vlastností webu, které nějak souvisejí se vzhledem, se používají tzv. kaskádové styly. Jde o soubor několika definic, kde je v odpovídajícím formátu uveden vzhled konkrétního nebo obecných prvků na webové stránce. Do inPage jsme proto pro zkušenější uživatele umístili nastavení, s jehož pomocí mohou zadat vlastní kaskádové styly, které se použijí místo standardních, definovaných ve vybrané šabloně.

Práce s kaskádovými styly není tak složitá, jak by se mohlo zdát. Stačí dodržovat několik základních pravidel jejich zápisu a máte vyhráno. Navíc díky systému použitému v inPage nehrozí, že byste si špatným zápisem kaskádových stylů zbourali celý web. Pokud zjistíte, že se něco nezobrazuje správně, jednoduše své úpravy v nastavení inPage vymažete a začnete znovu.

Kaskádové styly v inPage

Vlastní kaskádové styly můžete v inPage zadávat pomocí administračního rozhraní, ve kterém se přepnete na záložku Vzhled a do skupiny Vlastní CSS styl. Zobrazí se jednoduchý formulář, jehož obsah zapnete pomocí volby Nastavit jako aktivní. Vše, co do formuláře vložíte, se po uložení použije při zobrazení webu vám i dalším návštěvníkům.

Struktura zápisu

Každá položka v kaskádových stylech má pevně danou formu zápisu. Pokud ji porušíte, nebude vám kaskádový styl fungovat. Jako ukázka může posloužit kaskádový styl pro úpravu vzhledu Nadpisu 1.

	h1{
color: #000000;
font-weight: bold;
}

V první řadě je vždy uveden název prvku stránky, kterému chcete přiřadit nějaké vlastnosti. Následuje dvojice složených závorek {}, mezi kterými jsou tyto vlastnosti uvedeny. Ty zadáváte vždy jako název, dvojtečku, a hodnotu této vlastnosti, kterou následuje oddělující středník. Je přitom jedno, zda je vše uvedeno na jediném řádku nebo na více řádcích.

Nadpisy, odkazy, text

Abyste nemuseli pracně pátrat po webu nebo v knihách po tom, jakým způsobem se do kaskádových stylů zadává označení nadpisů, odkazů a běžného textu, využijte následující stručný seznam:

  • h1, h2, h3, h4, h5, h6 - označení jednotlivých úrovní nadpisů
  • a:link, a:hover - označení běžného odkazu a označení odkazu, nad kterým je právě umístěn ukazatel myši
  • body - celé tělo stránky

Práce s barvou

Zkuste začít s jednoduchými úpravami, a to barvou jednotlivých prvků na stránce. Ta se do kaskádových stylů vkládá jako speciální šestimístný kód. Získáte jej buď v lepším grafickém editoru nebo například v administraci inPage pod záložkou Vzhled a položkou Text motivu. Tam najdete nástroj pro výběr barvy, který vám šestimístný kód sdělí.

Nezbývá, než se pustit do několika praktických ukázek. Pro začátek nastavte všechny texty na stránce do černé barvy:

	body { color:#000000; }

Mezinadpisy můžete chtít zobrazit odlišně. Následující tvar zápisu stylu můžete použít v případě, že chcete uvést nějakou vlastnost společně pro více prvků na stránce, v tomto případě pro všechny typy nadpisů:

	h1, h2, h3, h4, h5, h6 { color:#240EFF; }

Často se setkáte s potřebou měnit barvu odkazu v momentě, kdy je na něj umístěn ukazatel myši. Následující sada stylů nastaví stejnou barvu pro běžný a navštívený odkaz a následně pro odkaz s umístěným ukazatelem myši:

	a:link, a:visited { color:#F30000; }

a:hover { color:#F36666; }

Označení jednotlivých prvků můžete i kombinovat, následující styl je určen pro Nadpis 3, který je zároveň i odkazem:

	h3 a:link, h3 a:visited { color: #006600; }

Nastavení barev samozřejmě není jedinou funkcí kaskádových stylů. Díky nim byste však měli princip ovlivňování vzhledu webu pomocí kaskádových stylů pochopit. Barvy textů a odkazů volte tak, aby odpovídaly barvám v logu a hlavičce webu. Barvami na webu neplýtvejte, čím méně jich použijete, tím lépe.

S výběrem barevného schématu vám může pomoci i jednoduchý online nástroj nazvaný Generátor barevných témat 2.

Související články

Přidat komentář

Přehled komentářů

  • CSS - Body

    21. 6. 2009 22:30:07 | Miloš

    Je možné vo vlastnom CSS - body nadefinovať na pozadie aj vlastný obrázok? Ak áno, ako sa nahrá, akú cestu mu do CSS napisať v inpage?

    Odpovědět

  • Re: CSS - Body

    22. 6. 2009 8:31:50 | pk

    Obrazek na pozadi vlozit lze a to predefinovanim tagu body ve Vlastnim CSS stylu. Nejsnazsi je prozkoumat kod nektere stranky v inpage, ktera obrazek na pozadi ma, napr. www.ikone.cz/styl/3 ma:

    body {
    background : #747474;
    background-image: url('/ftp/background/background-zkouska.gif');
    background-repeat: no-repeat;
    background-position: top center;
    }

    Odkaz background-image je link na obrazek nahrany primo v inPage (pak by adresa byla neco jako /obrazek/3/background-zkouska-gif/) nebo jako v tomto pripade na FTP.

    Odpovědět

  • CSS

    24. 6. 2009 0:20:03 | Miloš

    Po skúške by som ešte doplnil, že plati aj možnosť vyradenia CSS štýlu, že zapis je možné dať do poznámky t.j. /* štýl */.
    Tento zápis platí štandardne pre vyradenie css štýlu pri odlaďovaní.

    Príklad:
    body { color:#000000; } - je aktívny

    /*body { color:#000000; }*/ - nie je aktívny
    a pritom nezáleží, či máme v inpage zašktnuté aktívne.





    Odpovědět

  • CSS

    12. 1. 2010 22:16:56 | muskova

    Farbu nadpisov a textu podľa vašich inštrukcií som zmenila ľahko.Poradte prosím ešte ako zmeniť farbu textu hlavneho menu.
    ďakujem

    Odpovědět

  • Změna barvy písma v hlavním menu

    14. 1. 2010 14:49:58 | admin

    Barvu písma v hlavním menu změníte pomocí CSS stylu:

    #menu li a {color: green; }

    Odpovědět

  • css

    15. 1. 2010 16:10:48 | muskova

    Ďakujem za odpoveď,rada by som ešte vedela či sa dá zmeniť aj farba políčka v hlavnom menu,ktoré je práve vyskočené.

    Odpovědět

  • Názvy CSS a farby jednotlivých častí

    27. 1. 2010 16:30:33 | Miloš

    Veľmi by ma zaújmalo, akým spôsobom je možné zmeniť farby jednotlivých častí pozadia stránky. Určiste by stalo za to, tieto názvy zákaznikom poskynúť, aby si mohli farebné ladenie upraviť dľa horeuvedeného generátora farebných tém. Ten generatorček je veľmi šikovný nástroj, len treba k nemu nám užívateľom, vedieť jednotlive názvy sekcii CSS stránok, aby sa mohli aplikovať v praxi.
    Ďakujem za radu ...

    Odpovědět

  • RE: Názvy CSS a farby jednotlivých častí

    27. 1. 2010 17:06:10 | admin

    názvy jednotlivých částí jsou pojmenované v angličtině, veškeré CSS styly k šablonám najdete pokud za název vaší domény www.neco.cz napíšete /styl/1 (u sk domén to může být /style/1)

    Následně uvidíte jak je co definované, učit CSS uživatele nemůžeme, to vše se můžete naučit na stránkách www.jakpsatweb.cz/css kde najdete naprosto vše co se CSS stylů týká.

    Například pozadí je background. V nejbližší době plánujeme přidat malý návod jak si změnit pozadí stránek s pomocí CSS stylů. Tento návod pak naleznete v sekci Hrajeme si s CSS :)

    Odpovědět

  • Názvy CSS a farby jednotlivých častí

    28. 1. 2010 9:37:57 | Miloš

    Prajem pekny den.
    Myslim si, ze informacie aspon pre mna staci, co sa tyka odkazu. Samozreme je to mozne z toho vycitat.
    Dik za info ...
    S pozdarvom Miloš

    Odpovědět

  • Vkládání ukázek v blogspot blogu

    18. 8. 2016 19:59:11 | Knižní Sen

    Dobrý den,
    mám dotaz, i když nepatří k tomuto tématu, nevím, kam jinam ho dát.
    mám blog o knihách na stránkách blogspot a zajímalo by mě, jak lze vložit ukázka knihy do textu (prostě, že se tam bude moci listovat knihou, jako třeba zde: http://lucy-lillianne.blogspot.cz/2016/08/cesta-vecnou-noci.html viz ukázka z knihy)

    Děkuji a pěkný den,
    Knižní Sen

    Odpovědět

  • RE: Vkládání ukázek v blogspot blogu

    19. 8. 2016 8:29:35 | Tým inPage

    Dobrý den,
    pomocí online nástroje sloužícího pro publikaci dokumentů je vygenerován prvek iframe, který je v HTML kódu ohraničen tagy <iframe></iframe>. Tento kód si zkopírujete a v administraci v úpravě obsahu stránky si otevřete zdrojový kód (v nové administraci ikonka < > a původní administraci přes Nástroje -> zdrojový kód). Najdete si požadované umístění na stránce a kód vložíte. Na závěr úpravy zdrojového kódu i stránku uložíte.

    Odpovědět

  • Barva odkazů

    14. 1. 2019 19:22:12 | Zdenka Sekená

    Dobrý den,

    je možné nastavit dvě barvy odkazů?
    V hlavním menu ( úvodní stránka a odkaz premium klub ) bych chtěla aby odkaz zůstal černý i s černým podržením ( #000000 ), ostatní odkazy v textech bych chtěla jenom barevné podržení po najetí myší (#DA70D6 ).
    Děkuji za odpověď. Zdenka Sekená
    www.kosmetickysalonbrno.com

    Odpovědět | Zobrazit odpovědi

    • Re: Barva odkazů

      15. 1. 2019 12:21:47 | Tým inPage

      Dobrý den,
      barva odkazů v menu lze upravit pro všechny zároveň nebo jen některým. Co se týče odkazů v textu. Lze upravit opět všechny zároveň, nebo je možné připravit i další styl. Ten je poté třeba ručně přidat do html kódu odkazů.
      Na zmíněném webu je barva odkazů již upravena dle požadavků.
      Pro úpravu všech položek v menu je třeba přidat do vlastních CSS níže uvedený styl:
      #menu .main-menu > ul > li > a {color:#000; border-color:#000}

      Přejete-li si upravit pouze položku o nás přidejte tento styl:
      #menu-item-207048 > a {color:#000; border-color:#000}

      Pro více informací nás prosím kontaktujte na admin@zoner.cz

      Odpovědět