Använd CSS Sprites för att förgöra dina WordPress-postdatum

Har du någonsin undrat hur du stämmer överens med bloggens inlägg? Jag ska visa dig hur man gör detta med CSS sprites på cirka 18 minuter.

Redaktionell Anm: Detta inlägg är inriktat mot temat designers. 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:

• Dagen på bloggins inlägg kommer att vara superstilade med CSS Sprites

Låt oss börja…

Steg 1

Släcka ditt grafikprogram. Du kan ladda ner en PSD- eller PNG-mall för att hjälpa till med layouten av 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ånader i en kolumn då dagarna i två kolumner och slutligen åren vertikalt i en kolumn. När du får dina datum på "rutnätet" kan du spara filen. Tips: Se till att texten är lika stor från topp till botten och från vänster till höger. Detta gör matematiken lättare när varje datum har samma vita utrymme.

Steg 3

Fortsätt till kodningen ... Oroa dig inte om det är väldigt enkelt, särskilt om du använder min PNG eller har använt PSD-filen (Det innehåller riktlinjer för att hålla ditt "rutnät" snyggt och snyggt plus att du kan klippa och klistra in CSS-koden i detta steg direkt in i temat stilark utan matte.)

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;
textindelning: -1000em;
bakgrundsbild: url (images / date_img.png);
background-repeat: no-repeat;

.månad 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 (bakgrundsställning: -150px -300px;

Förklaring:

.tiden efter - Ställer in bredden och höjden på hela datumet. I det här fallet kommer vi att göra vårt datum passande i en låda 66px med 60px.

.månad dag år - Ställer in bredden och höjden på de enskilda elementen som utgör hela vårt Sprite-datum. Våra månader och dagar är 33px breda med 30px höga. Åren är 33px breda med 60px höga. När du sätter dessa element tillsammans gör de en låda 66px bred med 60px hög. Den bifogar också den grafik som vi gjort i steg # 1 så att vi kan placera den för varje enskilt element i Sprite.

.m-01 till .m-12 - Du gissade det! Det här är våra månader. Den här delen av CSS positionerar vår grafik för att visa månaderna. Som du kan se ställer jag in bilden för att flytta på en X Y-axel baserat på var den visas på bilden. Det enklaste sättet att ta reda på varifrån det övre vänstra hörnet (0,0) av varje månad, dag eller år finns på den större bilden är att öppna Photoshop och markera markeringsverktyget. Välj från vänster längst ner och över till höger till strax 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 .d-31 - Används för exakt samma sak som .m-01 - .m-12 förutom att de används för dagarna i stället för månaderna.

.y-2009 till och med .y-2014 - Samma som ovan brukar vi använda dem för åren.

Steg # 4

Öppna slingan i WordPress. Slingan i WordPress är den sida som visar dina blogginlägg. Detta är vanligtvis index.php-sidan. Datum visas även på andra sidor men denna handledning ersätter bara datum i huvudslingan. Om du kom till det här avsnittet i handledningen är du intelligent nog att söka och ersätta de andra instanserna av datum i ditt tema i andra filer som single.php, page.php, archives.php etc.

Sök efter något längs den här linjen i din loop:

Ersätt med dessa rader:

Steg # 5

Ladda upp din bild, CSS och dina teman slinga (index.php). Hit uppdatera på din blogg (se till att du är på sidan där inlägg visas) och Voila! Du har precis superstilat dina datum med hjälp av CSS sprites.

Todd Santoro är huvudansvarig och Sr. Designer vid hans företag ToddSantoro.com Designs. Todd har jobbat på nätet i 11 år och utmärker sig i användargränssnitt och grafisk design. Han älskar att uppmärksamma detaljer och utveckla på WordPress-ramverket. Du kan följa honom på Twitter.