5 super jednoduchých kódů CSS, které vám pomohou přizpůsobit vaše stránky WordPress
CSS je těžké!
Zní to jako něco, co byste mohli říct? Nebyli byste sami. CSS (neboli kaskádový styl) je kódovací jazyk, s nímž je někdy těžké se vypořádat.
Říci však, že CSS je těžké, je poněkud kruté. Jako každý jazyk, i CSS může být zpočátku trochu složitý na pochopení, ale jakmile pochopíte základy, věci začnou zapadat na své místo.
Nejlepším způsobem, jak se naučit CSS, je pochopit, co to je a jak funguje. Pak se můžete naučit několik základních úryvků kódu, které vám pomohou toto počáteční pochopení trochu lépe uchopit, a v mžiku budete moci začít navrhovat!
Náš příspěvek se právě o to pokusí.
Co je CSS?
Jistě, CSS znamená Cascading Style Sheet, ale to vám řekne každý. To vám ale moc nepomůže, že?“
Je nějaký jednodušší způsob, jak pochopit, co to je.
Představte si jazyk HTML jako kostru domu a CSS jako nátěr zvenčí. Když natřete obložení domu nebo obarvíte přední terasu, změní se tím samotný rám domu?
Ne, nezmění. Místo toho pouze mění vzhled věcí. Základ a kostra domu zůstávají stejné.
To je to, co je CSS.
Změní vzhled vaší stránky, ale nenaruší její základ nebo jádro.
Každý dům má na sobě barvu. Každé téma WordPressu používá CSS.
Spolupracují na tvorbě webu a vy můžete pomocí několika poměrně jednoduchých úryvků kódu CSS změnit tento takzvaný „nátěr“ svého tématu.
Ve skutečnosti budete možná překvapeni, jak je to snadné.
Jednoduchá úprava CSS první: Úprava typu písma a rychlá lekce psaní kódu
Při použití tématu, jako je framework Genesis, je třeba změnit něco tak jednoduchého, jako je písmo použité na webu, pomocí kódu CSS. Ale nebojte se. Opravdu to není tak těžké.
Chcete-li v šabloně provést jakékoli změny CSS, budete nejprve potřebovat vlastní oblast CSS, kde tyto úpravy provedete. Neměňte tabulku stylů, která je součástí vašeho tématu.
Na místo toho použijte zásuvný modul, například možnost Vlastní CSS, která se načítá v aplikaci Jetpack. Veškeré úpravy CSS, které v něm provedete, přepíší přednastavené CSS vašeho tématu.
Předtím, než budete moci upravovat písmo, musíte zjistit, kterou oblast chcete upravovat.
Existuje 7 hlavních oblastí, ve kterých můžete písmo upravovat:
- Všech 6 typů nadpisů
- Tělové písmo
Značky pro tyto oblasti jsou jednoduché. Chcete-li například upravit písmo nadpisu 1, které se zobrazuje na vašich stránkách, použijete značku h1. Pokud byste chtěli změnit písmo nadpisu 2, tag by byl, h2 a tak dále.
Tady je příklad, jak napsat kód CSS pro změnu písma nadpisu 1:
h1 { font-family: 'Georgia'; }
Teď je pravda, že byste to mohli zkusit zkopírovat a vložit, ale chci, abyste lépe pochopili, jak to vlastně funguje.
První napsaná část (h1) je předmět, který chcete změnit. Tento symbol ({ ) otevírá váš řádek kódu a tento ( } ) ho uzavírá.
Okay, okay.
Tohle asi pořád zní zmateně, ale když jsem se učil CSS, naučil jsem se užitečný trik, jak si zapamatovat, jak správně psát CSS. Třeba takto:
h1 {otevře dveře od své skříně
Hledá něco, do čeho by se převlékl: ‚Najde, co chce‘;
A pak zavře dveře}
Zpět k tématu; zde je další příklad, jak můžete provádět změny písma.
body { font-family: 'Arial'; }
Změnou elementu z h1 na body jsem nyní řekl stylovému souboru, že chci změnit písmo těla, které se zobrazuje v příspěvcích a na stránkách, na písmo Arial.
To je docela jednoduché, že?
Pokud vaše téma podporuje písma Google, můžete na svých stránkách používat i písma odtamtud.
Druhá jednoduchá úprava CSS: Úprava barvy písma
Tento malý trik CSS je pěkný způsob, jak změnit barvu písma menu nebo barvu písma těla. Stejně jako u výše napsaných úryvků kódu stačí pár krátkých řádků kódu, aby se věci opravdu změnily.
Řekněme, že chci změnit barvu písma nadpisu 2 na jinou. Mohu to udělat tak, že budu postupovat podle podobné osnovy, jakou jsme dělali předtím (pamatujete si ten příběh?), ale s tím, že hlavní řádky kódu trochu pozměním. Takto:
h2 { color: #4f4f4f; }
Všimněte si, že předmět je definován jako h2 a stále máme otevírací a uzavírací značky ({}), nicméně způsob zápisu kódu je trochu jiný než výše, kdy jsme psali kód pro změnu písma.
Na rozdíl od písma, které bylo třeba uzavřít závorkami, (‚ ‚) to prvek hexabarva nepotřebuje.
Nyní nemusíte psát kód pro stejný předmět stále dokola, abyste změnili některé jeho aspekty. Kód pro tentýž předmět můžete kombinovat, abyste v budoucnu mohli snadněji vyhledávat a měnit věci. Můžete například zkombinovat Font a Font Color do jednoho řádku kódu.
body { font-family: 'Roboto'; color: #4f4f4f; }
Vidíte, jak jsem to udělal?
Uvnitř tohoto jednoho řádku předmětu mám dva řádky kódu. Když potřebujete provést více změn v jednom předmětu, vypsání kódu tímto způsobem vám ušetří čas. Jen nezapomeňte tyto jednotlivé řádky kódu uzavřít středníkem (;), než přejdete na další řádek.
poznámka: abyste si to lépe zapamatovali, představte si středník jako tečku na konci věty. Nikdy neukončujte větu bez tečky. Nikdy neukončujte řádek kódu je CSS bez středníku.
Třetí jednoduchá úprava CSS: Barva pozadí a nástroj prohlížeče, o kterém jste ani nevěděli, že ho máte
Úprava barvy některých věcí na vašem webu je dalším velmi jednoduchým trikem CSS. Stačí znát prvek nebo předmět, který chcete změnit.
Šikovným nástrojem, který používá mnoho návrhářů – včetně mě – je nástroj Inspect Element v našem prohlížeči Google. I ten je úžasný, když se snažíte najít ten správný subjekt, který chcete změnit a definovat.
Chcete-li ho najít, stačí dvakrát kliknout myší, čímž se zobrazí možnosti, jak vidíte níže. Zvolte možnost Prověřit prvek a nyní můžete prohledat upravitelné prvky svých webových stránek.
Vidíte tento obrázek?
Mám jednu položku nabídky zvýrazněnou jinou barvou než zbytek nabídky, aby stála. K tomu jsem použil nástroj Inspect Element Tool, abych zjistil správný název, který mám upravit.
Nyní, když budu přejíždět po položkách menu, se mi ve zvýraznění objeví skutečný kódový název, který je uveden. Ten, který měním, měl název: #menu-item-473 (Ve žlutém rámečku vidíte, že se tak jmenuje. Jeho název je zvýrazněn modře)
To je název předmětu, který jsem chtěl změnit. Chci-li změnit barvu pozadí tohoto předmětu nabídky, začnu řádek jeho názvem a prohlásím, že chci změnit pozadí, takto:
#menu-item-473 { background-color: #D65050; }
Znovu začnu tím, že Stylesheetu řeknu předmět, který chci změnit (#menu-item-473), a pak mu řeknu, co má změnit (barvu pozadí) a na co ji má změnit (#D65050).
Cokoli se rozhodnete změnit na pozadí, bude mít jiný název než tento, ale naštěstí vám možnost Inspect Element v prohlížeči usnadní jeho nalezení.
Další úžasnou věcí na nástroji Google Inspect Element Tool je to, že můžete v reálném čase upravovat věci tak, aby byly správně, a pak můžete veškerou práci na úpravách odtud zkopírovat a vložit do svého CSS Custom Style Sheet.
Jednoduché úpravy CSS čtyři:
Někdy je příjemné mít možnost udělat s primárním menu nebo předdefinovanými widgety na webu něco trochu jiného. Možná byste chtěli vzít, jednu položku menu a umístit ji více vpravo než u ostatních položek, podobně jako jsem to udělal s menu na obrázku výše. (Na obrázku níže také na celou šířku.)
K tomu můžete použít úryvek kódu Float. Stejně jako v předchozích krocích byste měli použít nástroj Inspect Element Tool a najít název předmětu, který chcete změnit. Ten na obrázku je stejný jako výše uvedený. (#menu-item-473)
Aby se tento prvek přesunul, ale aby stále vypadal hezky na obrazovce mobilního telefonu, napsal jsem tento kód:
#menu-item-473 { background-color: #D65050; float: right; }
Bylo to vážně tak snadné. Nyní mám položku nabídky, která vyniká, což jsem potřeboval. Tento postup můžete použít i na jiné věci než na položky menu.
Příklad pokud máte widget, který byste chtěli přemístit, můžete použít úryvek kódu float: right; nebo float: left; a změnit tak místo, kde se váš widget zobrazuje.
Čím déle si s ním hrajete, tím je používání CSS jednodušší.
Pět jednoduchých úprav CSS: Zarovnání textu
Zarovnání textu je něco, co můžete udělat v příspěvku, jistě. Ale co třeba nadpisy widgetů nebo něco podobného?
Pro snadné zarovnání textového nadpisu widgetu můžete použít tento kód CSS.
Pro své webové stránky používám framework Genesis a k zarovnání nadpisů widgetů mi stačil tento kód:
.footer-widgets .widget-title { text-align: center; }
Název prvku nebo předmětu ve vašem tématu se může od tohoto mírně lišit, ale představu máte.
Tento malý kód mi zajistí, že text v nadpisech widgetů patičky bude vycentrovaný, a protože prohlašuji .footer-widgets společně s .widget-title, budou vycentrované pouze nadpisy patičky.
Tak to je vše! 5 superjednoduchých způsobů, jak můžete upravit své téma pomocí CSS! CSS je jako každý jiný jazyk. Zpočátku je to těžké, ale jakmile překonáte ten počáteční hrb pochopení, je to hračka.