Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Highlight active category / page item in menus


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 18, 2009, 04:53 AM
vjoseph
 
3 posts · Feb 2009
Hello,

I'm continuing to discover the power of the Atahualpa theme.

I don't know how to keep highlighted the current active item in the page menu bar. I used a plugin named "PostLists", that creates some placeholders so I can post posts into pages.
Is there a way that the tab related to the parent page, that hosts some posts, keep being highlighted as active when one of these posts is displayed?
I also have the same needs related to the sidebar menu: I used the Wordpress Navigation List Plugin NAVT, and I'd like the active category to remain highlighted when we read one of the posts that are in.

Hope my question is sufficiently clear...

Thanks a lot for your help!

Vincent
  #2  
Old Feb 19, 2009, 07:19 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
Look into the source code to see if the page/category has a class such as current_page_item or current-cat or current-cat-parent and add styles for thos via HTML/CSS Inserts/CSS Inserts

HTML Code:
li.current-cat {
background: #123456;
}
  #3  
Old Mar 8, 2009, 10:28 AM
Tigger
 
35 posts · Feb 2009
Common problem I guess. I have a page menu navigaton in the left sidebar. Integrated with the plugin flexipages. I worked on the theme menu for hours to customize it a bit. Now it looks like I want it to be. Except one point:

How can I arrange it, that the button stays highlighted, as long as the visitor is on that specific page, which belongs to the button ? I get this effect only during hover status. With the page menu bar (horizontal navi) it works. With the vertical navi I just do not get it. When I play around with a:active ... it seems like it is not meant as the "Active Page". Any idea, how to fix that ?
  #4  
Old Mar 8, 2009, 11:15 AM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
You can style this with
HTML Code:
div.flexipages_widget li.current_page_item {
...
}
Wordpress adds

current-cat to current category
and
current_page_item to current page

I added div.flexipages_widget above to limit the CSS to the pages generated by that widget in case you happen to have the same page link in both the widget and the menu bar
  #5  
Old Mar 8, 2009, 12:55 PM
Tigger
 
35 posts · Feb 2009
Hy Flynn

it worked a bit I added:
background: #003399;

The result was, that all main items of the first level had blue background when active. Like I wanted.
But if sub level items under the main level item there, they turned into a blue box together with the main level item, even if not active.

So under the first button I have 2 sub level buttons. When I now click on the first main level button, a big box is spanning around all 3 buttons. No borders in between and the same width all around.

Is it not possible to do it somehow like I did it with the hover status ? a:hover . I played already with a:active ... but no result at all. Seems like the active status is not the correct description for the status, when you are on the page of a button.

If I have to address each item seperately and add code ... let us forget it. Then I will not cutomize it that way ... takes ages.

Greetings

Last edited by Tigger; Mar 8, 2009 at 01:08 PM.
  #6  
Old Mar 8, 2009, 01:11 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
O.k. I have not looked close enough, you're putting the styling on the links, not on the LI. Use this instead (also using the widget's ID now to force overwriting in case it interferes with something else)
HTML Code:
div#flexi-pages-1 li.current_page_item a:link,
div#flexi-pages-1 li.current_page_item a:active,
div#flexi-pages-1 li.current_page_item a:visted,
div#flexi-pages-1 li.current_page_item a:hover {
...
}
About the other LI's borders dissapearing. That should not happen, this targets only the LI with the class current_page_item. There's also only one level of links in that widget as far as I can see, no sub levels (which would have explained this behavior). Perhaps this new CSS fixes that, or otherwise I'd have to see it in action, seems you removed it again.
  #7  
Old Mar 9, 2009, 03:46 PM
Tigger
 
35 posts · Feb 2009
Hi Flynn,

thank you for the code. But it had no impact on the menu at all.

If you go on my site and then click on the german flag, you will end up where I am working on right now.

In the left side bar you will find the navigation. So far I have only sublevels under the first button for test reasons. More will follow later.

I could already manage to get the buttons blue during hover status. Now I would like the button to stay blue, when you clicked it and as long as you stay on that side. The same for the sub level buttons.

When you click a sub level button, it should stay blue, but not itīs parent button of the first level.

So always just the button of the page you are on. With the main page menu (horizontal) it works.

With the first code you gave me it worked. But only with main level buttons. When I clicked a sublevel button, it created a blue fild all over the first level button and sublevel button. I will put the code in, so that you can see.

When you now click the first button you will see the result. Please hover the blue box. There are sub buttons in it, which are right aligned and have a distance to the left side of approx. 35px. When you click another main level button, it will stay blue as wished. But I can somehow not change the text color in it and it is the same blue ... so not visible any more. I would like it to stay yellow as in hover status.

