Components on Both Sides: component_help

Ok, I think I have the code fixed the best I can. I couldn't figure out how to make it *not* stretch the page out with the userpics on each entry. It works fine on every page but the recent entries page. So if you use this, you'll want to turn off the "userpics on recent page" option.

Also, you can still use your free_text components, but you can't choose which side they will go on. They will print under your profile, calendar, and links components. But for some reason I can't get the if_viewer_is_owner or whatever it is to work in the custom components in the new column. So I kept my "update journal" component in my free_text so I could still use that function.

To keep the navigation bar at the top, use this tutorial: http://www.livejournal.com/community/component_help/184907.html


###  Putting Components on Both Sides.
  #  First we start with the "editting the page layout" code.

function page_layout(Page p) {
   var string title = $p->title();

  #  We have a few variables we need to stick in...
  #  These first ones are for the component corners, so they will match your journal without you having to manually set the code for them.

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);

  #  The next ones are for the actual components.  For some reason, we can't use the print_comp_header/print_comp_footer in the page layout, so I had to make up new variables that will print out the print_comp_header/print_comp_footer.

var string comp_header_open = "<tr><td valign='top' rowspan='3' colspan='3' width='5'><img src='$*SITEROOT/palimg/component/curve-top-left.gif$corner_color' width='5' height='5' border='0' /></td><td class='dkLine'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td valign='top' rowspan='3' colspan='3' width='5'><img src='$*SITEROOT/palimg/component/curve-top-right.gif$corner_color' width='5' height='5' border='0' /></td></tr><tr><td class='ltLine'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='tabBg'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td></tr><tr><td class='dkLine' width='1' rowspan='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td class='ltLine' width='1' rowspan='2'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td class='tabBg' width='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='tabBg' width='100%'><div class='sideHeader'>";

var string comp_header_close = "</div></td><td class='tabBg' width='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='ltLine' width='1' rowspan='2'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td class='dkLine' width='1' rowspan='3'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='medLine' colspan='4'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='dkLine' colspan='5'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='dkLine' width='1'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td><td class='compBg' width='1'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='compBg' width='1'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='compBg'><div class='compFont'>";

var string comp_footer = "</div></td><td class='compBg' width='1'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='compBg' width='1'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td><td class='dkLine' width='1'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td class='dkLine' colspan='8'><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='1' border='0' /></td></tr><tr><td><img src='$*SITEROOT/palimg/component/clear.gif' width='1' height='3' border='0' /></td></tr>";

  #  Now we move on to the actual page layout...
  #  I've got it set up to have an image at the top.  I didn't do it like the "graphics above entries" tutorial though, I just put the image there and centered it.  So if you want the image in tables and all that, check the "graphics above entries" tutorial.
  #  If you don't want an image, take out the blue line below that has the image tag in it.
  #  Right after the image tag, we will start the table for the layout.

"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 <title>$title</title>
""";
$p->print_custom_head();
"""
</head>
<body>

<center><img src="YOUR IMAGE URL GOES HERE" border="0"></center><br>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
<tr valign="top" width="100%">
  <td width="3" valign="top">
   <img src="$*SITEROOT/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";

  #  This is where your left component column will be.  You have two options here.  If you use print_my_components($p); it will print out whatever components you have set up to show (i.e. profile, calendar, links, free_text.
  #  If you'd rather have those on the right side and put custom components on the left, you have to manually put in the code here.  (This is where those variables at the top come in to play.)
  #  I'm going to have it set how my personal journal is...  print_my_components on the left, and custom components on the right.  If you want to switch it around, comment (#) the blue lines and decomment the pink lines.

     print_my_components($p);

  # """
  # <td border="0" cellpadding="0" cellspacing="0">
  #  <table  width="175px" border="0" cellpadding="0" cellspacing="0">

  #  You can repeat the following 5 lines as many times as you want to add more components.

  #  $comp_header_open
  #  COMPONENT HEADER TEXT GOES HERE
  #  $comp_header_close
  #  TEXT INSIDE COMPONENT GOES HERE
  #  $comp_footer

  #  </td>
  #  </tr>
  #  </table>
  #  </td>
  #  """;

"""
  <td width="3">
   <img src="$*SITEROOT/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   print_my_entries($p, $title);
"""

  <td width="3">
   <img src="$*SITEROOT/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";

  #  Here's your right components column.
  #  Like in the left components, I've got this set up like mine.  So on this side it's set to use the custom components.
  #  If you'd rather use the standard components, comment (#) the blue text and decomment the pink text.

  #  print_my_components($p);

"""
<td border="0" cellpadding="0" cellspacing="0">
<table  width="175px" border="0" cellpadding="0" cellspacing="0">

$comp_header_open
COMPONENT HEADER TEXT GOES HERE
$comp_header_close
TEXT INSIDE COMPONENT GOES HERE
$comp_footer

</td>
</tr>
</table>
</td>
""";

"""
 <td width="3">
   <img src="$*SITEROOT/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>

 </tr>
</table>
</center>
</body>
</html>
""";
}  #  End function page_layout

editted to add... Sorry,

kunzite1 I meant to put a thank you in here for helping me with the comp_header_open, comp_header_close, comp_footer things! That made it *so* much easier to do the components, Thank you so much :)

Components on Both Sides

Hiding Share (tell_friend) Icon from Linkbar and Separating Entry Icon from Entry Text

What Did LJ's Userhead Code Change To?

Ok, I'm no CSS expert...

Error

Hiding Share (tell_friend) Icon from Linkbar and Separating Entry Icon from Entry Text

What Did LJ's Userhead Code Change To?

Ok, I'm no CSS expert...