Jak upravit vzhled blogu na lide.cz
Aktualkzace 2016: tento článek je zcela neaktuální, protože na lide.cz už dlouho nejsou blogy provozovány.
- Jděte na www.lide.cz
- v pravém horním rohu se přihlaste
- po přihlášení klikněte na Blogy neboli deníčky v hlavní oblasti stránky.
- v levém menu klikněte na Design (CSS)
Toto je hlavní tvůrčí prostředí při úpravě vzhledu blogu. Sem se dá už rovnou psát CSS styl, ale ne každý to umí. Tento návod se zabývá tím, jak ty CSS příkazy napsat.
Ovládání rozhraní
Co znamenají horní tři odkazy: struktura stránky | ukázkové css | otestujte design
Struktura stránky je obrázek, který přehledně zobrazuje, jak se která část jmenuje.
Ukázkové css jsou příklady designů, které lze pomocí CSS zápisu vytvořit. Mohou pomoci k rychlým úpravám nebo inspiraci.
Odkaz otestujte design nedělá nic jiného, než že se přenesete na svůj blog.
Pod oblastí na zápis stylu (velká bílá plocha) si všimněte tlačítka Uložit design (CSS).
Příklad jednoduché změny
Dejme tomu, že budete chtít, aby datum a čas příspěvku (uvedený nad nadpisem příspěvku) nebyl červený, ale aby byl zelený.
Podívejte se na obrázek struktura stránky.
Vidíte tam, že ten červený čas je pojmenován jako cas (a v závorce je uvedeno, že to je tag span, ale to je v tuto chvíli jedno). Pokud to na obrázku nevidíte, tak je to vlevo červeně.
Teď přichází magie.
- Napište do hlavní oblasti přesně tento zápis (na začátku řádku musí být tečka):
.cas {color: green;}
- Klikněte dole na tlačítko Uložit design (CSS).
- Objeví se hláška, že se to uložilo.
- Podívejte se na svůj blog (třeba odkazem "otestovat design"). Pokud to bude potřeba, dejte na blogu refresh (F5). Uvidíte, že čas zezelenal.
Malé vysvětlení. To .cas je pojmenování třídy. Neznamená to
nic jiného než to, že říkám stránce, kterou část textu má barvit. Správná
slova (jako třeba ten cas) najdete právě na tom ilustračním obrázku. Na
obrázku jsou názvy tříd bez tečky, ale v zápisu stylu třída vždycky začíná
tečkou.
To color: green; je zápis vlastnosti barvy (color)
a její hodnoty (green = zelená). Vlastností je spousta, třeba tučnost, font,
velikost písma. Mrkněte potom kdyžtak na
přehled CSS vlastností
a hodnot. Barvy použijte pojmenované
nebo bezpečné.
Složitější změny
Tučnost
Co kdybych ten čas chtěl zelený a tučný? Zápis je poněkud složitější, všimněte si hlavně středníků a chlupatých závorek:
.cas {color: green; font-weight: bold;}
Takže zase -- napište to do rámečku na CSS, klikněte na Uložit design (CSS) -- na to já vždycky zapomenu -- a podívejte se, co se stalo.
Ten zápis font-weight: bold; znamená, že stylovaný text bude
tučný. Font-weight je opět
jedna z CSS vlastností
a bold je její hodnota. Kdybych chtěl něco naopak odtučnit, tak zadám
font-weight: normal;.
Perex
Tak dál. Dejme tomu, že budu chtít mít první odstavec každého příspěvku kurzívou (šikmým písmem, anglicky italic). První odstavec příspěvku má třídu perex. Zjistím to z obrázku. Když se podíváte na obrázek, vidíte, že je světle zeleně orámovaný. Zkuste si do stylu napsat:
.perex {font-style: italic;}
Uvidíte, že se první odstavec (perex) každého příspěvku zobrazuje kurzívou.
Opět -- s tečkou na začátku. Font-style je vlastnost, italic je hodnota pro kurzívu.
Když už píšu o perexu, tedy o prvním odstavci, tak to je mimochodem docela důležitá věc. Objevuje se totiž v RSS čtečce a uživatelé se podle něj rozhodují, jestli si článek přečtou.
Pravidla se píšou za sebe na další řádek
Když chci mít více pravidel, prostě je napíšu pod sebe. Předchozí příklady se spojí takto:
.cas {color: green; font-weight: bold;}
.perex {font-style: italic;}
Jak něco zrušit, aby to na stránce nebylo
Dejme tomu, že tam nebudu chtít mít to hlavní logo Lidé.cz (pokud jej chcete jenom zaměnit za jiný obrázek, dělá se to v levém menu v Nastavení). Jak se věci ruší:
- Najdu si na nákresu třídu daného objektu
- a zapíšu to se stylem display: none. Takhle:
.logo {display: none;}
Nebo dejme tomu budu chtít zrušit v pravém sloupku výpis kategorií (třeba protože je nepoužívám) a budu chtít zrušit výpis kategorií i nad článkem. Našel jsem si na obrázku, že v pravém sloupku se blok kategorií jmenuje kategorie-blog a nad článkem se jmenuje kategorie. Takže styl vypadá takto:
.kategorie-blok {display: none;}
.kategorie {display: none;}
Jenomže když se zruší výpis kategorie nad článkem, tak jsou tam takové dvě hnusné pomlčky za sebou. Ty se dají taky nechat zmizet. Na obrázku ale není vidět, jak se jejich třída jmenuje.
Jak zjistit třídu, když není na tom obrázku
Takže budu třeba chtít vědět, jak se jmenují ty pomlčky, co na nákresu chybějí.
- Vlezu si na svůj blog
- zobrazím si zdroj příkazem Zobrazit > Zdrojový kód
- hledám dotyčné místo
- a vidím toto:
<SPAN class="cas">12.1.2005,
21:54:22</SPAN>
<SPAN class="pomlcka">-</SPAN>
<SPAN class="kategorie">nezařazeno</SPAN>
<SPAN class="pomlcka">-</SPAN>
<SPAN class="permonik"><A HREF="/uzivatelske-jmeno/2005/01/12/1">trvalý
odkaz</A></SPAN>
Pokud na to budete chvilku koukat, tak pochopíte, že to class znamená třídu, tedy pojmenování daného prvku pro účely stylování. To jsou ta slova na nákresu. (Barevné zvýraznění tam ale neuvidíte, to je jenom tady.) Chci-li zjistit třídu pro ty pomlčky, je vidět, že ta třída se jmenuje pomlcka.
Takže potom můžu třeba obarvit pomlčku na červeno:
.pomlcka {color: red;}
obarví se obě (resp. všechny) pomlčky, protože mají stejný class. Nebo je můžu nechat zmizet:
.pomlcka {display: none;}
Jména třídy komentářů
Zase -- komentáře na nákresu chybějí, takže se musí do zdroje. Tam je toto:
<DIV class="oprispevku-dole">
<SPAN class="komentar">
<A HREF="/uzivatelske-jmeno/2005/01/12/1">komentáře</A>
<SPAN class="pocet">0</SPAN>
</SPAN>
</DIV>
Jak vidno, máte k dispozici hned tři třídy (class) -- oprispevku-dole, komentar a pocet -- a vyberete si, co jak chcete stylovat.
Jak zrušit tu horní linku
Myslíte tu šedivou linku, jak je tam to Blogy Lidé.cz Seznam a tak, úplně nahoře?
Takže upřímně řečeno, tuhle linku zrušit neumím. Je to tam nějak chytře opajcované, aby to zrušit nešlo. Ale zase tolik nevadí, ne? Je to linka mrňavá.
Nadpisy příspěvků
Upozorňoval jsem, že se na začátku každého řádku píše tečka. Je tam jedna výjimka a tou je nadpis příspěvku. Nadpis příspěvku je v kódu dělaný tagem <h2> -- vidíte to na nákresu v závorce. To, co máte na nákresu v závorce, jsou html tagy a ty se do CSS píšou bez tečky. Takže třeba budu chtít mít všechny odkazy veliké 20 pixelů, tmavě modrým (navy) písmem a slabě zeleně (green) orámované (border):
h2 {font-size: 20px; color: navy; border: 1px solid green;}
No fuj, to je divné, že? Ale to h2 funguje.
Jak se barví odkazy
Pokud si budete chvíli hrát s barvami, zjistíte, že výše popsaným postupem nejdou barvit odkazy. Na to se musí chytřeji. Nakopírujte si do CSS zápisu toto kouzlo:
a:link {color: blue;} /* nenavštívený */
a:visited {color: navy;} /* navštívený */
a:hover {color: red;} /* přejížděný myší */
Slova blue, navy a red jsou různé barvy. Můžete si tam dát barvy svoje (anglicky zapsané nebo jakoukoliv barvu v libovolném platném zápisu).
To "a" je jako html tag pro odkaz, čili vlastně totéž jako <a>.
Různé odkazy různou barvou
Občas to někdo chce. Dejme tomu, že budu chtít mít odkazy nacházející se uvnitř sloupku barvou zelenou. Sloupek má třídu .sloupek, to je jasné z obrázku. Kouzlo na zápis zelených odkazů uvnitř sloupku vypadá takto:
.sloupek a:link {color: blue;} /* nenavštívený */
.sloupek a:visited {color: navy;} /* navštívený */
Všimněte si prosím, jak přesně je to před tou chlupatou závorkou zapsáno (tomu před závorkou se říká selektor). Je tam mezera. Mezera v selektoru znamená něco jako "obsahující uvnitř". Takže se to dá číst jako "tag <a> uvnitř prvku třídy sloupek".
Pro pokročilejší
Kdo CSS trochu chápete, tomu jenom připomenu, jak v blogu na lide.cz zacházeno se stylopisy. Na začátku stránky jsou pomocí tagů link připojeny stylopisy dva
- jeden výchozí stylopis, to je ten strakatý hurá design
- druhý uživatelský stylopis, to je to, co musíte vytvořit. Tvorba tohoto stylopisu probíhá vlastně na serveru.
Jinak řečeno, v prvním stylopisu, který můžete najít na adrese http://1.im.cz/l/css/blog.css, jsou prvkům nadefinovány nějaké vlastnosti, které ve svém stylopisu musíte přetlouct (naštěstí máte ten druhý stylopis, který má vyšší prioritu). Je dobré si tenhle první styl stáhnout a podívat se na něj (například v programu Poznámkový blok), protože je z něj dost vidět.
Pozicování sloupku
Hlavně si dejte bacha na pozicování sloupku a příspěvků. Sloupek je dělaný tak, že je přes absolutní pozici odsunut odleva na 100% a potom přes záporný margin-left posunut zpátky kousek doprava. Chcete-li sloupek pozicovat jinak, musíte mu nastavit nejen jiný left a top, ale hlavně nulový (nebo jiný) margin-left.
Quirk mód
Celá stránka se styluje v nestandardním režimu zpětné kompatibility, v tzv. quirk módu. Ten podle doctype automaticky přebírá Explorer i Opera. V defaultním stylu je naštěstí nastaveno
* {-moz-box-sizing: border-box}
takže Mozilla vykresluje také podle nestandardního box-modelu, a tak stránka vypadá všude stejně.
Problém je pouze s velikostí písem -- tady Opera vždycky kreslí o stupínek větší písmo než Mozilla (a nedá se to ohackovat). Jediné řešení, aby to bylo ve všech prohlížečích stejné, je nastavit všechny velikosti písem v procentech (v nouzi v pixelech). Více informací o módech prohlížečů.
Hromadné brutální úpravy
Dejme tomu, že budu chtít zrušit barvu pozadí všech prvků a nastavit ji na bílou.
* {background-color: white !important;}
Takže:
- hvězdička * znamená, že to je pro všechny prvky na stránce
- background-color znamená barvu pozadí
- white je bílá, prostě barva
- !important znamená, že to bude fungovat, i kdyby to v předchozím výchozím stylu bylo nadeklarováno jinak. On ten selektor * má totiž dost slabou prioritu, takže by se to bez !important možná nechytlo.
Nebo třeba zrušení všech rámečků:
* {border: none !important;}
Proč je to tak složité?
Ty zápisy, které zde popisuji, jsou v jazyce CSS. CSS je moderní, standardní a dnes prakticky jediný vývojářský nástroj pro tvorbu vzhledu stránek. Pokud se někdy budete věnovat tvorbě vlastních stránek (o tom je celý tento web), tak se vám znalost CSS bude hodně moc hodit.
Jak do stránky dostanu skript?
Přes HTML sloupek. V levém menu je Nastavení a tam se pak dá pastnout libovolný HTML kód, který na té stránce pak bude. Jinak se ovšem HTML kód stránky ovlivňovat nedá.
Nebo hudbu
Taky tam. Od toho je tag bgsound. Ale nedělejte to, je to lameřina.
A jak svoje logo?
To se dělá někde v Nastavení blogu, odkaz je v levém menu. Blbé je, že ten obrázek už musíte mít obrázek někde na webu. Ale logo se dá také vložit přes fotogalerii a pak kliknutím pravým a vlastnostmi zjistit jeho adresu, která se zadá do formuláře.
A svoje obrázky?
Zadejte si obrázky do své fotogalerie (odkaz v levém menu), nejčastěji asi do sekce "neveřejné". Při psaní příspěvku tam potom vpravo máte ikonku "obrázek z fotogalerie".
Máte dotazy?
Tak mně je fakt neposílejte, jestli můžu prosit. Mám na práci zajímavější věci. Zkuste si na toto téma prosím najít třeba nějakou diskusi. Díky za pochopení.
Spoustu toho najdete také na tomto webu, zejména v sekci věnované CSS stylům.
Tato stránka vznikla někdy v roce 2003 a byla aktuální asi do roku 2008.
Reklama