If it is not possible to get this fixed without hours of playing around. I will leave it like it is. Maybe you will include such navigation I am looking after in your next theme ;-)

Last edited by Tigger; Mar 9, 2009 at 03:51 PM.
  #8  
Old Mar 9, 2009, 08:52 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
And I was looking at yourdomain.com/ all the time, not yourdomain.com/de/ ...
Checking /de/ tomorrow.
  #9  
Old Mar 13, 2009, 10:08 AM
Tigger
 
35 posts · Feb 2009
You had a look ? Hopeless ?
  #10  
Old Mar 13, 2009, 04:19 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
That blue color is caused by

HTML Code:
.widget ul li a:visited, .widget ul li a:link {
color: #003399;
}
You should be able to change it with

HTML Code:
div#flexi-pages-1 ul li.current_page_item a:link,
div#flexi-pages-1 ul li.current_page_item a:visited,
div#flexi-pages-1 ul li.current_page_item a:active,
div#flexi-pages-1 ul li.current_page_item a:hover {
color: #ffff00;
}
Add important if that doesn't work

color: #ffff00 !important;
  #11  
Old Mar 13, 2009, 04:24 PM
Tigger
 
35 posts · Feb 2009
Getting closer !
1. Is it possible, that only the button of the active page stays blue ? It works with the subpages. But if the main page button is active, all subbuttons are also blue. But this would be not a big issue.
2. If the subpage button is active, the blue field is exceeding to the left side of the button. This is a bit tricky.

Many thanks !

Last edited by Tigger; Mar 13, 2009 at 04:28 PM.
  #12  
Old Mar 13, 2009, 05:00 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
1. Remove the styles from the <LI>'s and put them on the <A>'s

Remove this CSS insert

HTML Code:
 div.flexipages_widget li.current_page_item {
background-color: #003399;
}
And use this CSS Insert (you are already using a part of this)

HTML Code:
 /* DEFAULT */
div#flexi-pages-1 ul li a:link, 
 div#flexi-pages-1 ul li a:visited {
 color: default colors here
 background: defaults colors here
 }
/* For HOVER */
 div#flexi-pages-1 ul li a:hover,
 div#flexi-pages-1 ul li a:active {
 color:#FFFF00;
 background: #003399;
 }
/* For CURRENT */
div#flexi-pages-1 ul li.current_page_item a:link, 
div#flexi-pages-1 ul li.current_page_item a:visited, 
div#flexi-pages-1 ul li.current_page_item a:active, 
div#flexi-pages-1 ul li.current_page_item a:hover {
color:#FFFF00;
background: #003399;
}
/* Reset children of CURRENT */
div#flexi-pages-1 ul li.current_page_item ul li a:link, 
div#flexi-pages-1 ul li.current_page_item ul li a:visited, 
div#flexi-pages-1 ul li.current_page_item ul li a:active, 
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: default colors here
background: defaults colors here
}
2.

Add CSS Insert
HTML Code:
 div#flexi-pages-1 ul li ul li a:link,
div#flexi-pages-1 ul li ul li a:active,
div#flexi-pages-1 ul li ul li a:visited,
div#flexi-pages-1 ul li ul li a:hover {
margin-left: 0 !important; 
}
  #13  
Old Mar 13, 2009, 05:05 PM
Tigger
 
35 posts · Feb 2009
do I understand you right, that I only have to follow the css steps you wrote about ? Or do I additionally have to do something with the li and a ? I mean, does the css you posted include the change from li to a ?
Anyway, I will backup first ... getting a bit confusing.

Last edited by Tigger; Mar 13, 2009 at 05:08 PM.
  #14  
Old Mar 13, 2009, 05:14 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
Yes, you should try what I posted above. I also added 2)
  #15  
Old Mar 13, 2009, 05:36 PM
Tigger
 
35 posts · Feb 2009
Something changed

Actually the submenu buttons were supposed to be a bit more to the right side, but it is okay to move them to 0 margin. The problem is, that 0 margin to the left is still not very left. Even if I move them back to the very left, there will stay a blue bar between them from the active background (main button).

But we are very close !!!

Also please notice, that if main button active, the hover status for sub buttons does not work any more.

Last edited by Tigger; Mar 13, 2009 at 05:43 PM.
  #16  
Old Mar 13, 2009, 06:04 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by Tigger
Something changed

