Theme Bearbeiten Icons

Hallo, ich benutze das Theme devart für meinen blog Cofilew - Nico Schmitz bloggt.., ich habs mir schon ins Deutsche Übersetzt und arbeite gerade daran das ganze etwas individueller zu gestalten und würde dafür gerne die icons von famfamfam benutzen, es soll dann in etwa so aussehen wie beim SoSuechtig Theme Beispiel : Alexander Wachert bloggt

Das in der Sidebar so hinzukriegen habe ich geschafft, nur hab jetzt problem damit das im "footer" eines artikels so hinzubekommen, hab die stelle gefunden im devart Theme in der index.php.

<div class="post-info">


                    <?php the_time('m.j.Y') ?> in


                    <?php the_category(', '); ?>


                    <?php the_tags('| Tags: ', ', ', ''); ?> | 


                    <?php comments_popup_link('Keine Kommentare', '1 Kommentar', '% Kommentare'); ?>


                </div>

und im SoSuechtig Theme sieht das ganze so aus in der index.php :

<div class="entryfooter">
                        von <img src="<?php echo bloginfo('template_url'); ?>/images/user.png" class="contentimage" /> <a href="<?php the_author_url(); ?>"><?php the_author() ?></a> | <img src="<?php echo bloginfo('template_url'); ?>/images/comments.png" class="contentimage" /> <?php comments_popup_link('Keine Kommentare', '1 Kommentar', '% Kommentare'); ?> | <img src="<?php echo bloginfo('template_url'); ?>/images/folder_page.png" class="contentimage" /> <?php the_category(', '); ?>
                    </div>

Nur so wie im SoSuechtig Theme Funktionierts leider nicht, kennt einer von euch eine lösung ?
Vielen Dank im Vorraus

Was heißt "funktioniert nicht"? Abgesehen von den fehlenden alt-Attributen ist der Code ja in Ordnung. Die Pfade zu den Bildern musst du natürlich an deine Theme-Struktur anpassen.

Abgesehen davon bevorzuge ich, die Bilder als Hintergrundbilder per CSS einzufügen, z.B.:

<span class="entry-time"><?php the_time() ?></span>

und

#content .entry .entry-time {
padding-left:20px;
background:transaprent url('/images/clock.png') left top no-repeat;
}

(der CSS-Selektor ist jetzt nur beispielhaft und musst du natürlich wieder an die Klassen/Ids in deinem Theme anpassen)

Bei mir zeigte er dann nur den Quellcode vom HTML an oder einfach gar nix, sah halt wie vorhher aus.

Ich hab das jetzt mal so gemacht wie du gesagt hast

index.php (hab ersmtal nur category geändert)

<div class="post-info">


                    <?php the_time('m.j.Y') ?> in


                    <span class="category"><?php the_category(','); ?></span>


                    <?php the_tags('| Tags: ', ', ', ''); ?> | 


                    <?php comments_popup_link('Keine Kommentare', '1 Kommentar', '% Kommentare'); ?>


                </div>

Style.css

#content .post info .category {padding-left:20px; background:transaprent url('/images/folder_page.png') left top no-repeat;}

Funktionieren tuts aber nicht, ändert sich gar nichts, aber hätte da noch eine frage undzwar muss im css code nach #content der name des divs in dem sich dieser Artikel Footer befindet hin und als letztes dann die zuordnung also in dem fall "category" ? Weil ich habs jetzt so gemacht.

#content .namedesdivs .category

Zitat von nicovod

Bei mir zeigte er dann nur den Quellcode vom HTML an oder einfach gar nix, sah halt wie vorhher aus.

Wenn das "HTML2 ausgegeben wurde: stand da wirklich eine spitze Klammer < oder doch eher eine HTML-Entity &_lt; ?

Zitat

Ich hab das jetzt mal so gemacht wie du gesagt hast

Code

#content .post[COLOR="Red"][B]-[/B][/COLOR]info .category {

Wo ist der Bindestrich bei dir geblieben? Einen Container mit der ID "content" gibts auch in deinem Theme?

Ansonsten schau dir mal an, wie CSS-Selektoren funktionieren:
CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 3 - Selektoren I

