Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Customizing category menu bar with different images for every item

Prev Previous Post   Next Post Next
Old Apr 14, 2009, 09:19 AM
6 posts · Apr 2009
Help 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:

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.

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



Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Highlight active category / page item in menus vjoseph Page & Category Menu Bars 31 Apr 30, 2012 07:08 PM
Changing category order in category menu bar, not in sidebar cat. list paulae Page & Category Menu Bars 13 Mar 30, 2011 06:36 PM
Show Child Category In Category Menu Bar? mwsmedia Page & Category Menu Bars 1 Jun 29, 2009 06:06 AM
Help Color Customizing Page Menu Bar Please hovering Header configuration & styling 3 Mar 29, 2009 05:31 AM
Page Menu Bar: Last Item on the Right-Hand Margin? PittFunck Page & Category Menu Bars 5 Mar 9, 2009 09:26 AM

All times are GMT -6. The time now is 10:01 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.