kunzite (kunzite1) wrote in component_help,
kunzite
kunzite1
component_help

s&c w/ rounded navbar

last updated: 12 dec 2005, updated s&c portions to current s&c code

inserted rounded navbar into s&c.

# add to Page::print_custom_head()
function Page::print_custom_head() {
"""
<style type="text/css">
.header-item {
  top: 0px;
}
.header {
  background-image: url(); /* removed the gradient background */
  height:           20px;  /* adjust the height of the component */
}
</style>
""";
}

# add to page_layout()
###################################
#     ROUNDED NAVIGATION BAR      # 
# kunzite1, component-help/669901 #
# overrides page_layout(Page p)   #
###################################
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 (70%) or number of pixels (700px).
  var string k1Swidth      = "70%";
  var string k1Sheader_url = ""; # optional header image url
  var string k1Sheader_alt = ""; # optional header image alt text</span>

  # Calculate the corner_color for the new rounded navigation bar
  var Color header        = $*header_bgcolor;
  var Color headerMinus5  = $header->darker(50);
  var Color headerPlus3   = $header->lighter(30);
  var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);

  # 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 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") {
    """
     <table width="100%" cellspacing="0" cellpadding="0" valign="top">
       <tr valign="top" width="100%">
         <td width="3"><img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0"></td>
         <td>
            <table cellspacing="0" cellpadding="0" border="0" width="100%">
              <tr>
                <td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-top-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
                <td class="dkLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
                <td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-top-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
              </tr>
              <tr>
                <td class="ltLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
              </tr>
              <tr>
                <td class="tabBg"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
              </tr>
              <tr>
                <td class="dkLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
                <td class="ltLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
                <td class="tabBg" width="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
                <td class="tabBg" width="100%">
    """;
    """    <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"   => "$base_url/",
                                "friends"  => "$base_url/friends/",
                                "archive"  => "$base_url/calendar/",
                                "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}">$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">memories</a></span>""";
#    print """<span class="header-item"><a href="http://www.yahoo.com/">yahoo!</a></span>""";

    if ($p.journal.website_url != "") {
        print "<span class=\"header-item\"><a href=\"$p.journal.website_url\">$p.journal.website_name</a></span>";
    }
    $p->lay_viewspec_nav();  # prints previous / next links including arrow images
    """	
    </div>
    """;
  }
  """
                </td> 
                <td class="tabBg" width="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
                <td class="ltLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
                <td class="dkLine" width="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
              </tr>
              <tr>
                <td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-bottom-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
                <td class="tabBg"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
                <td valign="top" rowspan="3" colspan="3" width="5"><img src="$*PALIMGROOT/component/curve-bottom-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
              </tr>
              <tr>
                <td class="ltLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
              </tr>
              <tr>
                <td class="dkLine"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
              </tr>
            </table>
          </td>
          <td width="3"><img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0"></td>
        </tr>
      </table>
  """;
  # 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="3">
        <img src="$*PALIMGROOT/component/clear.gif" width="3" 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="3">
        <img src="$*PALIMGROOT/component/clear.gif" width="3" height="1" alt="" border="0" />
      </td>
    </tr>
  </table>
  """;

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

  # End the body section and end the html document
  """
  </body>
  </html>
  """;
}
Tags: admin: deprecated, user: kunzite1
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 7 comments