CSS pre začiatočníkov #3

Dnes si ukážeme ako naozaj robiť CSS a ako ho upravovať do žiadanej podoby. Popkorn do ruky a ideme na to 🙂 

Kde to mám písať?

Existuje hneď viac možnosti. A keďže tento portál je zameraný na WordPress, budeme sa baviť o tom, kde píšeme CSS v rámci WordPressu. 

Customizer

Jednou z možnosti je písanie do customizeru. Čiže po prihlásení vo wp-admine nájdeme položku vzhľad -> prispôsobiť. Otvorí sa customizer, nájdeme položku Dodatočné CSS

Tu môžeš písať CSS, hoci je to dosť nezgrabné, WordPress našepkáva rozličné vlastnosti, ktoré nechceš a obdobným spôsobom hádže klacky pod nohy. Nemám rád tento štýl zadávania CSS, ale funguje to. 

Výsledok, čiže tebou napísané CSS, sa vypíše do hlavičky každej podstránky štylopisovým spôsobom (viď prvá časť tohto seriálu), čiže nič moc…

style.css aktuálnej témy

Druhá možnosť je o čosi lepšia, CSSko píšeš do súboru style.css aktuálne zvolenej témy. Ideál, ak používaš child template. O tom, čo je child template, napísal náš kolega Mirko Bartik článok na WPblog

A opäť máme dve možnosti

1. Vstavaný wordpress code editor

Jednoducho ideš do Vzhľad -> Editor tém a hneď sa ti otvorí CSS súbor aktuálne používanej témy. Rátaj však s tým, že pokiaľ nemáš child template, všetky tebou napísané CSS kódy po aktualizácií témy zmiznú. 

2. Externá úprava

Externe sa dostaneme k rovnakému kódu cez FTP. Napríklad prostredníctvom programov Total Commander, WinSCP, Filezilla,… prihlásime sa na FTP a v roote zložky navigujeme do

wp-content/themes/moja-tema/style.css 

Otvoríme súbor v editore a píšeme. 

Výhody obidvoch spôsobov sú jasné. Ide o externý zápis CSS, čo je pre nás lepšie. Pokiaľ ide o style.css child témy, tak sa nemusíme báť ani aktualizácií.

Ak používame code editor, čiže spôsob externou úpravou, môžeme využívať naplno aj výhody editora, ako je rýchle hľadanie rovnakých, alebo podobných výrazov v rámci celého CSS súboru, našepkávanie vlastnosti a hodnôt a xy iných vymoženosti. Ja používam Sublime text 3 a na FTP používam Total commander.

Nový vlastný súbor

Je možné aj vytvoriť si úplne nový vlastný súbor, s ľubovoľným menom a koncovkou .css. Väčšinou sa umiestňuje teda v rámci child templaty, ale môže sa umiestniť aj mimo, napr. do pluginu, alebo dokonca do rootu celej zložky (povedľa wp-content, wp-admin a wp-include). Následne WordPressu len cez hook dáme vedieť, že sme pridali nový .css súbor a hodláme ho pridať do flowu generovania stránky. 

				
					add_action( 'wp_enqueue_scripts', 'moj_subor' );

function moj_subor() {
    wp_enqueue_style('unikatne_oznacenie', 'https://adresaksuboru.sk/bla/bla/bla/moj_subor.css');
}
				
			

Adresa musí byť absolútna, alebo relatívna k root zložke wordpressu. Funkcia get_stylesheet_directory_uri() by urobila veľkú časť roboty. Ale o tom možno niekedy nabudúce… 

Každopádne, po tomto kóde sa nám v hlavičke každej podstránky pripojí súbor moj_subor.css a jeho CSS pravidlá sa budú aplikovať na celej stránke. 

Písanie do kadejakých vlastných Custom CSS polí

Mnoho tém a pluginov má niekde vo svojich nastaveniach nejaké vlastné políčko, do ktorého môžeme napísať vlastné CSS. 

Väčšinou ide o jednoduché textové polia, ktoré neohúria ani výkonnosťou, ani zobrazením, nenašepkávajú, nevypíšu chybu, a tak je takáto tvorba CSS celkom o hubu, najmä pre začiatočníka. 

Inokedy však ale kvalita týchto vlastných CSS polí prekonáva očakávania a píše sa to tam fakt dobre. Záleží na konkrétnej téme / plugine. 

Každopádne, pre rýchle a krátke prkotinky, je táto varianta ako stvorená, lebo netreba nikde liezť a nikde nič špekulovať. Proste tam hodíš tie tri riadky CSSka a that’s it. 

Elementor

V Elementore máme možnosť písať jednak globálne CSS, ktoré budú platné pre všetky podstránky, na ktorých sa vyskytuje Elementor a jednak máme možnosť písať CSS priamo k zvolenému elementu. 

Globálne píšeme CSS v globálnych nastaveniach, čiže v Elementor editore klikneme vľavo hore na ikonu hamburgera a hneď prvú položku Nastavenia stránky. Hlavička v editore zmodrie, tak vieme, že sme dobre. Z ľavého sidebaru potom vyberieme predposlednú položku Vlastné CSS a tam to môžeme písať. 

Pre jeden element píšeme CSS tak, že si na ten element klikneme, v ľavom stĺpci prejdeme na tab Pokročilé a posledná položka je Vlastné CSS. Tam môžeme smelo písať CSS vlastnosti, ktoré sa majú týkať len toho jediného elementu. 

