WayFinder & CSS

9 Posts

MightyMike Reply #1, 18 years, 10 months ago

When using WayFinder, it seems to get itsstyle from somewhere else than the used css-file. The current page gets a class called ’active’, but I don’t know where to format that class. Any ideas?

47 Posts

ccheney Reply #2, 18 years, 10 months ago

Quote from: MightyMike at Nov 20, 2007, 03:22 PM

When using WayFinder, it seems to get itsstyle from somewhere else than the used css-file. The current page gets a class called ’active’, but I don’t know where to format that class. Any ideas?

Can you show us your site where this is happening?

You might also want to check out the wayfinder examples here:
http://www.muddydogpaws.com/development/wayfinder/features.html

4,205 Posts

dev_cw Reply #3, 18 years, 10 months ago

The current page gets a class called ’active’, but I don’t know where to format that class.

By default wayfinder will assign a class of active to the current document and it’s parents. It will also by default identify the first document in the menu with a class of .first and .last for the last. This can come in very handy for styling menus.

As to how to style these classes; in the most basic form it would be .active {some style here}; but it can also be embedded in deeper like #navigation ul li.active {} . To find this stle in the style sheet look for the ’active’ keyword.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

9 Posts

MightyMike Reply #4, 18 years, 10 months ago

Thanks for the replies so far... I will check these tips in the morning.

The site is http://www.tangeman.net. The horizontal menu should show the active/current page with the same colour as a:hover does. I tried renaming a.current into a.active in the CSS, but that didn’t change anything...

118 Posts

Marcel Reply #5, 18 years, 10 months ago

In your stylesheet, you’ll want to replace

#mainmenu a:hover {
background:#f0f0f0 url(assets/images/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

#mainmenu a.current {
background:#f0f0f0 url(assets/images/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

...with...

#mainmenu a:hover, #mainmenu li.active a {
background:#f0f0f0 url(assets/images/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

The main problem here being you thought the active class was being applied to the anchor when it is actually applied to the list item which is much more handier.

9 Posts

MightyMike Reply #6, 18 years, 10 months ago

Thanks!!! That was it! Lol... it’s obvious I’m new at this...