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
HTML Code:
ul#rmenu li a { 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 ;):
HTML Code:
ul#rmenu li a { Thanks again! Noa |
Yes, each post container has various classes, including the names of the categories the post was filed under
HTML Code:
div.category-uncategorized div.post-kicker { |
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:
HTML Code:
div.category-geoparadise div.post-kicker { |
Right, my mistake. I updated the post above
|
All times are GMT -6. The time now is 05:24 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.