2009-03-30

2009-03-30

Gabrys 30 Mar 2009 11:34

• 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
visit my blog

Last edited on 31 Mar 2009 13:16 by Squark + Show more

Re: mark-current-link

Ed Johnson 30 Mar 2009 22:19

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 02 Apr 2009 20:05

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 | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Last edited on 03 Apr 2009 05:58 by James Kanjo + Show more

Re: 2009-03-30

James Kanjo 03 Apr 2009 06:02

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 | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Re: 2009-03-30

(account deleted) 14 Jul 2009 07:11

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.

---

Dr. Greg Waddell
Director of Institutional Improvement — Mid-South Christian College
My Blog | Contact | About Me | Twitter | Facebook

Re: 2009-03-30

activeside 15 Feb 2010 13:23

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