Icons zwischen den Angaben für einen Artikel

sven1309

Oh, dieser php-Code...
Habe mittlerweile mit Hilfe des Forums einiges an meinem Blog geändert, komme aber in folgender Sache trotz Suche nicht weiter.
Ich würde gerne unter jeder Artikelüberschrift in den Infos einzelne Icons vor die Einträge "Datum", "Autor" und "Kategorie" setzen, bekomme das aber nicht eingebunden.
Sieht zurzeit wie folgt aus

Zitat

<p> <class="date"> <?php the_time('d.m.y') ?> | <?php readers() ?> | von <?php the_author_posts_link(); ?> in <?php the_category(', '); ?></p>

Die ganze Geschichte soll nachher von der Art her so project: equinoX - Das deutschsprachige DVD und Film Projekt im Internet » project: equinoX - v3.0 aussehen.
Die gifs liegen bereits im Theme im img-Ordner, Blog gibt es hier VolleBlende.de.

Danke für eure Tipps

Sven

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Was ist das? <class="date"> ;-) Ansonsten ist das weitestgehend nur CSS, dazu ein wenig HTML-markup. PHP benötigst du dafür keins. Mal vom Ansatz her:

PHP

<p>
  <span class="date"><?php the_time('d.m.y') ?></span> |
  <span class="readers"><?php readers() ?></span> |
  von <span class="author"><?php the_author_posts_link(); ?></span>
  in <span class="categories"><?php the_category(', '); ?></span>
</p>

Den <span>s gibst du jetzt global einen kleinen Innenabstand links (padding-left), und über die Klasse das jeweilige Icon als Hintergrundbild.

CSS-Code dazu:

Code

#content .post .meta p span {
padding-left:20px;
}
#content .post .meta p span.date {
background:url(img/date-icon.png) left center no-repeat;
}

Und noch ein paar Links zu einer CSS-Referenz:
Abstände: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Hintergrundbilder: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Icons zwischen den Angaben für einen Artikel

Jetzt mitmachen!