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


  #1  
Old Apr 14, 2009, 09:19 AM
GeoParadise
 
6 posts · Apr 2009
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.

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
  #2  
Old Apr 14, 2009, 06:49 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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 {
width: 99px !important;
height: 62px !important;
padding-left: 70px; /*make room for the image*/
}
/* reset children */
ul#rmenu li ul li a {
 width: auto !important; /* the actual with is set by the width of the UL which can be set in the theme options */
 height: auto !important;
padding-left: 5px; /* the default left padding */
}
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: #123456 url(/blog/wp-content/themes/atahualpa332/images/geo.jpg) no-repeat scroll center left !important;
}
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;
}
  #3  
Old Apr 16, 2009, 12:33 PM
GeoParadise
 
6 posts · Apr 2009
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 {
width: 98px !important;
height: auto !important;
text-align: center !important;
padding-top: 49px !important;
}
/* reset children */
ul#rmenu li ul li a {
width: auto !important; /* the actual with is set by the width of the UL which can be set in the theme options */
height: auto !important;
padding-top: 5px !important; /* the default top padding */
font-size: 9pt !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.gif) no-repeat scroll center left !important;
border: solid 6px #da7200 !important;
border-right: solid 0px !important;
}
ul#rmenu li.cat-item-1 ul li a:link,
ul#rmenu li.cat-item-1 ul li a:visited,
ul#rmenu li.cat-item-1 ul li a:active,
ul#rmenu li.cat-item-1 ul li a:hover {
background-color: #0033CC !important;
background-image: none !important;
border: solid 6px #0033CC !important;
}
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
  #4  
Old Apr 16, 2009, 12:45 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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 {
...
}
div.category-othercatgoryname div.post-kicker {
...
}
  #5  
Old Apr 17, 2009, 07:30 AM
GeoParadise
 
6 posts · Apr 2009
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 {
background-color: #0033cc !important;
}
Lovely!
  #6  
Old Apr 17, 2009, 06:50 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Right, my mistake. I updated the post above

Bookmarks

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 05:56 AM.


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