?

Log in

 
 
Veronika
[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>""";
          }
          else
          {
              println """<li class="navline$line"><a href="$linkurl">$linktext</a></li>""";
          }
        }
      }
      print safe """
      </ul>
      <div class="title">
        $title
      </div>
      <div class="subtitle">
        $.global_subtitle
      </div>
  </div>
  """;
}

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.
 
albur_lily on October 27th, 2007 10:18 pm (UTC)
That was quick!

The code itself works fine, but I not only lose my friends link, but my profile link too...
 
Snakelingsnakeling on October 27th, 2007 10:22 pm (UTC)
The second line is supposed to add it back. Can you tell me which comm it is? And if you took off a li because you didn't have a website link, did you take it off in both lines?
 
albur_lily on October 27th, 2007 10:28 pm (UTC)
Got it. I had a bit of a mess about with each line and stumbled across the right combination. It was albionic, but as you can see it's fine now. Friend link gone!

Many thanks, you always seem to come to my rescue. :P
 
Snakelingsnakeling on October 27th, 2007 10:34 pm (UTC)
:)
 
Hi-chan (火ちゃん)hinoai on September 22nd, 2010 12:29 pm (UTC)
I put this code in and managed to delete the links that I don't want, but is there a way to add in some new links of my own as well?

Also, how can I delete my journal title from underneath the links?
 
Veronika: [geek] lj codingkentucka on September 22nd, 2010 08:48 pm (UTC)
that's what the original tutorial was for. adding links doesn't work with CSS alone.

as for getting rid of the title, use this CSS:
.title { display: none; }
 
Hi-chan (火ちゃん)hinoai on September 23rd, 2010 12:47 am (UTC)
Yay, it's gone now! Thanks so much!! ^-^

Aww, I was hoping that I could do it with the CSS alone. It looks like I might have to add a style layer after all. Too bad. But thank you so much for your help!
 
(no subject) - futterwackens on May 14th, 2015 06:01 pm (UTC)
 
Snakelingsnakeling on October 27th, 2007 09:44 pm (UTC)
Oh, and take off a li if you don't have a website link.
 
 
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 """
        </ul>
        <div class="title">
            $title
        </div>
        <div class="subtitle">
            $.global_subtitle
        </div>
    </div>
""";
}
 
girl; obsessed: hushiescomplications_g on May 30th, 2008 06:03 am (UTC)
thanks. :)
 
 
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.
 
Veronika: [geek] lj codingkentucka on March 31st, 2009 12:48 pm (UTC)
it's updated :)
 
 
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.
 
Rebekkaloulila on June 7th, 2010 05:29 pm (UTC)
I believe it does, thank you so much!
And thanks for the link to the tutorial section as well. I guess I should have browsed the community a little more thoroughly, but I found this entry with google and already searched for an answer... well, for way too long ;)
 
Veronika: [geek] nerds 4everkentucka on June 7th, 2010 06:10 pm (UTC)
No problem, I just wanted to point out it's there :)
 
 
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
 
Zari-sensei: AtLA Sokkaazardarkstar on July 9th, 2010 01:40 am (UTC)
Ah... Thank you very much. I appreciate it.
 
 
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.
 
Pattywoodycakes on December 15th, 2010 12:39 am (UTC)
oh so i can't have an imagemap for my header and at the same time re-arrange the existing links in my header navigation using this tutorial? just wanted to clarify :)

and thanks! it's visible now hehe.
 
Veronika: [geek] lj codingkentucka on December 15th, 2010 07:09 pm (UTC)
your imagemap already defines the order and position of your header links. and in that code also all the links are hardcoded. so this tutorial isn't needed at all.
 
Pattywoodycakes on December 16th, 2010 12:14 am (UTC)
oh cool! thanks so much. i'll let you know how that works out.

Thanks!
 
 
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 "|".
 
Mrs [insert crush of the week]totallybalanced on February 12th, 2012 05:36 pm (UTC)
ooo that'll work. thanks :-)
 
 
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.