AnvÀnd CSS Sprites för att försköna dina WordPress-inlÀggsdatum

AnvÀnd CSS Sprites för att försköna dina WordPress-inlÀggsdatum

Har du nÄgonsin undrat hur du superstilerar din bloggs inlÀggsdatum? Jag kommer att visa dig hur du gör det med CSS sprites pÄ cirka 18 minuter.

Redaktionella anmÀrkningar: Detta inlÀgg Àr inriktat pÄ temadesigners. Förkunskaper om CSS och WordPress rekommenderas.

Vad du kommer att behöva:

Ett grafikprogram (jag anvÀnder Adobe Photoshop CS4) En enkel textredigerare

Vad du kommer att uppnÄ i denna handledning:

Datumen pÄ din bloggs inlÀgg kommer att vara superformade med CSS Sprites

LĂ„t oss börja


Steg 1

Starta ditt grafikprogram. Du kan ladda ner en PSD- eller PNG-mall för att hjÀlpa till med layouten för alla datum i vÄr Sprite.

Steg 2

I grund och botten vill du skapa ett rutnĂ€t med mĂ„nader, dagar och Ă„r. Som du kan se har mitt rutnĂ€t mĂ„naderna i en kolumn sedan dagarna i tvĂ„ kolumner och slutligen Ă„ren vertikalt i en kolumn. NĂ€r du har fĂ„tt dina datum pĂ„ “rutnĂ€tet” kan du spara filen. Tips: Se till att din text Ă€r lika fördelad frĂ„n topp till botten och frĂ„n vĂ€nster till höger. Detta gör matematiken enklare nĂ€r varje datum har samma vita utrymme.

Steg 3

PĂ„ kodningen … Oroa dig inte, det Ă€r vĂ€ldigt enkelt, speciellt om du anvĂ€nder min PNG eller har anvĂ€nt PSD-filen (Den innehĂ„ller riktlinjer för att hĂ„lla ditt “rutnĂ€t” snyggt plus att du sedan kan klippa och klistra in CSS-koden i detta steg direkt in i teman, utan matematik.)

CSS Àr som följer:

/ * Datum Sprite * /
.postdate {
position: relativ;
bredd: 66px;
höjd: 60px;
flyta till vÀnster;
}
.mÄnad dag Är {
position: absolut;
textindrag: -1000em;
bakgrundsbild: url (bilder / datum_img.png);
bakgrundsupprepning: ingen upprepning;
}
.month {topp: 10px; vÀnster: 0; bredd: 33px; höjd: 30px;}
.dag {topp: 30px; vÀnster: 0; bredd: 33px; höjd: 30px;}
.Är {botten: 0; höger: 13px; bredd: 20px; höjd: 60px;}

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

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

.y-2009 {bakgrundsposition: -150px 0;}
.y-2010 {bakgrundsposition: -150px -60px;}
.y-2011 {bakgrundsposition: -150px -120px;}
.y-2012 {bakgrundsposition: -150px -180;}
.y-2013 {bakgrundsposition: -150px -240px;}
.y-2014 {bakgrundsposition: -150px -300px;}

Förklaring:

.postdate – StĂ€ller in bredden och höjden pĂ„ hela datumet. I det hĂ€r fallet kommer vi att fĂ„ vĂ„rt datum att passa in i en ruta 66px med 60px.

.mĂ„nad dag Ă„r – StĂ€ller in bredden och höjden pĂ„ de enskilda elementen som utgör hela vĂ„r date Sprite VĂ„ra mĂ„nader och dagar Ă€r 33 pixlar breda 30 pixlar höga. Åren Ă€r 33 pixlar breda och 60 pixlar höga. NĂ€r du sĂ€tter ihop dessa element gör de en ruta 66px bred och 60px hög. Den bifogar ocksĂ„ bilden som vi gjorde i steg 1 sĂ„ att vi kan placera den för varje enskilt element i Sprite.

.m-01 till och med .m-12 – Du gissade det! Det hĂ€r Ă€r vĂ„ra mĂ„nader. Denna del av CSS placerar vĂ„r grafik sĂ„ att den visar mĂ„naderna. Som du kan se stĂ€ller jag in bilden pĂ„ en XY-axel baserat pĂ„ var den syns pĂ„ bilden. Det enklaste sĂ€ttet att ta reda pĂ„ var det övre vĂ€nstra hörnet (0,0) för varje mĂ„nad, dag eller Ă„r Ă€r pĂ„ den större bilden Ă€r att öppna Photoshop och vĂ€lja markeringsverktyget. VĂ€lj lĂ€ngst upp till vĂ€nster och över till höger till precis ovanför det övre vĂ€nstra hörnet av din mĂ„nad, dag eller Ă„r och notera var din pekare anvĂ€nder informationspanelens statistik.

.d-01 till och med .d-31 – AnvĂ€nds för exakt samma sak som .m-01 – .m-12 utom de anvĂ€nds för dagarna snarare Ă€n mĂ„naderna.

.y-2009 till och med .y-2014 – Samma som ovan bara vi anvĂ€nder dem under Ă„ren.

Steg 4

Öppna slingan i WordPress. Slingan i WordPress Ă€r den eller de sidor som visar dina blogginlĂ€gg. Detta Ă€r vanligtvis index.php-sidan. Datum visas ocksĂ„ pĂ„ andra sidor men den hĂ€r sjĂ€lvstudien ersĂ€tter bara datumen i huvudslingan. Om du kom till det hĂ€r avsnittet i handledningen Ă€r du tillrĂ€ckligt intelligent för att söka och ersĂ€tta andra instanser av datum i ditt tema i andra filer som single.php, page.php, archives.php etc.

Sök efter nÄgot i den hÀr linjen:

ErsÀtt med dessa rader: