2009-03-30

2009-03-30

Gabrys 1238412897|%e %b %Y, %H:%M %Z|agohover

• Added "current-link" CSS class to links in the top bar that point to the current page
  • This allows you to give them different look (when using custom CSS)
  • If you want to use the mechanism outside of top bar, surround the links that need to be affected with [[div class="mark-current-link"]]...[[/div]]

---

Piotr Gabryjeluk, Wikidot Inc.
visit my blog

Last edited on 1238505366|%e %b %Y, %H:%M %Z|agohover By Squark + Show more

Re: mark-current-link

Ed Johnson 1238451561|%e %b %Y, %H:%M %Z|agohover

I'm having trouble getting this to work. The [[div class=...]] method works fine, but I can't seem to get it to change the look of my menu items on the top bar menu.

Can you point us to a specific example of this?

Thanks,
-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: 2009-03-30

James Kanjo 1238702728|%e %b %Y, %H:%M %Z|agohover

When you say use a div block: [[div class="mark-current-link"]]...[[/div]]

Do you mean like this:

[[div class="mark-current-link"]]
Blah blah [[[same-page]]] blah blah [[[different-page]]]
[[/div]]

And only the same page link will be affected, or will all links be affected?

---

λ James Kanjo | blog | photos | contact

Last edited on 1238738284|%e %b %Y, %H:%M %Z|agohover By James Kanjo + Show more

Re: 2009-03-30

James Kanjo 1238738538|%e %b %Y, %H:%M %Z|agohover

I tried these codes in my CSS:

.current-link {
    display: none;
}
 
.mark-current-link {
    display: none;
}

Neither have an affect on the navigational elements.

---

λ James Kanjo | blog | photos | contact

Re: 2009-03-30

GregWaddell 1247555468|%e %b %Y, %H:%M %Z|agohover

Did anyone ever get this to work? I would like to employ the same technique on my wiki but there is not enough information in these posts for me to understand how you are doing it. I too want to have my side-bar indicate the page I am on by giving the <li> link a different bullet.

---

Greg Waddell
Real Men Walk by Faith

Re: 2009-03-30

activeside 1266240203|%e %b %Y, %H:%M %Z|agohover

It's very easy. The top-bar navigation generate a class .current-link in the selected list element:

<a href="/menuitem" class="current-link">Menuitem</a>

All you have to do is to call the .current-link class in the CSS and style it as you want.

For instance :

#top-bar li .current-link { background-color:red; }