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