Gebruik CSS Sprites om uw WordPress-datum te verfraaien

Ooit afgevraagd hoe je de postdatum van je blog super kunt stylen? Ik ga je laten zien hoe je dit doet met behulp van CSS-sprites in ongeveer 18 minuten.

Noot redactie: dit bericht is gericht op thema-ontwerpers. Voorkennis van CSS en WordPress wordt aanbevolen.

Wat je nodig zult hebben:

• Een grafisch programma (ik gebruik Adobe Photoshop CS4)
• Een eenvoudige teksteditor

Wat u zult bereiken in deze tutorial:

• De datums op de berichten van je blog worden super gestileerd met behulp van CSS Sprites

Laten we beginnen…

Stap 1

Start uw grafische programma op. U kunt een PSD- of PNG-sjabloon downloaden om de lay-out van alle datums in onze Sprite te helpen.

Stap 2

In principe wilt u een raster maken met maanden, dagen en jaren. Zoals u kunt zien, heeft mijn raster de maanden in één kolom, dan de dagen in twee kolommen en tenslotte de jaren verticaal in een kolom. Zodra u uw datums op het "raster" hebt ingevoerd, kunt u het bestand opslaan. Tip: zorg dat je tekst op gelijke afstand van boven naar beneden en van links naar rechts is geplaatst. Dit maakt de wiskunde eenvoudiger wanneer elke datum dezelfde witruimte heeft.

Stap 3

Op naar de codering ... Maakt u zich geen zorgen, het is echt gemakkelijk, vooral als u mijn PNG gebruikt of het PSD-bestand hebt gebruikt (het bevat richtlijnen om uw "raster" mooi en netjes te houden en u kunt vervolgens de CSS-code knippen en plakken in deze stap rechtstreeks in de stylesheet van uw thema's zonder enige wiskunde.)

De CSS is als volgt:

/ * Datum Sprite * /
.post-datum
positie: relatief;
breedte: 66px;
hoogte: 60 px;
zweven: links;

.maand dag jaar
positie: absoluut;
tekst-inspringing: -1000em;
background-image: url (images / date_img.png);
achtergrondherhaling: geen herhaling;

.maand top: 10px; links: 0; breedte: 33 px; hoogte: 30px;
.dag top: 30px; links: 0; breedte: 33 px; hoogte: 30px;
.jaar onder: 0; rechts: 13px; breedte: 20px; hoogte: 60px;

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

.d-01 achtergrond-positie: -51px 0;
.d-02 achtergrond-positie: -51px -27px;
.d-03 background-position: -51px -57px;
.d-04 background-position: -51px -91px;
.d-05 background-position: -51px -122px;
.d-06 achtergrond-positie: -51px -151px;
.d-07 background-position: -51px -185px;
.d-08 background-position: -51px -214px;
.d-09 background-position: -51px -249px;
.d-10 achtergrondpositie: -51px -275px;
.d-11 background-position: -51px -309px;
.d-12 achtergrond-positie: -51px -338px;
.d-13 background-position: -51px -373px;
.d-14 background-position: -51px -404px;
.d-15 achtergrondpositie: -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 background-position: -100px -91px;
.d-21 background-position: -100px -122px;
.d-22 background-position: -100px -151px;
.d-23 background-position: -100px -185px;
.d-24 background-position: -100px -214px;
.d-25 background-position: -100px -249px;
.d-26 background-position: -100px -275px;
.d-27 background-position: -100px -309px;
.d-28 background-position: -100px -338px;
.d-29 achtergrond-positie: -100px -373px;
.d-30 background-position: -100px -404px;
.d-31 background-position: -100px -436;

.y-2009 background-position: -150px 0;
.y-2010 background-position: -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;

Uitleg:

.post-datum - Stelt de breedte en hoogte van de hele datum in. In dit geval gaan we onze datum in een doos passen van 66px bij 60px.

.maand dag jaar - Stelt de breedte en hoogte in van de afzonderlijke elementen waaruit onze hele Sprite-datum bestaat. Onze maanden en dagen zijn 33px breed en 30px hoog. De jaren zijn 33px breed bij 60px hoog. Wanneer je deze elementen samenvoegt, maken ze een doos 66px breed bij 60px hoog. Het bevestigt ook de afbeelding die we in stap # 1 hebben gemaakt, zodat we deze kunnen plaatsen voor elk afzonderlijk element in de Sprite.

.m-01 tot en met .m-12 - Je hebt het geraden! Dit zijn onze maanden. Dit deel van de CSS positioneert onze afbeelding om de maanden weer te geven. Zoals je kunt zien, heb ik de afbeelding ingesteld om op een X Y-as te bewegen op basis van de plaats op de afbeelding. De eenvoudigste manier om erachter te komen waar de linkerbovenhoek (0,0) van elke maand, dag of jaar zich op de grotere afbeelding bevindt, is om Photoshop te openen en het selectiekader te selecteren. Selecteer van linksboven naar beneden en naar rechts tot net boven de linkerbovenhoek van je maand, dag of jaar en noteer waar je aanwijzer de statistieken van het infopaneel gebruikt.

.d-01 tot en met -d-31 - Wordt gebruikt voor precies hetzelfde als .m-01 - .m-12 behalve dat ze voor de dagen worden gebruikt in plaats van de maanden.

.y-2009 tot en met .y-2014 - Hetzelfde als hierboven gebruiken we ze alleen voor de jaren.

Stap 4

Open de lus in WordPress. De lus in WordPress is de pagina ('s) die uw blogberichten toont (en). Dit is meestal de index.php-pagina. Datums verschijnen ook op andere pagina's, maar deze tutorial vervangt alleen de datums in de hoofdlus. Als je dit gedeelte van de tutorial hebt bereikt, ben je intelligent genoeg om de andere exemplaren van datums in je thema te zoeken en te vervangen in andere bestanden zoals single.php, page.php, archives.php, enz..

Zoek naar iets op deze regel in uw loop:

Vervang door deze regels:

Stap # 5

Upload uw afbeelding, CSS en de lus van uw thema's (index.php). Klik op Vernieuwen op je blog (zorg dat je op de pagina staat waarop berichten worden getoond) en Voila! Je hebt je data super gestyled met behulp van CSS-sprites.

Todd Santoro is de Principal and Sr. Designer bij zijn bedrijf ToddSantoro.com Designs. Todd werkt al 11 jaar op het web en blinkt uit in UI en grafisch ontwerp. Hij houdt van aandacht te schenken aan details en zich te ontwikkelen op het WordPress-raamwerk. Je kunt hem volgen tjilpen.