Not signed in ( Sign In)

Categories

Welcome, Guest

Want to take part in these discussions? Sign in if you have an account, or apply for one below

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

    •  
      CommentAuthorrodrigo
    • CommentTimeMar 22nd 2010 edited
     permalink
    Hello again =)

    Im making a theme for FP and so far it's all ok.

    Now i'd like to know if there's a way to add an "id" to the current page's menu item i.e. say i clicked in "2010" in "archives" link in the menu; can i have an id="active" in
    <li><a href="blah">2010</a></li>
    to make it:
    <li id="active"><a href="blah">2010</a></li>

    The purpose of this is to style the current page's menu link.

    Thanks mucho for your reply =)
    •  
      CommentAuthorStanley
    • CommentTimeMar 27th 2010
     permalink
    Hi, take a read of this post and see if it answers your question.

    Unfortunately it seems that using the standard FP menu makes it difficult to achieve what you want to do.

    If you want to try it there's a menu plugin which was in the works to try and get around the problem, though I tried it and hit problems. You may want to look at it yourself.

    I use my own custom menu which gives me an active page link style. This is also mentioned in the above thread.
    •  
      CommentAuthorrodrigo
    • CommentTimeMar 28th 2010
     permalink
    Sweet!

    Tyvm, there's enough info on there to make it work =)
    •  
      CommentAuthorrodrigo
    • CommentTimeApr 25th 2010 edited
     permalink
    Follow up (a little late).
    I didn't have the time to post this follow up since i was busy making sure there's no match for Flatpress when it comes to simplicity (i.e. I tried a lot of blog softwares and CMS and I'm back here convinced I love FP)

    Background
    The original idea was to find a way to highlight the current page's link within the menu so if i'm in about page for example, about link in menu would be highlighted.
    I tried to mess with making a widget for this but finally realized an script was going to be much more easier; and it was.
    Im leaving this here in the hope someone else can make it work better, although it already works like a charm and i'm improving it as we speak.

    How it works
    What it does it's simple, it creates an array with all the links in the menu tree and compares them with the current url in the browser, then it simply adds ">>" in front of the text of that link.
    The result is the current page link with ">>" added to it, so:
    Some random link
    becomes:
    >> some random link

    Which gives us perfect feeedback about what page are we on.

    To do

    • Code to change the class or id of the element instead of styling within the script. Done.


    Caveats
    There are some urls for which this won't work:

    • Domain name with no stuff following it: http://localhost/

    • Url after clicking in Next page >> or << Previous Page

    • The url for posting a comment


    It's not really an issue but it kinda kills the effect.

    Word of advise
    Be sure that you have a div or some other element to contain your menu code inside, that way the code wont affect any stuff outside the anchors of the menu.

    The code

    <script type="text/javascript">
    window.onload = function() {
    var activeLink = document.location.href;
    var menuElems = document.getElementById("menu");
    var target = menuElems.getElementsByTagName("a");
    for (x=0; x<target.length; x++)
    if (target[x].href == activeLink)
    target[x].innerHTML = ">> "+target[x].innerHTML;
    };
    </script>


    How to
    Dead simple:

    1. Activate the plugin headstuff.

    2. Open pf-plugins/headstuff/plugin.headstuff.php

    3. Insert the code between the "<|!REG3XP0!>" and "|>" lines.

    4. Change menu in "document.getElementById("menu");" with the id of your actual menu (for Leggero and I'm guessing most Leggero-based themes, this will be column)

    5. Save and enjoy!


    Further styling

    • Optionally we can change the style of the links or its parent by changing:
      target[x].innerHTML = ">> "+target[x].innerHTML;
      for something like:
      target[x].style.background = 'black';
      or something similar.
      If you're not styling the anchors, try the styling its parent instead (in my case it's a li element)

    • If you need strong styling then don't style with the script, just change the class of the anchor:
      target[x].className = 'newClass';
      or its parent:
      target[x].parentNode.className = 'NewClass';
      and have the style defined in the css; that will keep the code as small as posible.


    Oh, Btw it's completely cross-browser =P

    Let me know how it works for you and if you have any good idea to improve it =)