Prišli posledné zvyšné hlavičky! Teraz ich môžeme dokončiť a nechať si urobiť všetky naše vlastné hlavičky. V tomto obrazovom videu budeme pracovať na vlastných hlavičkách sekcie Demo, ktoré vytvoril John Neiner.
Je zaujímavé, že John bol jediný ilustrátor, ktorý poskytol umelecké diela v aplikácii Illustrator. To je pre nás v tomto prípade príjemné, pretože ich môžeme v plnej kvalite zväčšiť na ľubovoľnú veľkosť, ktorú potrebujeme. Pri spätnom pohľade by sme to pravdepodobne mali nechať ponechali vektor (ako SVG) a možno použiť záložný raster. Ale v tomto screencaste preskúmame rôzne možnosti ukladania rastrov a nakoniec pôjdeme do JPG.webp.
Došlo k určitému zmätku v ukladaní, keď som uložený súbor nemohol nájsť, pretože som hľadal nesprávne meno. Skutočná situácia DUH v reálnom svete.
Potom skočíme do WordPressu a opakujeme náš proces prípravy šablón na úpravu štýlu. Zaisťujeme, aby ukážkové stránky načítali špeciálny súbor CSS práve k nim. To znamená pridať logiku do nášho súboru header.php ( is_page_template()). Nájdeme správnu šablónu pre ukážkovú oblasť (pomocou klasického testu, kde urobíme zjavnú zmenu v šablóne a uvidíme ju odrážajúcu sa na skutočnom webe.
Z tejto šablóny odstránime všetky staré odpadky a upravíme ich do nášho nového štýlu. Napíšeme trochu značenia potrebného na to, aby bola stránka v mriežke a mala oblasť hlavičky iba pre túto novú vlastnú hlavičku a tak ďalej.
Nakoniec použijeme našu vlastnú grafiku hlavičky ako obrázok na pozadí na obalový prvok s dostatočnou výplňou na vrchu (založené na percentách), aby sa zmestil na vrchnú časť grafiky (veľkosť sa zmestila). Dokonca sme vložili gradient za obraz, ktorý vybledne zo tmavozelenej do čiernej, takže to vyzerá, akoby ste sa pri posúvaní nadol dostali hlbšie do oceánu.
Na tejto stránke je ešte veľa práce, ale dostali sme sa do hlavičky a šablóny v dobrom stave!