Bruk CSS Sprites til å forskjønne dine WordPress-postdatoer

Noen gang lurt på hvordan du superstil bloggens innleggsdato? Jeg skal vise deg hvordan du gjør dette ved hjelp av CSS sprites i ca 18 minutter.

Redaksjonell Merk: Dette innlegget er rettet mot tema designere. Forkunnskaper om CSS og WordPress anbefales.

Hva du trenger:

• Et grafikkprogram (jeg bruker Adobe Photoshop CS4)
• En enkel tekstredigerer

Hva du vil oppnå i denne opplæringen:

• Datoen på blogginnleggene dine vil bli superformet ved hjelp av CSS Sprites

La oss komme i gang…

Trinn 1

Brann opp grafikkprogrammet ditt. Du kan laste ned en PSD- eller PNG-mal for å hjelpe med utformingen av alle datoene i vår Sprite.

Steg 2

I utgangspunktet vil du opprette et rutenett ved hjelp av måneder, dager og år. Som du kan se, har rutenettet månedene i en kolonne så dagene i to kolonner og til slutt årene vertikalt i en kolonne. Når du får datoene dine på "grid", kan du lagre filen. Tips: Pass på at teksten er like spredt fra topp til bunn og fra venstre til høyre. Dette gjør matte lettere når hver dato har samme hvite plass.

Trinn # 3

På på kodingen ... Ikke bekymre deg for det er veldig enkelt, spesielt hvis du bruker PNG-en eller har brukt PSD-filen (Den inneholder retningslinjer for å holde "gridet ditt" pent og pent, pluss at du kan klippe og lime inn CSS-koden i dette trinnet går direkte inn i temaer stilark uten matematikk.)

CSS er som følger:

/ * Dato Sprite * /
.post dato
stilling: relativ;
bredde: 66px;
høyde: 60px;
flyte: venstre;

.måned dag år
posisjon: absolutt;
tekstindeks: -1000em;
bakgrunnsbilde: url (images / date_img.png);
bakgrunn-gjentak: ikke-gjenta;

.måned topp: 10px; venstre: 0; bredde: 33px; høyde: 30px;
.dag topp: 30px; venstre: 0; bredde: 33px; høyde: 30px;
.år bunn: 0; høyre: 13px; bredde: 20px; høyde: 60px;

.m-01 bakgrunnsposisjon: 0 0px;
.m-02 bakgrunnsposisjon: 0 -30px;
.m-03 bakgrunnsposisjon: 0 -62px;
.m-04 bakgrunnsposisjon: 0 -94px;
.m-05 bakgrunnsposisjon: 0 -125px;
.m-06 bakgrunnsposisjon: 0 -155px;
.m-07 bakgrunnsposisjon: 0 -185px;
.m-08 bakgrunnsposisjon: 0 -217px;
.m-09 bakgrunnsposisjon: 0 -248px;
.m-10 bakgrunnsposisjon: 0 -279px;
.m-11 bakgrunnsposisjon: 0 -310px;
.m-12 bakgrunnsposisjon: 0 -341px;

