[SOLVED] Images as Category Titles
 

Hi

I am overwhelmed by all the great possibilities atahualpa offers - even to a css-beginner like me.
please let me ask you one question, that still remains unanswered after searching and browsing through the board.

how can I display images instead of categories? ie an image instead of "Category: XY"?

thanks
Jonas

Where in the layout? I don't know a place that starts with Category:

thanks for the reply and sorry for being unclear.

I refer to the Footer Box in a post (see screenshot). What I want to achieve is to display different small images (according to category) instead of «Category: Non classé», whilst still be able to set the category in the admin tool.

You could try

<?php $all_categories = get_the_category();
$cat_id = $all_categories[0]->cat_ID; ?>
<span class="<?php echo $cat_id; ?>">%category-linked%</span>

in the post into items, and then add a CSS Insert for each category ID

span.12 {
background: url(/path/to/image12.gif) center left;
}
span.19 {
background: url(/path/to/image19.gif) center left;
}
span.25 {
background: url(/path/to/image25.gif) center left;
}

thanks very much, much appreciated!
what do you mean exactly by «for each category id». could you please make an example with the code.

thank you
best regards, j

At WP Admin -> Posts -> Categories, if you point the mouse at the title of a category you'll see a URL ending on "...action=edit&cat_ID=XX" in the status bar at the bottom of the browser viewport. XX is the ID of that category.

The PHP code I posted above should wrap a link to the first category of a post into a <span> element with a CSS class (i.e. "13") which equals the (Wordpress) ID (i.e. "13") of that first category.

<span class="13"><a href="link-to-category">Category Title</a></span>

You could then style each one of these <span> elements with a CSS Insert. The example above would cover 3 example categories, with the ID's 12, 19 and 25.

BTW, the images in the CSS example don't have to include the category ID in their file name. I just made the example that way.

thanks Flynn.. now I 'perfectly' understand the solution, but still..it doesn't work

it looks like span.[any id] in css does not affect the footer at all.

div.post-footer does however, but then I am not able to use different category ids..

what could possibly go wrong? do you need more info?

sorry for bothering again!

ok, I have now found another way:

.category-daily {
background: url('/images/tabs-2.gif') 0px -482px no-repeat;
height: 103px;
}

but it has become quite a «gebastel».

and what is rather funny, is that the Footer (Copyright © 2009 etc) is now right in the middle of the page. please help :)
no idea what happened: the footer and also the comment box are now overlapping the post....

---> my complete lack of knowledge turned out to be disastrous, I am resetting. thanks anyway.