Ušla su zadnja preostala zaglavlja! Sada ih možemo dovršiti i obaviti sva prilagođena zaglavlja. U ovom screencast-u radit ćemo na prilagođenim zaglavljima za demo odjeljak koje je radio John Neiner.
Zanimljivo je da je John bio jedini ilustrator koji je pružio umjetnička djela u Illustratoru. To nam je lijepo u ovom slučaju jer ga možemo u punoj kvaliteti prilagoditi na bilo koju potrebnu veličinu. Retrospektivno, vjerojatno smo ga trebali ostaviti vektor (kao SVG) i možda upotrijebiti rezervni raster. Ali u ovom screencast-u istražujemo različite mogućnosti spremanja rastera i na kraju koristimo JPG.webp.
Došlo je do neke spasonosne zbrke u kojoj nisam uspio pronaći spremljenu datoteku jer sam tražio pogrešno ime. DUH situacija u stvarnom svijetu.
Zatim uskačemo u WordPress i ponavljamo postupak pripreme predložaka za oblikovanje. Pazimo da demonstracijske stranice učitavaju posebnu CSS datoteku samo za njih. To znači dodavanje logike u našu datoteku header.php ( is_page_template()). Pronašli smo ispravan predložak za demonstracijsko područje (pomoću klasičnog testa gdje smo napravili očitu promjenu u predlošku i vidjeli ga kako se odražava na stvarnoj web stranici.
Iz tog predloška uklanjamo sve staro smeće i dovodimo ga u naš novi stil. Napisujemo malo oznaka potrebnih da bi stranica bila u mreži i imala područje zaglavlja samo za ovo novo prilagođeno zaglavlje i sve to.
Na kraju primjenjujemo našu prilagođenu grafiku zaglavlja kao pozadinsku sliku na element omota s dovoljno obloga na vrhu (na temelju postotka) da stane na gornju grafiku (veličine da stane). Čak stavljamo i gradijent iza slike koja iz duboko zelene prelazi u crnu, tako da izgleda kao da ulazite dublje u ocean dok se pomičete prema dolje.
Na ovoj stranici ima još posla, ali zaglavlje smo napravili i predložak je u dobroj formi!