Welcome to the archive of the old FlatPress support forum. Browse more than a decade of FlatPress wisdom! Login is disabled.

The current FlatPress support forum is available here: forum.flatpress.org
Can I style the current page's menu link? [SOLVED]
  • 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
  • 2010
  • to make it:
  • 2010
  • The purpose of this is to style the current page's menu link. Thanks mucho for your reply =)
  • 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.
  • Sweet! Tyvm, there's enough info on there to make it work =)
  • 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 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 =)
  • This discussion has been closed.
    All Discussions
    Start a New Discussion

    Howdy, Stranger!

    It looks like you're new here. If you want to get involved, click one of these buttons!


    In this Discussion