also zum html, das weiss ich nicht mehr ich hab halt einfach den selben code vor dem php code der die kategorie anzeigt hinkopiert und dann stand der halt unten im footer (img src="images" usw) und dannach mal in den php code nur war mir eh klar das das nicht funktioniert.

also in meinem Theme ist halt alles nochmal in oberkategorien also sachen die im content sind sind in der kategorie content am besten ich zeig das mal dann verstehst du das denke ich besser

/* Content
-------------------------------------------------------------------*/
#content { 
    width: 635px; 
    float: left; 
    padding: 15px; 
    background: #d6ded4; 
}
#content .post info .category {padding-left:20px; background:url('/images/folder_page.png');}
#content .post { margin-bottom: 40px; }
#content .post p { margin-bottom: 20px; }
#content .post h1 a { text-decoration: none; }
#content .post-list li { list-style: none; }


#content .post .post-info { 
    clear: both; 
    font-size: 11px; 
    color: #777; 
    padding: 3px 5px 5px 5px; 
    margin-bottom: 20px; 
    border-top: 1px solid #aaa; 
    border-bottom: 1px solid #aaa; 
    background: #c9d6cc; 
}
#content .post .post-info a { color: #333; text-decoration:none; }
#content .post .post-info a:hover { color: #555; text-decoration:none; }


#content #pages { text-align: center; }
#content #pages a { font: bold 20px "Trebuchet MS"; color: #414d4c; text-decoration: none; }
#content #pages a:hover { color: #1e2726; }


#content ul, ol, dl { margin-bottom: 20px; }
#content ul { 
    list-style: disc;
    list-style-position: inside; 
}
#content ol { 
    list-style: decimal; 
    list-style-position: inside; 
}
#content dl dt { 
    font-weight: bold;
}
#content dl dd { 
    font-style: italic;
    margin: 0 0 5px 20px;
    color: #555;
}


.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 5px 15px 10px 0; }
.alignright { float: right; margin: 5px 0 10px 15px; }

Diese Oberkategorien gibt es halt auch für die Sidebar, Navigation, Footer usw.

ah sorry hatte vergessen zu schreiben das ich das ebend ausprobiere.

Also scheint zu funktionieren, nur jetzt zeigt der eine leer fläche vor dem namen der kategorie an Cofilew - Nico Schmitz bloggt..

Ja, weil unter
http://www.cofilew.de/images/folder_page.png
kein Bild zu finden ist.

Lass mal den 1. Slash hier weg:

transparent url([COLOR="Red"][B]/[/B][/COLOR]images/folder_page.png) no-repeat scroll left top

ah ok danke funktioniert jetzt nur leider zeigt der fast nur die hälfte des bildes an, hab mal im css code gesucht aber keine angaben gefunden für den post-info container gesehen die das machen könnte, oder ich habs nur übersehen hmm :)

Nein, im CSS kannst da nichts machen, was die Bildgröße angeht. Du musst die Zeilenhöhe entsprechend anpassen oder das Bild mittels Grafikprogramm verkleinern.

hmm also habs mal versucht zu verkleinern mit photoshop (endlich mal was was ich kann xD) und es wird einfach zu undeutlich ich denke das mit der Zeilenhöhe anpassen ist dann nur noch die einzigste möglichkeit und da kommen wir wieder in den bereich wo sich mir nur fragezeichen auftun :D

Wäre Super wenn sich noch einer deswegen mal melden könnte der eine lösung weiss.

Cofilew - Nico Schmitz bloggt..

hab schon versucht per css zu machen nur leider ohne erfolg und wie schon gesagt ich versteh da nicht viel von

Ändere das Padding der span-Elemente. Du hast eine Schriftgröße von 11px eingestellt, die Icons sind 16px. Du musst also die fehlenden 5 Pixel auf das padding oben/unten verteilen, z.B.

#content .post-info .category {
background:transparent url(images/folder_page.png) no-repeat scroll left top;
padding:[COLOR="Blue"]2px 0 3px 20px[/COLOR];
}

Super Danke dir :) Fals wir uns mal sehen geb ich dir ein bier aus :D