ShowMenu2 table menu: How do I highlight the current page cell ?

[svsanchez]

Hello community,

I am trying to use make a table menu with ShowMenu2 which will keep the current page highlited. So far I have been only able to highlight the border of the current cell, but I need to highlight the whole cell with another color. Howe can I do this?

Here is the page where I am testing this, please notice the red outline of the "current" page:

www.casa-montevista.com

Thank you!

[jacobi22]

dont use the background-color in a:link in this part here

Code: [Select]

.menu a:link, .menu a:visited, .menu a:active {
    background-color: #4F8700;
    color: #FFFFFF;
    display: block;
    padding: 4px 10px;
    text-decoration: none;
}
try this

Code: [Select]

.menu a:link, .menu a:visited, .menu a:active {
    color: #FFFFFF;
    display: block;
    padding: 4px 10px;
    text-decoration: none;
}
.menu menu-sibling{
    background-color: #4F8700;}
.menu-current {
    background-color: #FF0000;
    color: #12FD34;
    font-weight: bold;
}

the same for the font-color
if you define the color for a:link with color: #ffffff, it works for all links

[svsanchez]

Hello Jacobi, thank you for your reply. I had been able to do this but the problem is that the other buttons don't have a background color, and I need the rest of the buttons to have a different background color, what should I change?

[jacobi22]

take a look to the source code, specially to the menu, the other menu-points used  the css-class called "menu-sibling"

define a background-color for this class "menu-sibling" and a background-color for the current page, called "menu-current"
see it in my last post or use this (with different colors for the text and different background-colors)

Code: [Select]

.menu a:link, .menu a:visited, .menu a:active {
    display: block;
    padding: 4px 10px;
    text-decoration: none;
}
.menu menu-sibling{
    color: #FFFFFF;
    background-color: #4F8700;}
.menu-current {
    background-color: #FF0000;
    color: #12FD34;
    font-weight: bold;
}

you found the "old" code in your file "template.css" in Line 179 and line 203

[svsanchez]

Hello Jacobi, thanks again for helping me with this. I am using the provided css code you sent me but I guess I am missing something in the php code, as I still get the same result. This is how I am calling the menu:

Code: [Select]

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, '<td class="[class]">[a][menu_title]</a>', '</td>', '<table class="menu"><tr>', '</tr></table>');?>

Sorry, I am terrible with CSS!!!

[jacobi22]

i think, here is the problem

Code: [Select]

.menu menu-sibling{
    background-color: #4F8700;}
dont called .menu menu-sibling, use only .menu-sibling

Code: [Select]

.menu-sibling{
    background-color: #4F8700;}

[svsanchez]

YESSS!!! That did it Jacobi, thank you a thousand times!!!

[jacobi22]

Cool

P.S.: if you want.... -> http://www.websitebaker2.org/en/community/donate.php   

[svsanchez]

It's great to find out about the donations! I just did and although a small amount in the few months I have been using WB it has helped me get my business back on track, I will definitely continue contributing as my business grows