De siste gjenværende topptekstene har kommet inn! Vi kan nå fullføre disse og få gjort alle våre tilpassede overskrifter. I denne skjermsendingen jobber vi med de tilpassede overskriftene for Demo-delen utført av John Neiner.
Interessant nok var John den eneste illustratøren som leverte kunstverket i Illustrator. Det er hyggelig for oss i dette tilfellet fordi vi kan skalere det til hvilken størrelse vi trenger i full kvalitet. I ettertid burde vi sannsynligvis ha forlatt den vektoren (som SVG) og kanskje brukt en raster-reserve. Men i denne skjermsendingen utforsker vi de forskjellige rasteralternativene og ender med å gå med JPG.webp.
Det var noe lagringsforvirring der jeg ikke kunne finne den lagrede filen fordi jeg lette etter feil navn. Virkelig verden DUH situasjon.
Vi hopper inn i WordPress og gjentar prosessen for å gjøre maler klare til stil. Vi sørger for at demosidene laster en spesiell CSS-fil bare til dem. Det betyr å legge til logikk i header.php-filen ( is_page_template()). Vi finner riktig mal for demoerområdet (ved hjelp av en klassisk test der vi gjør en åpenbar endring av malen og ser den gjenspeiles på det virkelige nettstedet.
Vi fjerner alt gammelt søppel fra den malen og tar det opp til vår nye stil. Vi skriver litt markering som er nødvendig for at siden skal være i et rutenett og ha et topptekstområde bare for denne nye tilpassede overskriften og alt det der.
Vi bruker til slutt vår egendefinerte topptekstgrafikk som bakgrunnsbilde på et innpakningselement med nok polstring på toppen (prosentvis basert) for å passe grafikken oppe (størrelse for å passe). Vi legger til og med en gradient bak bildet som falmer fra dypgrønt til svart, så det ser ut som om du blir dypere i havet når du ruller nedover.
Mer arbeid å gjøre på denne siden, men vi fikk overskriften og malen i god form!