Utilizați CSS Sprites pentru a înfrumuseța WordPress Post Datele

Te-ai intrebat vreodata cum sa faci stilul postului blogului tau? Vă voi arăta cum să faceți acest lucru folosind spritele CSS în aproximativ 18 minute.

Editorial Nota: Acest post este orientat spre designerii de teme. Cunoașterea prealabilă a CSS și WordPress este recomandată.

Ce vei avea nevoie:

• Un program grafic (folosesc Adobe Photoshop CS4)
• Un editor simplu de text

Ce veți realiza în acest tutorial:

• Datele de pe postările din blogul dvs. vor fi supermodificate utilizând Sprite-uri CSS

Să începem…

Pasul 1

Activați programul grafic. Puteți descărca un șablon PSD sau PNG pentru a ajuta la aspectul tuturor datelor din Sprite.

Pasul 2

În principiu, doriți să creați o rețea folosind luni, zile și ani. După cum puteți vedea, grila mea are lunile dintr-o coloană, apoi zilele din două coloane și, în final, anii verticali într-o coloană. După ce obțineți datele dvs. pe "grilă", puteți salva fișierul. Sugestie: Asigurați-vă că textul dvs. este distanțat în mod egal de sus în jos și de la stânga la dreapta. Acest lucru face mai ușor matematica atunci când fiecare dată are același spațiu alb.

Pasul 3

Pe codificare ... Nu vă faceți griji că este foarte ușor, mai ales dacă utilizați PNG-ul meu sau ați folosit fișierul PSD (Acesta include linii directoare pentru a vă menține grilă frumos și elegant și puteți apoi să tăiați și să lipiți codul CSS în acest pas direct în foaia de stil a temelor dvs. fără nici un fel de matematică.)

CSS este după cum urmează:

/ * Data Sprite * /
.postdate
poziție: relativă;
lățime: 66px;
înălțime: 60px;
plutește la stânga;

.luna zi an
poziția: absolută;
text-liniuță: -1000em;
fundal-imagine: url (imagini / date_img.png);
background-repeat: nu-repeta;

.lună top: 10px; stânga: 0; lățime: 33px; înălțime: 30px;
.zi top: 30px; stânga: 0; lățime: 33px; înălțime: 30px;
.an jos: 0; dreapta: 13px; lățime: 20px; înălțime: 60px;

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

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

.y-2009 background-position: -150px 0;
.y-2010 pozitie fundal: -150px -60px;
.y-2011 background-position: -150px -120px;
.y-2012 background-position: -150px -180;
.y-2013 background-position: -150px -240px;
.y-2014 background-position: -150px -300px;

Explicaţie:

.sunt ulterioare - Setează lățimea și înălțimea întregii date. În acest caz, vom face ca data noastră să se încadreze într-o cutie de 66 px până la 60 de pixeli.

.luna zi an - Setează lățimea și înălțimea elementelor individuale care alcătuiesc întreaga noastră dată Sprite. Lunile și zilele noastre sunt de 33 pixeli lățime și 30 de pixeli înălțime. Anii sunt de 33px latime de 60px înălțime. Când puneți aceste elemente împreună, acestea fac o cutie de 66 pixeli lățime de 60 de pixeli înălțime. De asemenea, se atașează graficul pe care l-am făcut în pasul # 1, astfel încât îl putem poziționa pentru fiecare element din Sprite.

.m-01 până la .m-12 - Ai ghicit! Acestea sunt lunile noastre. Această parte a CSS poziționează graficul nostru pentru a afișa lunile. După cum puteți vedea, am setat imaginea să se deplaseze pe o axă X Y pe baza locului în care apare imaginea. Cea mai ușoară modalitate de a afla care este colțul din stânga sus (0,0) din fiecare lună, zi sau an pe imaginea mai mare este să deschideți Photoshop și să selectați instrumentul Marquee. Selectați din partea stânga sus în jos și peste spre dreapta, chiar deasupra colțului din stânga sus al lunii, zilei sau anului și notați unde indicatorul folosește statisticile panoului de informații.

.d-01 până la d-31 - Este folosit pentru exact același lucru ca .m-01 - .m-12 cu excepția cazului în care sunt folosite pentru zile, mai degrabă decât pentru luni.

.y-2009 prin .y-2014 - La fel ca mai sus, le folosim de-a lungul anilor.

Pasul # 4

Deschideți buclă în WordPress. Buclele din WordPress sunt paginile care afișează mesajele dvs. de pe blog. Aceasta este de obicei pagina index.php. Datele se afișează și pe alte pagini, însă acest tutorial înlocuiește doar datele din bucla principală. Dacă ați ajuns la această secțiune a tutorialului, sunteți destul de inteligent să căutați și să înlocuiți celelalte instanțe de date din tema dvs. în alte fișiere, cum ar fi single.php, page.php, archives.php etc..

Căutați ceva de-a lungul acestei linii în buclă:

Înlocuiți cu aceste linii:

Pasul # 5

Încărcați imaginea, CSS și bucla temelor (index.php). Hit refresh pe blogul dvs. (asigurați-vă că vă aflați pe pagina în care sunt afișate mesajele) și Voila! Doar ai super-stilat datele folosind sprite de CSS.

Todd Santoro este directorul și designerul de la compania sa ToddSantoro.com Designs. Todd lucreaza pe web timp de 11 ani si exceleaza in UI si design grafic. El îi place să acorde atenție detaliilor și dezvoltării în cadrul WordPress. Îl puteți urma Stare de nervozitate.