# 146: The Lodge'i kohandatud päis - CSS-trikid

Anonim

Viimases ekraanipildis haarasime selle foto iStockPhoto'st lumega kajutist ja metsast. Heitsime selle taustale, meie Photoshopi dokumendi peamise sisuala ja küljeriba taha ja see mahtus sinna kenasti, nagu saidi teiste piirkondade päised. Stsenaariumide vahel kirjutasin lehele ka ühe eksemplari. Ma oleksin tahtnud seda skriinida, kuid koopia kirjutamine on üks neist asjadest, mis lihtsalt võtab kaua aega ja on isegi peenem kui disaini näpistamine. Me räägime sellest siiski natuke.

Photoshopis "peitsin" puude taha teksti "The Lodge", pisut varjatud pildi maskeerimisega. Ma ei teinud sellest ülimalt detailset tööd, kuid tegelikult ei pea te seda tegema, kui teid sisse suumitakse ja ka veebi pilti vähendatakse.

Koostame unikaalse lehemalli just sellele lehele (page-lodge.php). Kui kasutate PHP kommentaaride kokkulepet /* Template Name: The Lodge */, kuvatakse see mall WordPressis uue lehe loomisel meie lehemalli rippmenüüs. See annab meile kogu vajaliku kontrolli. Saame selles mallis HTML-i redigeerida ja kui vajame selle lehe jaoks ainulaadset CSS-i, saame kasutada tingimuslikku loogikat ja linkida selle failis header.php. Tagantjärele on mõttekam kasutada faili function.php ainulaadse CSS-i sidumiseks, et hoida vaade (header.php) puhtam, kuid see on järgmine kord.

Selle päise taustagraafikat nimetatakse "kangelasgraafikaks" - see tähendab suureks (sõna otseses mõttes ja suuruses) graafikaks, mis on oluline lehe välimuse / tunde / sisu jaoks. Kuna me püüame vastutada jõudluse eest (tahame, et saiti laaditaks kiiresti), ei tohiks me seda hiiglaslikku graafikat väikestele ekraanidele pakkuda. CSS-is on see palju lihtsam kui HTML-is. Me kasutame oma “reverso” meediapäringuid ( min-widthselle asemel max-width), et öelda “kui ekraan on lai või lai, kasutage seda graafikat ... kui see on veelgi laiem, kasutage seda graafikat” ja nii edasi. Nii kasutatakse vaikimisi ainult kõige väiksemat pilti, kuid see tühistatakse, kui laiem brauser lehte taotleb. Natuke mobiilimõtteid seal.

Lõpuks on meil kena lõuend (kui soovite), mille kallal kõigil The Lodge'i lehtedel töötada.