WebsiteBaker Support (2.8.x) > Templates, Menus & Design

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

(1/2) > >>

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: ---.menu a:link, .menu a:visited, .menu a:active {
    background-color: #4F8700;
    color: #FFFFFF;
    display: block;
    padding: 4px 10px;
    text-decoration: none;
}
--- End code ---

try this


--- Code: ---.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;
}

--- End code ---

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: ---.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;
}

--- End code ---

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: ---<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, '<td class="[class]">[a][menu_title]</a>', '</td>', '<table class="menu"><tr>', '</tr></table>');?>

--- End code ---

Sorry, I am terrible with CSS!!!

Navigation

[0] Message Index

[#] Next page