Shinken (shinken) wrote in component_help,
Shinken
shinken
component_help

  • Mood:

Stylesheet help

Ok, I was determined to figure this one out on my own and not ask for help, alas, I've been trying to figure out how to get this to work with the other codes I've got going for days with no luck. A friend of mine who got her S2 stylesheets to work is stumped as well. I merged the "Shrinking and Centering" code from here and the "Components on both Sides" so I could have the components on both sides and it would all be centered. No problemo, that works just fine with no errors. Then once I found that you can do stylesheets (the only thing I'm concerned about it changing my scrollbars colours) and attempted to put those in..... I got errors. I've searched through the community for other methods or to see if I can catch what I'm doing wrong and nothing has worked that I've tried and I'm at a loss at what to try next to get it to work.

I know it's probably something rather simple and I'm just looking over it completely, but if anyone could look at what I've got going here from my layer and just tell me where I need to put it or what I need to change, I would love you forever and thank you so much in advance!



layerinfo "type" = "theme";

layerinfo "name" = "My Theme";





function page_layout(Page p) {

#  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>";



  # 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 = "450px";



  # 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.head_content

    """; $p->print_custom_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 you want a picture to be at the top of your journal, edit and decomment this section.

  # """<div align="center"><img src="url here" alt="caption here" title="caption here too" /></div>""";



  if($k1Swidth != "") {

    """<table style="border: 0px; margin: auto; padding: 0px; width:$k1Swidth;"><tr><td>""";

  }



  

   # 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>

  """;

  

#  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>

  #  """;





  #  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>

""";

# 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>

  """;

}







I figured I would just have to replace this:

   <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>

    $p.head_content

    """; $p->print_custom_head();



With the tutorial code I found and it came up with errors when I did so.
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 2 comments