De laatst overgebleven headers zijn binnen! We kunnen deze nu afmaken en al onze aangepaste headers laten doen. In deze screencast werken we aan de aangepaste headers voor de demo-sectie van John Neiner.
Interessant genoeg was John de enige illustrator die het artwork in Illustrator leverde. Dat is in dit geval prettig voor ons, omdat we het kunnen opschalen tot elke gewenste maat met volledige kwaliteit. Achteraf gezien hadden we het waarschijnlijk vector moeten laten (als SVG) en misschien een raster-fallback moeten gebruiken. Maar in deze screencast verkennen we de verschillende opties voor het opslaan van rasters en eindigen we met JPG.webp.
Er was enige verwarring bij het opslaan, waarbij ik het opgeslagen bestand niet kon vinden omdat ik naar de verkeerde naam zocht. DUH-situatie in de echte wereld.
We springen dan in WordPress en herhalen ons proces om sjablonen klaar te maken voor stijl. We zorgen ervoor dat de demopagina's alleen voor hen een speciaal CSS-bestand laden. Dat betekent dat we logica moeten toevoegen aan ons header.php-bestand ( is_page_template()). We vinden de juiste sjabloon voor het demogedeelte (met behulp van een klassieke test waarbij we een voor de hand liggende wijziging in de sjabloon aanbrengen en deze weerspiegeld zien op de echte site.
We halen al het oude afval uit dat sjabloon en brengen het in onze nieuwe stijl. We schrijven een beetje opmaak die nodig is om de pagina in een raster te hebben en een koptekstgebied alleen voor deze nieuwe aangepaste koptekst en zo.
Uiteindelijk passen we onze aangepaste headerafbeelding toe als achtergrondafbeelding op een wrapper-element met voldoende opvulling aan de bovenkant (op percentage gebaseerd) om de afbeelding bovenaan te passen (formaat om te passen). We hebben zelfs een verloop achter het beeld geplaatst dat vervaagt van diepgroen naar zwart, zodat het lijkt alsof je dieper in de oceaan raakt terwijl je naar beneden scrolt.
Nog meer werk te doen op deze pagina, maar we hebben de koptekst gedaan en de sjabloon in goede staat!