Customizing category menu bar with different images for every item
 

Hello Flynn!!
First of course thank you and congratulations for this amazing theme. I have just made a little contribution to mean it. I´ve been tweaking it for a while with the help of this forum reading other people posts, but now I´ve got stuck. I have to say I am a complete newby in php, coding and all that stuff, but I know how to cut and paste and follow instructions, hehehe! So this is our blog:
http://www.geoparadise.org/blog

I was trying to have a category menu bar that shows different color backgrounds and icons for each category item and the link text under it. In hover state would be the same background, but only changing the text color. All the tabs with the same width (around 100px)

I tried first to put an horizontal bar1 with all the icons and background colors on top of the category bar, but I found it a bit tricky to match the exact sizes of both bar tabs and also, I want them both centered. So I did well with the category bar, following your instructions on another post to do the same thing with the pages menu bar (making a table in the bfa_header_config.php file) and somehow it worked perfectly (at least in my safari):). After that, I hadnt got a clue how to center the horizontal bar. :confused:

So I decided to change my strategy, get rid of the horizontal bar1 and try to insert the background with the image for each cat-item, making them high enough to fit text at the bottom (62 px),
and following an explanation I found in this post http://forum.bytesforall.com/showthread.php?t=644 and changing page-item for cat-item. I did it for the first tab (cat-item-1), stating the new height and text alignment like this:

ul.rMenu li a {
width: 99px !important;
height: 62px !important;
text-align: bottom center !important;
}
ul.rMenu li.cat-item-1 a:link,
ul.rMenu li.cat-item-1 a:visited,
ul.rMenu li.cat-item-1 a:active,
ul.rMenu li.cat-item-1 a:hover {
background: url(/blog/wp-content/themes/atahualpa332/images/geo.jpg) no-repeat !important;
}

and I found three problems.

1.- The sub-categories had gone same size as the parents (62px high) which doesn´t look good.
2.- The sub-category "Travels" with no children is showing the icon and background also.
3.- Text has not gone to the bottom.

I would like the sub-categories to have the same background color of the parent category, but no icon and smaller size. By the way: Is it possible to make the fonts smaller in them?

Also, I have to say that before all this I have deleted the arrows and the padding for them.

Could you please give me an advice of the best option to get the results I need?
Thanks in advance
Noa

GeoParadise

Not tested, and I am using ul#rmenu to make sure it does not affect the page menu bar as well
If the text is somehow misaligned try line-height
ul#rmenu li a {
line-height: XXpx;
}
/* children */
ul#rmenu li ul li a {
line-height: XXpx;
}

Thanks for your quick reply! It didn´t work that way cause what I wanted was the image on top, not on the left, but you gave me enough clues on how to reset children categories and play with the padding and auto-sizing, so, I managed to make it work like this and it looks great ;):

Now, I have another question: I´ve added the categories to be shown in the kicker of the post pages and I was wondering if it is possible to have the kicker box background color in a specific color for each category, to match with the tab colors in the category menu bar... Hope that you understand what I mean and it is not too difficult.
Thanks again!
Noa

Yes, each post container has various classes, including the names of the categories the post was filed under

Thanks again! It didn´t work at the beggining but again with that clue I had a look into the source code and guessed that the div class was called: post-kicker so It worked like this:

Lovely! :)

Right, my mistake. I updated the post above