.d-01 bakgrunnsposisjon: -51px 0;
.d-02 bakgrunnsposisjon: -51px -27px;
.d-03 bakgrunnsposisjon: -51px -57px;
.d-04 bakgrunnsposisjon: -51px -91px;
.d-05 bakgrunnsposisjon: -51px -122px;
.d-06 bakgrunnsposisjon: -51px -151px;
.d-07 bakgrunnsposisjon: -51px -185px;
.d-08 bakgrunnsposisjon: -51px -214px;
.d-09 bakgrunnsposisjon: -51px -249px;
.d-10 bakgrunnsposisjon: -51px -275px;
.d-11 bakgrunnsposisjon: -51px -309px;
.d-12 bakgrunnsposisjon: -51px -338px;
.d-13 bakgrunnsposisjon: -51px -373px;
.d-14 bakgrunnsposisjon: -51px -404px;
.d-15 bakgrunnsposisjon: -51px -436px;
.d-16 bakgrunnsposisjon: -51px -462px;
.d-17 bakgrunnsposisjon: -100px -0px;
.d-18 bakgrunnsposisjon: -100px -27px;
.d-19 bakgrunnsposisjon: -100px -57px;
.d-20 bakgrunnsposisjon: -100px -91px;
.d-21 bakgrunnsposisjon: -100px -122px;
.d-22 bakgrunnsposisjon: -100px -151px;
.d-23 bakgrunnsposisjon: -100px -185px;
.d-24 bakgrunnsposisjon: -100px -214px;
.d-25 bakgrunnsposisjon: -100px -249px;
.d-26 bakgrunnsposisjon: -100px -275px;
.d-27 bakgrunnsposisjon: -100px -309px;
.d-28 bakgrunnsposisjon: -100px -338px;
.d-29 bakgrunnsposisjon: -100px -373px;
.d-30 bakgrunnsposisjon: -100px -404px;
.d-31 bakgrunnsposisjon: -100px -436;

.y-2009 bakgrunnsposisjon: -150px 0;
.y-2010 bakgrunnsposisjon: -150px -60px;
.y-2011 bakgrunnsposisjon: -150px -120px;
.y-2012 bakgrunnsposisjon: -150px -180;
.y-2013 bakgrunnsposisjon: -150px -240px;
.y-2014 (bakgrunnsposisjon: -150px -300px;

Forklaring:

.post dato - Angir bredde og høyde på hele datoen. I dette tilfellet skal vi gjøre datoen vår i en boks 66px med 60px.

.måned dag år - Angir bredden og høyden til de enkelte elementene som utgjør hele vår Sprite-dato. Våre måneder og dager er 33px bred ved 30px høy. Årene er 33px bred ved 60px høye. Når du legger disse elementene sammen, lager de en boks 66px bred med 60px høy. Det legger også til grafikken vi laget i trinn # 1, slik at vi kan plassere den for hvert enkelt element i Sprite.

.m-01 til .m-12 - Du gjettet det! Dette er våre måneder. Denne delen av CSS posisjonerer grafikken vår for å vise månedene. Som du kan se, setter jeg bildet på å flytte på en X Y-akse basert på hvor den vises på bildet. Den enkleste måten å finne ut hvor øverste venstre hjørne (0,0) av hver måned, dag eller år er på større bilde, er å åpne Photoshop og markere markørverktøyet. Velg fra øverste venstre ned og over til høyre til like over øverste venstre hjørne av deg måned, dag eller år og merk deg hvor pekeren bruker informasjonspanelets statistikk.

.d-01 til .d-31 - Brukes for akkurat det samme som .m-01 - .m-12 bortsett fra at de brukes til dagene i stedet for månedene.

.y-2009 gjennom .y-2014 - Samme som ovenfor bruker vi bare dem for årene.

Trinn # 4

Åpne løkken i WordPress. Sløyfen i WordPress er siden (e) som viser dine blogginnlegg. Dette er vanligvis index.php siden. Datoer vises også på andre sider, men denne opplæringen erstatter bare datoene i hovedløkken. Hvis du kom til denne delen av opplæringen, er du intelligent nok til å søke og erstatte andre forekomster av datoer i temaet ditt i andre filer som single.php, page.php, archives.php etc.

Søk etter noe langs denne linjen i loop:

Erstatt med disse linjene:

Trinn # 5

Last opp bildet ditt, CSS og temaene dine (loop.php). Hit oppdateringen på bloggen din (pass på at du er på siden som innlegg vises på) og Voila! Du har bare super stylet dine datoer ved hjelp av CSS sprites.

Todd Santoro er hoved- og sjefdesigner hos hans firma ToddSantoro.com designer. Todd har jobbet på nettet i 11 år og utmerker seg i brukergrensesnitt og grafisk design. Han elsker å ta hensyn til detaljer og utvikle seg på WordPress-rammeverket. Du kan følge ham på Twitter.