Actually the submenu buttons were supposed to be a bit more to the right side, but it is okay to move them to 0 margin. The problem is, that 0 margin to the left is still not very left. Even if I move them back to the very left, there will stay a blue bar between them from the active background (main button).
The blue background is caused by this.
HTML Code:
div.flexipages_widget li.current_page_item {background-color:#003399;}
Remove that if it is a CSS Insert. Otherwise overwrite it with a CSS Insert like this:
HTML Code:
div.flexipages_widget li.current_page_item {background-color:none;}

Quote:
Originally Posted by Tigger
Also please notice, that if main button active, the hover status for sub buttons does not work any more.
Change the last part of the CSS from the post above
HTML Code:
 /* Reset children of CURRENT */
div#flexi-pages-1 ul li.current_page_item ul li a:link, 
div#flexi-pages-1 ul li.current_page_item ul li a:visited, 
div#flexi-pages-1 ul li.current_page_item ul li a:active, 
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: default colors here
background: defaults colors here
}
to

HTML Code:
 /* Reset children of CURRENT */
div#flexi-pages-1 ul li.current_page_item ul li a:link, 
div#flexi-pages-1 ul li.current_page_item ul li a:visited {
color: default colors here
background: defaults colors here
}
div#flexi-pages-1 ul li.current_page_item ul li a:active, 
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: HOVER colors here
background: HOVER colors here
}
  #17  
Old Mar 13, 2009, 07:08 PM
Tigger
 
35 posts · Feb 2009
Okay, that absolutely worked. Now is just one little little bug to hunt after ... then I have exactly the navi I wanted.

When the first main button is active, the hover function of itīs sub buttons does not work. The sub buttons are only blue.
  #18  
Old Mar 13, 2009, 07:14 PM
Tigger
 
35 posts · Feb 2009
No no no .... was my mistake. One "#" was missing. It is now working ... that was a bit of a puzzle ! Thank you very very much ! You just sold another piece of gold. Check your account during monday. Itīll be there.
  #19  
Old Mar 13, 2009, 07:15 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
It seems to work. The color: is missing from the last code block of post #16

div#flexi-pages-1 ul li.current_page_item ul li a:active,
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: HOVER colors here
background: HOVER colors here
}
  #20  
Old Apr 17, 2009, 12:44 PM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
Flynn,

Been using your Atahualpa theme to build my site, and it is fantastic! Tom Guilmette recommended I visit your site, and I am sold on this great theme!

I am trying to have my Flexi Pages highlighting stick on the page the user is on as well. I see your last post, but do not know where to place that code. Is it in a single specific file, or somewhere else?

Thank you!

Scott Karlins
  #21  
Old Apr 17, 2009, 07:22 PM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
The code from post #19 would be put into HTML/CSS Inserts -> CSS Insert

Greetings to Tom if you speak to him, he's a great guy.
  #22  
Old Apr 18, 2009, 12:46 PM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
Flynn,

Thank you for the speedy reply. Also, Tom says hello!

The code is not working for me. The active page I am on is not staying highlighted. Here is what I inserted into HTML/CSS Inserts -> CSS Insert:

div#flexi-pages-1 ul li.current_page_item ul li a:active,
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: #000000;
background: #FFFFFF;
}

Thank you!

Scott Karlins
  #23  
Old Apr 19, 2009, 04:49 AM
Flynn's Avatar
Flynn
 
3,766 posts · Oct 2008
Munich, Germany
Your flexipages widget got another ID. Looks like it's changing it's ID number each time your remove it from a sidebar and place it there again. The class stays the same so let's use that. Then add !important to ensure that the styles are being applied because classes are less likely to successfully overwrite any existing styles than ID's

div.flexipages_widget ul li.current_page_item ul li a:active,
div.flexipages_widget ul li.current_page_item ul li a:hover {
color: #000000 !important;
background: #FFFFFF !important;
}
  #24  
Old Apr 19, 2009, 11:59 AM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
Flynn,

Weird, still not working... It highlights black only when I hover over them.

I even tred inserting the current ID, and still no go.

If you get a moment, I would appreciate it if you could take a look

Thank you!


Scott Karlins

Last edited by ScottKarlins; Apr 19, 2009 at 10:22 PM.
  #25  
Old Apr 20, 2009, 04:43 PM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
Flynn,

Any insight on this issue? If not, no sweat. I am also trying to contact the author of FlexiPages to see if they have any ideas.

Thank you for your time!

Scott Karlins

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Both Blog page and Static Front page highlight when Blog page selected lomaprietapottery Page & Category Menu Bars 20 Jul 13, 2012 05:58 PM
[SOLVED] Page Menu Sub Menus of Equal Width Craig Mattice Page & Category Menu Bars 4 Jun 17, 2009 04:46 AM
Customizing category menu bar with different images for every item GeoParadise Page & Category Menu Bars 5 Apr 17, 2009 06:50 PM
Dropdown menus displace the page. zoefriedlander Page & Category Menu Bars 3 Apr 16, 2009 12:41 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 04:20 AM.


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