Log in

No account? Create an account
[paid accounts] header navigation links (order/add/change/images)
July 3rd, 2007 @ 10:53 pm
This tutorial lets you take full control of your header navigation:
- NEW: add linebreaks and format each line individually
- add skiplinks
- add (an unlimited number of) custom links
- change the URL of standard links
- reorder them
- use images instead of text links
- link the current view
(last updated: March 31, 2009)

this code allows customization already addressed in cyrnelle's tutorial on adding a link, and s2flexisquared's tutorial on rearranging the links.

Step 1
You need to have created a theme layer and a style before you can follow this tutorial.
What are layers and styles?
Adding a theme layer to an existing layout

Step 2
If you have a function Page::lay_print_header() in your theme layer already, we need to merge these codes. Please leave a comment with a link to your viewable theme layer, and to any tutorials you followed previously that involved this function.

Step 3
Copy & paste this code into your theme layer, and adjust the red parts to your wishes. Comments to explain what's what are green.
function Page::lay_print_header()
"Prints header"
  var Page page = get_page();
  var string title = $this->title();
  # by default, LJ can print the following links in the header navigation:
  # userinfo ... the profile page
  # recent ..... the recent entries page
  # friends .... the friends page (no filter)
  # archive .... the calendar (current year page)
  # tags ....... the visible tags page
  # the skiplinks are not available in the header by default, but were added by this tutorial:
  # forward .... the 'skip a number of entries forward' link (younger entries)
  # back ....... the 'skip a number of entries back' link (older entries)

  # specify the URL of any additional links you'd like to show up in the header navigation
  #                 of LJ default links that you'd like to override (except skiplinks)
  #                 (e.g. to link to a friends filter rather than the normal friends page)
  #                 if you don't want to change anything, leave empty curly braces {};
  var string{} links = { "link1"   => "http://www.google.com",
                         "link2"   => "http://news.livejournal.com",
                         "friends" => "http://me.livejournal.com/friends/filter" };

  # specify the order in which the links are supposed to show up (use "|" to add linebreaks):
  var string[] order = ["recent", "friends", "archive", "tags", "userinfo", "|", "link1", "link2", "|", "forward", "back"];

  # specify the link text:  can be text or an image tag (<img src='IMAGE URL'> ... please use single quotes around the URL)
  #                         or leave blank to use the text set in the Customization Wizard for the default links and skiplinks
  #                         (custom links will show as "Unknown View" if left blank)
  var string{} text = { "userinfo" => "",
                        "recent"   => "",
                        "friends"  => "",
                        "archive"  => "",
                        "tags"     => "",
                        "forward"  => "",
                        "back"     => "",
                        "link1"    => "first new link",
                        "link2"    => "second new link" };

  # link current view: set wether or not you want the current view
  #                    (e.g. the navigation item saying Friends while you're on your friends page)
  #                    to be a link (set it to true) or not (set it to false).
  var bool link_current_view = false;

  # display website: set whether or not to print the website specified in the Customization Wizard
  #                  (if set to true, website will always display as the very first link)
  var bool display_website = true;

  # --- do not edit beyond this point --- #

  print  """
  <div id="header">
    <ul class="navheader">""";
      var int line = 1;

      # website specified in Customization Wizard
      var string website_name = $.journal.website_name ? $.journal.website_name : $*text_website_default_name;
      if ($.journal.website_url != "" and $display_website == true)
          println safe """<li class="navline$line"><a href="$.journal.website_url">$website_name</a></li>""";
      # link in the order specified in $order
      var string linktext;
      var string linkurl;
      foreach var string v ($order) {
        if ($v == "|")
        { print "<br>"; $line++; continue; }
        $linktext = $text{$v} == "" ? lang_viewname($v) : $text{$v}; # custom link text or HTML, otherwise default LJ view name
        $linkurl = clean_url($links{$v}) == "" ? $.view_url{$v} : $links{$v}; # custom URL if valid, otherwise default LJ view url
        if (($v == "forward" or $v == "back") and $this isa RecentPage) # works for both friends and recent view
          var RecentPage pageext = ($this as RecentPage);
          if ($v == "forward")
            $linkurl = $pageext.nav.forward_url;
            $linktext = $text{$v} == "" ? $*text_skiplinks_forward : $text{$v};
          elseif ($v == "back") {
            $linkurl = $pageext.nav.backward_url;
            $linktext = $text{$v} == "" ? $*text_skiplinks_back : $text{$v};
        if (not (($v == "forward" or $v == "back") and $linkurl == ""))
          if ($.view == $v and $link_current_view == false)
            println """<li class="view navline$line">$linktext</li>""";
          elseif ($.view == $v)
            println """<li class="view navline$line"><a href="$linkurl">$linktext</a></li>""";
              println """<li class="navline$line"><a href="$linkurl">$linktext</a></li>""";
      print safe """
      <div class="title">
      <div class="subtitle">

Step 4 (optional)
If you want to style the individual lines of the navigation links, you can use CSS such as this:
.navline1 { font-size: 13px; }
.navline2 { font-size: 10px; }
.navline3 { font-size: 8px; }
( Post a new comment )
albur_lily on October 27th, 2007 09:36 pm (UTC)
I don't suppose there is a way to delete a link in the navigation using Custom CSS? (Free S2 account for a community, trying to get rid of 'Friends' link).
Snakelingsnakeling on October 27th, 2007 09:43 pm (UTC)
Yep :)
ul.navheader li+li+li+li { display: none; }
ul.navheader li+li+li+li+li { display: inline; }
I can't test it in IE, so I've no idea how it behaves in IE6.
(no subject) - albur_lily on October 27th, 2007 10:18 pm (UTC)
(no subject) - snakeling on October 27th, 2007 10:22 pm (UTC)
(no subject) - albur_lily on October 27th, 2007 10:28 pm (UTC)
(no subject) - snakeling on October 27th, 2007 10:34 pm (UTC)
(no subject) - hinoai on September 22nd, 2010 12:29 pm (UTC)
(no subject) - kentucka on September 22nd, 2010 08:48 pm (UTC)
(no subject) - hinoai on September 23rd, 2010 12:47 am (UTC)
(no subject) - futterwackens on May 14th, 2015 06:01 pm (UTC)
(no subject) - snakeling on October 27th, 2007 09:44 pm (UTC)
girl; obsessed: lostcomplications_g on May 28th, 2008 08:50 am (UTC)
If I only want to do one part of this (set the currently selected page as a link) do I still have to include the whole code (all the green text and red)? I don't want to change anything else, or have it mess up me other coding.

Would that apply to other code too? Or would I always have to include the whole lot?
Veronika: [geek] lj codingkentucka on May 28th, 2008 05:18 pm (UTC)
if you don't have the function in your theme layer yet, here's your code. the red part is different from standard Flexible Squares.
# Header
function Page::lay_print_header()
"Prints header"
    var Page page = get_page();
    var string title = $this->title();

    print  """
    <div id="header">
    <ul class="navheader">""";
            var string website_name = $.journal.website_name ? $.journal.website_name : $*text_website_default_name;
                if ($.journal.website_url != "")
                    println safe """<li><a href="$.journal.website_url">$website_name</a></li>""";

                foreach var string v ($.views_order) {
                    if ($.view == $v) {
                        """<li class="view">"""; "<a href=\""+$.view_url{$v}+"\">"; println lang_viewname($v) + "</a></li>";
                            } else {
                            println "<li><a href=\""+$.view_url{$v}+"\">"+lang_viewname($v)+"</a></li>";
        print safe """
        <div class="title">
        <div class="subtitle">
(no subject) - complications_g on May 30th, 2008 06:03 am (UTC)
behold, I am your digital rulertypicrobots on March 26th, 2009 02:52 am (UTC)
Thanks for the tutorial!

Is there a way to add custom links beneath the navigation links, and also control their font size? I posted pictures here to show what I mean. I saw in the comments above you say to add < br >, but I'm not sure where.
Veronika: [geek] lj codingkentucka on March 27th, 2009 11:41 am (UTC)
give me some time, I'll add that as a feature to this tutorial so that the different lines of links can be styled via CSS classes.
(no subject) - kentucka on March 31st, 2009 12:48 pm (UTC)
The Uncouththe_uncouth on May 28th, 2009 04:44 pm (UTC)
I'm assuming I can also use this code to remove some of the links as well?

I'm just looking to have my recent entries, archive, tags, and then a few of my own links.
Veronika: [geek] lj codingkentucka on May 28th, 2009 05:50 pm (UTC)
correct. anything that you don't put into the order won't be printed.
To Hell with this. I'm gonna live!: {cb} Christian close-upjustmyb0nes on June 9th, 2009 04:10 pm (UTC)
thank you so much for this!!
(no subject) - moochemooche on November 29th, 2009 07:39 pm (UTC)
Veronika: [geek] lj codingkentucka on November 29th, 2009 09:03 pm (UTC)
the texts can be changed here, look for "Text used to link to the 'Recent Entries' view" and so on.

this code is only needed if you want to put up links to somewhere that LJ doesn't link automatically.
Rebekkaloulila on June 7th, 2010 04:15 pm (UTC)
I'm trying to create a hover effect for my header navigation links. I found this: http://community.livejournal.com/the_lj_reboot/10124.html tutorial, but I don't know what exactly to put into the theme layer, can you help me?
Veronika: [geek] lj codingkentucka on June 7th, 2010 05:18 pm (UTC)
does this help?

or, for having an image instead of text in the header and a hover effect on those images, this?

btw: both of these links can also be found in the Header section of the Tutorials listing in the community.
(no subject) - loulila on June 7th, 2010 05:29 pm (UTC)
(no subject) - kentucka on June 7th, 2010 06:10 pm (UTC)
Zari-sensei: AtLA HPazardarkstar on July 8th, 2010 03:21 am (UTC)
Thanks for posting this. It was a big help.

But how do I remove the website link?
Veronika: [geek] lj codingkentucka on July 8th, 2010 03:44 pm (UTC)
  # display website: set whether or not to print the website specified in the Customization Wizard
  #                  (if set to true, website will always display as the very first link)
  var bool display_website = true;
set this from true to false
(no subject) - azardarkstar on July 9th, 2010 01:40 am (UTC)
tastelikepixietastelikepixie on October 30th, 2010 02:22 pm (UTC)
Thank you so much for this tutorial! Really appreciate it

Was trying to figure out how to add those image links, until I saw this.
Pattywoodycakes on December 14th, 2010 12:49 am (UTC)
hi, i've tried playing around with this in my layout HERE -- please let me know if it's visible, i'm not sure if 1 or 0 is visible.

anyway, i want to compile it with another tutorial for making my header image as an imagemap. code below

thanks so much!

but it always gives me an error when i put them together. what should i do?
Veronika: [geek] lj codingkentucka on December 14th, 2010 06:43 pm (UTC)
1 is visible - yours right now is not :)

these two codes are not meant to be combined. in your theme layer, take the whole function of this tutorial out, and replace it with the code for the imagemap.
(no subject) - woodycakes on December 15th, 2010 12:39 am (UTC)
(no subject) - kentucka on December 15th, 2010 07:09 pm (UTC)
(no subject) - woodycakes on December 16th, 2010 12:14 am (UTC)
Mrs [insert crush of the week]totallybalanced on February 8th, 2012 10:10 pm (UTC)
is there any way to integrate this (or something similar) into this coding? i know i can separate each link using "|" and control using the navline css but i don't really want the line breaks.

basically i want just enough control to create a navigation that looks something like the left of this tumblr layout.

thank :-)
Veronika: [geek] lj codingkentucka on February 10th, 2012 12:27 pm (UTC)
if you take out the red part of the code:
      foreach var string v ($order) {
        if ($v == "|")
        { print "<br>"; $line++; continue; }
it'll stop it from adding the newlines, then you can use "|".
(no subject) - totallybalanced on February 12th, 2012 05:36 pm (UTC)
auburnavenue on June 3rd, 2012 12:11 pm (UTC)
Hello, I would like to link my navigation to different things other than archives/user info etc. Any idea how to do that?
Veronika: [geek] lj codingkentucka on June 4th, 2012 12:34 pm (UTC)
this tutorial allows you to set up links anywhere (in the code above for example, "link1" goes to google). you just have to know the URI and configure the code.