Banner folks: Code and instructions

[navygreen]

(Edited to add: The filter is now off. I figure this post has dropped from most everyone's friends' lists by now, and it's possible other folks might need/want this information as well.)

I've created a filter for just a select few of you who might need or benefit from this information. These include: poetlady, little_liebchen, livemockingbird, shellseeker, beanpop, takarakanashi, starrchld, lotsofjoy, millieweasley and myself. Now that we know who "we" are, let's get to work. ;-)

(lotsofjoy, you're more or less "along for the ride" in this part. You won't yet be able to access the layers I'm specifying because you haven't yet created them. I'll email you that part individually.)

Let the adventure begin! (It's my first time posting code in an update, and I'm crossing my fingers and hoping that it doesn't translate automatically - yikes!)

1. Log in here - http://www.livejournal.com/

2. Make note of your banner/image URL right now. If I'm hosting it for you, I will continue to do so, and the URL should not change. If you're hosting it on your own, write down the exact URL right now for yourself, and keep this address handy for later.

3. Go to Manage // Customize - http://www.livejournal.com/customize/

4. Scroll down. Under 'Related Pages,' click the link for 'the advanced customization' page - http://www.livejournal.com/customize/advanced/

5. Under 'Advanced Options,' click on 'Your Layers' - http://www.livejournal.com/customize/advanced/layers.bml

6. At this point, you will see any recent layers that you have employed on your journal. Specifically, you're looking to modify a 'child' of layer: Component. The LayerID will vary for each user, but it should be seven numerals in length, and it should be a Type: 'Theme,' as well as Name: 'work.' Click on the 'Edit' button next to it once you find the correct layer.

7. You will see the contents of your layer in the large box on the right side of your screen. You may have separate modifications put into your journal besides just your banner (such as tag-search bars or extra 'free text' components), and if so, leave those codes alone. You are looking specifically to remove/re-do the 'print_custom_head ()' function.

Very specifically, you'll need to remove this entire code:

layerinfo "type" = "theme";
layerinfo "name" = "work";
layerinfo "source_viewable" = 1;
 
function Page::print_custom_head() {
    """
    <style type="text/css">
      body {
background-image: 
url(http://onclickpix.com/32065.jpg) ;
        background-repeat: no-repeat ;
        background-attachment: scroll ;
        background-position: top ;
        margin-top: 372px ;
      }
      .header {
        text-align: center;
      }
    </style>
    """;
  }

(It's possible that you might not have the third line in your code - it's only a line used for viewing your layer as an outside source [ie. a help person], but it doesn't hurt to keep it there.)

8. Cut&paste in this entire code (yes, even though it looks funny - it includes a tutorial in each section, should you ever want to tweak some settings on your own):

layerinfo "type" = "theme";
layerinfo "name" = "work";
layerinfo "source_viewable" = 1;

function Page::print_custom_head() {
"""
<style type="text/css">
.header {
  text-align: center;
}
</style>
""";
}

function page_layout(Page p) {
  # Set this to the width that you want both the navbar (if it exists) and the whole journal to be
  # may be percentage (80%) or number of pixels (800px).
  var string k1Swidth         = "100%"; # width of component layout (including entries and components)

  #################################
  ### your header url goes here ###
  #################################
  var string k1Sheader_url    = "http://onclickpix.com/32065.jpg";     # optional header image url
  var string k1Sheader_alt    = "Magical Me.";     # optional header image alt text

  var int    side_spacing     = 0;

  # Start the html document and print the head section which controls the page title, stylesheet information,
  # server supplied head content, and custom header informtion from the print_custom_head function.
  var string title = $p->title();
  """
  <html>
  <head>
    <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
  """;
  $p->print_head();
  """
    <title>$title</title>
  </head>
  """;
  
  # Start the body section of the html document which controls the visible parts of the page.
  """<body style="text-align:center;">""";

  if($k1Sheader_url != "") {
    """<div align="center"><img src="$k1Sheader_url" alt="$k1Sheader_alt" title="$k1Sheader_alt" /></div>""";
  }

  if($k1Swidth != "") {
    """<table border="0" cellpadding="0" cellspacing="0" style="border: 0px; margin: auto; padding: 0px; width:$k1Swidth;"><tr><td>""";
  }

  # Print the navigation bar if it is needed. This can be incorporated into any other tutorials which override
  # the page_layout() function, and should be placed immediately after the <body> tag above.
  if (not $*comp_navbar or $*comp_state=="none") {
    """    <div class="header">""";
    var string[] views_order = ["recent", "friends", "archive", "userinfo"]; # view order
                                                                             # "recent"   = recent   view
                                                                             # "friends"  = friends  view
                                                                             # "archive"  = calendar view
                                                                             # "userinfo" = userinfo link
    var string{} view_text   = { # build text hash
                                "recent"   => $*nav_entries_text,
                                "friends"  => $p.journal_type != "C" ? $*nav_friends_text : $*text_view_friends_comm,
                                "archive"  => $*nav_calendar_text,
                                "userinfo" => $*nav_info_text
                               };
    var string   base_url    = $p.journal->base_url(); # get base url
    var string{} view_url    = { # build url hash
                                "recent"   => get_url($p.journal, "recent"),
                                "friends"  => get_url($p.journal, "friends"),
                                "archive"  => get_url($p.journal, "archive"),
                                "userinfo" => "$*SITEROOT/userinfo.bml?user=$p.journal.username&mode=full"
                               };
    foreach var string v ($views_order) {
      print """<span class="header-item"><a href="$view_url{$v}" class="headerLinks">$view_text{$v}</a></span>""";
    }

    # to add your own links you can use these as a templates
    #  print """<span class="header-item"><a href="$*SITEROOT/tools/memories.bml?user=$p.journal.username" class="headerLinks">memories</a></span>""";
    #  print """<span class="header-item"><a href="http://www.yahoo.com/" class="headerLinks">yahoo!</a></span>""";

    if ($p.journal.website_url != "") {
        print """<span class="header-item"><a href="$p.journal.website_url" class="headerLinks">$p.journal.website_name</a></span>""";
    }
    $p->lay_viewspec_nav();  # prints previous / next links including arrow images
    """	
    </div>
    """;
  }

  # Print a spacer at the top of the page above the components and main area.
  """<div><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></div>""";

  # Start the table which lays out the components and main area in side-by-side layout
  """
  <table cellspacing="0" cellpadding="0" valign="top">
    <tr valign="top" width="100%">
      <td width="$side_spacing">
        <img src="$*PALIMGROOT/component/clear.gif" width="$side_spacing" height="1" alt="" border="0" />
      </td>
  """;
  
  # If the components are supposed to be on the left side of the page, then print them, followed by a column
  # with a spacer which is to seperate the components and the main area.
  if ($*comp_state == "left") {
    print_my_components($p);
    """
    <td width="3">
      <img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0" />
    </td>
    """;
  }

  # Print the main area of the page.
  print_my_entries($p, $title);

  # If the components are supposed to be on the right side of the page, then first print a column with a spacer 
  # and then print the components after the spacer.
  if ($*comp_state == "right") {
    """
    <td width="3">
      <img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0" />
    </td>
    """;
    print_my_components($p);
  }

  # Finish off the table for the body
  """
      <td width="$side_spacing">
        <img src="$*PALIMGROOT/component/clear.gif" width="$side_spacing" height="1" alt="" border="0" />
      </td>
    </tr>
  </table>
  """;

  if($k1Swidth != "") {
    """</td></tr></table>""";
  }

  # End the body section and end the html document
  """
  </body>
  </html>
  """;
} # End code

#####################
### s&c ends here ###
#####################

9. Towards the top of the code, you should see my image link - http://onclickpix.com/32065.jpg - replace that with your own image URL address right now.

10. Just one line below the image address, you'll see my header journal title applied - Magical Me. - replace that text with your own journal title.

11. At the top of the page, click on 'Save & Compile'. You should see a message in the lower box: S2 Compiler Output - Compiled with no errors.

12. Refresh your journal, and you should be able to see your banner once again. If you can't and you need more help, please change your password temporarily and email me with the password. I'll log in to your journal, fix it, and then let you know when I'm done so that you can change your password again.

---

Now, there is one more thing, but I haven't been around to all the journals to see if everyone is experiencing this as well. When my journal banner became void, my background also became all stripe-y. In some appearances and layouts, this stripe-y background is fine. In most cases, however, I'm not really a fan of it. If you'd like to leave yours this way, feel free to stop reading right here. If you want to change it back to the solid background it was before, keep on.

1. Go to Manage // Customize - http://www.livejournal.com/customize/

2. Under 'Change Individual Settings,' click on 'Edit Customizations.'

3. Click on the 'Background' tab.

4. Looking at the very first box - 'Background image' - if there is an address or value pre-filled in, check the box to 'Override default' and then remove the URL.

5. Scroll to the bottom of the page and 'Save.'

6. Refresh your journal again.

Again, feel free to comment or email me to let me know if you need more help. I'd also like to know if you get it fixed, or if there's a better way I could have helped you with this. :-)