Jens Brauer

Blog

Kategorien im Theme Dark 3Chemical

Da ich schon darauf angesprochen wurde, wie ich denn bei den Kategorien die Zahlen der Posts anzeigen kann, ohne dass diese unter den Link "rutschen", so wie hier:
Kategorie Problem Also habe ich jetzt mal ein kleines Tutorial gemacht (wenn man diese paar Sätze so nennen darf^^)

Hab leider nicht so viel Zeit, deshalb nur worum's hauptsächlich geht. Also der Grund dafür, dass die Zahlen verrutschen liegt in der style.css-Datei! Und zwar an diesen Zeilen:
.arrow {float: left;list-style-type: none;text-align: left;margin-top: 0px;margin-right: 0px; margin-bottom: 15px;margin-left: 0px;width: 180px;padding-top: 0px;padding-right: 0px; padding-bottom: 0px;padding-left: 10px;}

.arrow li {float: left;text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 5px; margin-left: 0px;width: 180px;padding: 0px;}

.arrow li a:link, .arrow li a:visited {margin: 0px;width: 160px;padding-left: 14px;display: block;background-image: url(images/in.gif);background-repeat: no-repeat;background-position: left 1px; color: #FFFFFF; text-decoration: none;}

.arrow li a:hover, .arrow li a:active { margin: 0px;width: 160px;padding-left: 14px;display: block;background-image: url(images/out.gif);background-repeat: no-repeat;background-position: left 1px;color: #999999;text-decoration: none;}

Man könnte jetzt einmal ausrobieren und aus den 180px, 200px machen, oder aus den 160px 180px und gucken was passiert. Es liegt nämlich daran, dass die "Pixelbreite" für die Spalte gerade zu klein ist, sodass die Zahlen nicht mehr mit reinpassen.

Da ich mir das ganze aber so machen wollte, dass ich da auch andere Bilder (bei mir Sterne) anstatt diese Kästchen hinmachen wollte, hab ich mir das ganze umgeschrieben und folgenden Code ganz am Ende der style.css hinzugefügt:

.jens {
float : left;
list-style-type : none;
text-align : left;
margin-top : 0;
margin-right : 0;
margin-bottom : 15px;
margin-left : 0;
width : 180px;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 10px;
}
.jens li {
float : left;
text-align : left;
margin-top : 0;
margin-right : 0;
margin-bottom : 5px;
margin-left : 0;
width : 150px;
padding : 0;
}
.jens li a:link, .jens li a:visited {
margin : 0;
width : 160px;
padding-left : 14px;
line-height : 1.5;
background-image : url(images/star.gif);
background-repeat : no-repeat;
background-position : left 1px;
color : #ffffff;
text-decoration : none;
}
.jens li a:hover, .jens li a:active {
margin : 0;
width : 160px;
padding-left : 14px;
line-height : 1.5;
background-image : url(images/star2.gif);
background-repeat : no-repeat;
background-position : left 1px;
color : #999900;
text-decoration : none;
} 

Dabei muss dann natürlich "background-image: url(images/star.gif)" mit dem Pfad zu eurem Bild ersetzt werden.
Das "line-height : 1.5;" habe ich noch hinzugefügt, um den Abstand zwischen den Kategorielinks (oben und unten) ein bisschen zu vergrößern, damit das ganze übersichtlicher wird.

Um das ganze dann auch als "veränderte Kategorie" anzeigen zu lassen, hab ich folgenden Code in die functions.php hinzugefügt:

function widget_mytheme_kategorie() {
?>
<h2>Kategorien</h2>
<ul class="jens">
<?php wp_list_cats('sort_column=name&optioncount;=1&hierarchical;=1&'); ?>
</ul>
<?php
}
if ( function_exists('register_sidebar_widget') )
    register_sidebar_widget(__('Kategorie'), 'widget_mytheme_kategorie');

Download als TXt-Datei

Und bei den "unregister-Zeilen in der functions.php noch folgendes:
unregister_sidebar_widget('Categories 1');

Jetzt müsst ihr nur noch eure neue Kategorie unter Widgets auswählen ;-)

Leider hab ich nicht die Zeit, das ganze nochmal auszuprobieren. Wenn jmd. das einbaut, kann er ja mal ein Kommentar hinterlassen, wie er es gemacht hat, oder ob das so funktioniert hat! Ich freu mich immer auf Kommentare:D

Kommentare