Môžeme pri tom používať čarovné slovo selector, ktoré sa nám vo výsledku prekompiluje na jedinečný CSS selektor pre daný element. To sú tie preprocesory, čo som spomínal v prvom diele tohto seriálu. 

Rovnako tak farby môžeme písať ako premenné, aj keď Elementor má celkom vražedné premenné. Systémové farby môžeš písať v tomto štýle

var(–e-global-color-primary),var(–e-global-color-secondary), var(–e-global-color-text), var(–e-global-color-accent)

Samotný harakiri zápis v CSS potom vyzerá asi takto

				
					selector p {
    color: var(--e-global-color-text);
}
				
			

Výhoda je taká, že keď časom budeš chcieť zmeniť systémovú farbu, tak ju proste zmeníš a tá zmena sa ti automaticky preklopí aj do vlastného CSSka. Ak by si tam mal hexadecimál, tak sa to nestane a musíš ho prepísať manuálne. 

No tak, poďme už konečne na to!!!

CSS závisí od HTML

Aby sme mohli písať správne CSS selectory, musíme poznať štruktúru HTML kódu, aby sme selectory vedeli správne podradzovať. 

To by bolo celkom OK, ak by sme si HTML písali vo vlastnej réžií. Bohušťastie však WordPress takto nefunguje a sám od seba nám generuje často dosť pohnojený HTML kód. Ak sa do toho pridajú ešte iné pluginy a témy a pod. býva v HTMLku celkom bordel. 

Na to, aby sme si prezreli aktuálnu štruktúru HTML v toho, čo chceme upravovať, slúžia 

Developer tools

Tie otvoríme v prehliadači na danej stránke tak, že stlačíme tlačidlo F12, alebo, a to je ešte lepšie riešenie, klikneme na vybraný prvok pravým tlačidlom a dáme Preskúmať, alebo niečo v tom duchu (V Google Chrome sa to volá preskúmať – je to posledná položka z ponuky). Tým sa nám otvorí niečo takéto hrôzostrašné

1 Tu si vieme nastaviť spôsob zobrazenia developer tools a ešte nejaké glupoty okolo toho. Osobne preferujem zobrazenie v novom okne, avšak na to je treba mať dva monitory. Pre jeden monitor preferujem zobrazenie dole, tak ako na obrázku, ale je to, samozrejme, na tebe. 

2. Kliknutím na toto tlačidlo sa spustí inspect mode, teda prechádzaním po stránke sa nám rozlične zafarbujú hoverované elementy (čiže tie, nad ktorými prechádzaš myšou), zobrazuje sa ich veľkosť, classy a rozličnými farbami sú naznačené marginy, bordery a paddingy (o tom sa budeme baviť ďalej). Kliknutím na konkrétny element sa zobrazia v stĺpci č.5 jeho CSS pravidlá

3 Týmto tlačidlom sa prepneme do responsive módu a nastavením šírky a výšky v hornom paneli si vieme nasimulovať zobrazenie v mobile, tablete, 4k monitore atď atď

Máme tu dostupných niekoľko kariet, v tejto fáze našich skills nás zaujíma len karta ELEMENTS. Nič iné. 

5 Tento stĺpec napravo vypíše všetky ovplyvňujúce CSS pravidlá, ktoré sa týkajú vybraného HTML elementu

Celá tá hlavná časť, ktorú som zabudol označiť číslom, a v ktorej sú vypísané všetky HTML elementy, spolu s ich hierarchiou, sa nazýva Document Object Model (skrátka DOM).

Keď budeme prechádzať myšou po DOM, jednotlivé elementy nám budú svietiť v prehliadači. 

Najpodstatnejšia je pre nás časť v pravom stĺpčeku (č.5). Tam sa nám ukážu jednotlivé CSS pravidlá pre zvolený element. Celkom hore, pod pojmom element.style sú vlastne vypísané inline pravidlá, čiže druhé najsilnejšie. No a potom už podľa poradia nasledujú všetky ostatné pravidlá. Vpravo hore v každej časti, píše časť názvu súboru, kde sa tieto pravidlá nachádzajú, spolu aj s riadkom (za dvojbodkou). Keď prídeš myšou na nejakú sekciu, zjavia sa tam checkboxy. Kliknutím na checkbox si vieš dané pravidlo zapnúť/vypnúť. Zakomentované pravidlá sa zobrazujú preškrtnuté a aj tie, ktoré vypneš, budú tiež preškrtnuté. Takýmto štýlom si teda vieš nastaviť CSS tak, ako potrebuješ, lebo to rovno vidíš. A tie zmeny, ktoré si vykonal, teraz treba zapísať do tvojho CSS. 

Inline štýly pre vybraný element

Jednotlivé sekcie klasických CSS pravidiel

Názov a umiestnenie súboru, ktoré sa zjaví po prechode myšou, kde sa toto pravidlo nachádza. Číslo za bodkočiarkou znamená riadok, čiže na riadku č.1 (pravdepodobne ten file bude minifikovanný)

4 checkbox, ktorým vypneš/zapneš pravidlo v náhľade stránky

Selector samozrejme môžeš skopírovať do svojho CSS, nič ti nebráni 🙂 

Poďme reálne niečo spraviť

Jedno video povie viac ako tisíc textov 🙂 

Podobné články

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *