angharad governal (angharad_gov) wrote in component_help,
angharad governal
angharad_gov
component_help

user pic & entry space problem

i've been using the tutorials on the meta data and spiffy date found here and here and i've gotten my layout to look the way i'd like. however, i'm running into a little problem w/ regard to spacing in between the user pic and the entry box. i don't seem to have space in between them.i know it's probably an error in the code -- i pretty much cut and paste and winged my way to getting everything to work and look the way i want.

can anyone take a look at my code and tell  me where i can fix it so i can have space in between the user pic and the entry box? my LJ: angharad_gov; the code is under the lj cut

thanks for any help! this comm is amazing :)

btw, the spacing problem can't be seen in IE, but it is showing up the firefox (1.0 PR) browser.




function print_stylesheet() {

  """



body { background-color: #ffffff;



margin-top: 5px; margin-left: 5px;

margin-right: 5px;

font-family: Georgia, serif;

font-size: 12px;

color: #000000;

}



td, tr {

font-family: Georgia, serif;

font-size: 12px;

color: #000000;

line-height: 22px;

}



a {

color: #666666;

text-decoration: none;

}



a:visited {

color: #666666;

}



a.calendarLink {

color: #000000;

}



a.header {

color: #666666;

}

a.headerLinks {

color: #666666;

}



a:hover { text-decoration: underline;}



select {

font-family: Georgia, serif;

font-size: 12px;

background-color: #ffffff;

}



input {

line-height: normal;

background-color: #ffffff;

color: #000000;

}



.subject { font-weight: bold; }

.medium { margin-top: 3px;}



.header {

background-image: url("http://stat.livejournal.com/palimg/component/top-bg.gif/ptffffff");

background-repeat: repeat-x;

height: 25px;

}



.userTitle {

font-size: 20px;

text-weight: bolder;

color: #000000;

line-height: 25px;

                        text-align: center;

}



.userSubTitle {

font-size: 13px;

color: #000000;

line-height: 22px;

                         text-align: center;

}



.header-item {

padding-left: 15px;

position: relative;

top: 5px;

}



.dkLine { background-color: #cdcdcd; }

.ltLine { background-color: #ffffff; }

.medLine { background-color: #e1e1e1; }

.divLine { background-color: #000000; }

.tabBg { background-color: #ffffff; }





}



.entryHolderBg {

background-color: #ffffff;

color: #000000;

padding-top: 12px;

padding-right: 12px;

padding-left: 12px;

padding-bottom: 12px;

}



.entry {

padding-top: 12px;

padding-right: 12px;

padding-left: 12px;

padding-bottom: 12px;

background-color: #ffffff;

font-size: 13px;

}



.entryHeader {

font-size: 15px;

font-weight: bold;

                        text-align: center;

}



.entryComments {

font-size: 12px;

margin-top: 8px;

margin-left: 8px;

color: #000000;

}



.entryDash {

background-color: #e1e1e1;

width: 100%;

height: 1px;

}



.sideHeader {

font-size: 12px;

color: #000000;

                        text-align: center;

}



.comp { margin-bottom: 3px; }



.compBg { background-color: #ffffff; }



.compContent {

padding-left: 6px;

padding-right: 6px;

padding-bottom: 6px;

padding-top: 3px;

line-height: 18px;

color: #000000;

}



.compFont {

color: #000000;

}



.compList {

line-height: 20px;

padding-left: 6px;

}



.userPic { border-color: #e1e1e1;

                  

                            



}



.shortLine {

width: 20px;

background-color: #e1e1e1;

margin-bottom: 1px;

}



.calendarInactive {

background-color: #ffffff;

font-size: 9px;

letter-spacing: 2px;

color: #000000;

}



.calendarActive {

color: #000000;

background-color: #ffffff;

font-size: 9px;

letter-spacing: 2px;

}





                 .date2 {

                  line-height: 17px;

                  margin-top: 1px;

                  font-family: georgia;

                  font-size: 12pt;

                  color: #666666;

                  letter-spacing: 10px;

                  text-align: right;

                }



                  .date3 {

                  line-height: 12px;

                  margin-top: 5px;

                  margin-right: 0px;

                  font-family: georgia;

                  font-size: 10pt;

                  color: #666666;

                  letter-spacing: 5px;

                  text-align: left;

                }



                  .date4 {

                  line-height: 20px;

                  margin-top: -17px;

                  margin-right: 10px;

                  font-family: georgia;

                  font-size: 10pt;

                  color: #cccccc;

                  letter-spacing: 2px;

                  text-align: right;

}







""";









}





###########################

#scrollbar/meta/music/    #

###########################





### Override the printing of entries. This affects the Recent/Day pages, Friends pages, and Entry pages.

function print_entry(Page p, Entry e, Color bgcolor, Color fgcolor, bool hide_text) {

  var int maxLength = 1*1;#some value... I like 600 because that's roughly 100 words

  # Print the header for the entry. It prints in the default form "[<icon> ]<time> <date>" where:

  #   <icon> is the security icon (ie. lock if protected, eye if private, or none if public)

  #   <time> is in the default time format (eg: 03:46 am)

  #   <date> is bold and in the "long" format (eg: November 25th, 2003)

  # The ordering can be adjusted however needed, and you can also modify the formats that date and time print in.

  # This can all be done in the red section below. For specifications of available formats or how to construct

  #   your own formats, you can see: http://www.livejournal.com/doc/s2/siteapi.core1.html#siteapi.core1.dateformats

  



  print_entry_header((defined $e.security_icon?"$e.security_icon   ":"")+

"<div class=\"date2\">"+$e.time->date_format("%%day%%")+"</div>

<div class=\"date3\">"+$e.time->date_format("long")+"</div>

<div class=\"date4\">"+$e.time->time_format()+"</div>");

  """</div>""";



  # This is where we begin the main section of the entry, ie. the "entry background"

  # I was trying to use print_system_box_top(), but the code it generated didn't seem to match up with the page source.

  # I was having some problems with the usericon being displayed as well, so I just decided to write my own.

  """

  <table cellspacing="0" cellpadding="0" border="0">

    <tr>

      <td width="20" colspan="3" class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

    </tr><tr>

      <td width="20" class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

  """;





  # Check to see if we need to display a usericon and/or journal names, and if so, then print them

  # Cases - 1. We are viewing a friends page, so we need to display icons if they exist and journal/poster names

  #         2. We are viewing a recent/day/entry page, so we display only the icon if it exists and

  #            the user has set recent userpics on.

  # The code in red is the logic to decide whether or not to show the userpics. You can modify it as you see fit.

  if ($p.view=="friends" or ($*show_entry_userpic and defined $e.userpic) or $e.journal.journal_type=="C") {

     # Start the table that will hold the icon and/or names

     """

     <td class="entryHolderBg" valign="top">

     <table cellspacing="0" cellpadding="0" border="0" align="center">

       <tr>

         <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

       </tr>

     """;

     # Display the icon if it exists

     if (defined $e.userpic) { """

       <tr>

         <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="2" alt="" border="0" /></td>

         """;

         # If we are on the friends view, then we want to print the extra border around the image that have the colors

         # which are custom defined. If you don't like the colors or the border on the friends view, then you can just







         # remove the blue segments. By default the recent/day/entry pages have a border around the usericons. If a user

         # has a non-rectangular image, this may look strange, so you can replace the 1 with a 0 to remove the border.

         #

         if ($p.view=="friends") {

            """ <div style="padding-top: 3px; padding-left: 3px; padding-right: 3px; padding-bottom: 3px; background-color: """; print $bgcolor.as_string; """ ;" align="center">

            <img border="1" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" style="border-color: """; print $fgcolor.as_string; """ ;" />

            </div> """;

         }else{

            """ <td align="left" class="userpic"><img border="1" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" /></td> """;

            

         }

         """

       </tr>

     """; }

     # Display the journal and possibly poster name if we are viewing the friends page or any page on a community

     # This code will print the journal the entry was made on, and if the poster is different, will print the poster under it.

     # I made the names centered under the image, but if you want to keep them left aligned as in the original, then

     # remove the blue segments

     if ($p.view=="friends" or $e.journal.journal_type=="C") { """

       <tr>

         <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="2" alt="" border="0" /></td>

         <td align="center" class="ljuser">$e.journal""";

         if ($e.journal.username!=$e.poster.username) {"""

           <div align="center" class="ljuser">$e.poster</div>""";

         } """

         </td>

       </tr>""";

     }

     """

     </table>

  """; }



  # Start the main entry text area

  #   The first line is needed because I did not use print_system_box_top() as stated above

  """<td class="entryHolderBg" width="100%" valign="top">""";

  print_content_top();



  # If the subject is not empty, then print it followed by the line to seperate it from the entry text

  if ($e.subject!="") { """

        <div class="entryHeader">$e.subject</div>

        <div class="entryDash"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>

      </td>

      <td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

    </tr>

    <tr>

      <td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>





      <td class="entry">

  """; }



  if ($e.text->length() > $maxLength) {



  

  }







var Color  header        = $*header_bgcolor;

  var Color  headerMinus5  = $header->darker(50);

  var Color  headerPlus3   = $header->lighter(30);

  var Color  ltLineColor   = $*header_bgcolor->lighter(30);

  var Color  dkLineColor   = $*header_bgcolor->darker(50);

  var string ltLineString  = $ltLineColor.as_string;

  var string medLineString = $*header_bgcolor.as_string;

  var string dkLineString  = $dkLineColor.as_string;

  

  var string corner_color  = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);

  var string flatbox_open  = """<tr><td colspan=7><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 align="center" class="compFont">""";

  var string flatbox_close = """</div><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></tr><tr><td colspan=5><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td></tr>""";











# Print the entry text.



   """ $e.text """;



"""<br/><br/>""";



  # If you want the entry text to be after the mood and music, then you need to do two things:

  #  - decomment the pink lines by removing the #'s from in front of them

  #  - comment out the blue lines by putting a # in front of them

if (size $e.metadata != 0)

{

   var string formatting = "width:37%; margin:1px; float:right;" ;



   #Uncomment the next 2 lines if you want a round style box.

  

var string box_open = """<table cellspacing="0" cellpadding="0" border="0" style="$formatting"><tr><td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td><td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td></tr><tr><td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td></tr><tr><td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="tabBg" width="100%"><div>""";

   var string box_close = """</div></td><td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td><td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td></tr><tr><td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr></table>""";



   #Uncomment the next 2 lines if you want a flat style box.

   #var string box_open  = """<table cellspacing="0" cellpadding="0" border="0" style="$formatting"><tr><td class="dkLine" colspan="7"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" colspan="5"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" colspan="4"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="tabBg" rowspan="1" colspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" rowspan="3" colspan="1"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="tabBg" colspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="tabBg" colspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td></tr><tr><td class="dkLine" width="1" rowspan="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="ltLine" width="1" rowspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="medLine" width="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="tabBg" width="100%"><div class="compFont" style="position:relative; top:-3px; left:2px;">""";

   #var string box_close = """</div></td><td class="tabBg" width="3" ><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td><td class="medLine" width="1" rowspan="2"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td><td class="dkLine" width="1" rowspan="3"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="medLine" colspan="4"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td class="dkLine" colspan="5"><img src="$*PALIMGROOT/component/clear.gif" width="1" height="1" alt="" border="0" /></td></tr><tr><td><img src="$*PALIMGROOT/component/clear.gif" width="1" height="3" alt="" border="0" /></td></tr></table>""";



   print $box_open ;

   if ($e.metadata{"mood"}!="")

   {

      """<span style="font-weight:bold">$*text_meta_mood: </span>""";

      if (defined $e.mood_icon) { """$e.mood_icon """; }

      print $e.metadata{"mood"};

   }

   if ($e.metadata{"music"}!="")

   {

      if ($e.metadata{"mood"}!="") { print "<br />" ; }

      """<span style="font-weight:bold">$*text_meta_music: </span>""";

      print $e.metadata{"music"};

   }

   print $box_close ;

}



  



#Print Mood and/or Music Fields:

   #If we have a mood to print



  

   #Close off the entry text area

  """</div>""";

  print_content_bottom();





  # This is where the fun stuff is!

  # Now we begin the area underneath the entry that holds the comments, link, and entry related buttons.

  """

  <table width="100%">

    </tr>

      <td width="40%" align="left" valign="center">

        <div class="entryComments">

        """;

        # First we print the comment links if the entry allows comments

        if ($e.comments.enabled) {

          $e.comments->print();

        }

        """

        </div>

      </td>

        <td width="20%" align ="center" valign="center"> """;

        # Then print a permanent link to the entry.

        # I have this because I have my journal set to display comment links with "?nc=XX" tacked onto the end,

        # and when I'm copying and pasting links, it's annoying to have there. Also, if you want a link to

        # an entry that has no comments yet, the only link that's shown by default is the reply to link, and that

        # that includes "?mode=reply" which is also annoying to have to remove.

        # Essentially this is here for convenience. If you don't want it, remove the blue segment.

        """



      </td>

      <td width="40%" align ="right" valign="center">""";

        # Then the entry related buttons

        """<div class="entryComments">

          """;

          # The easiest way to do this, which will work for all account types, is as follows, and will display actual buttons.

          # I used to use the code following it, but ran into problems trying to figure out the logic to show the edit button on a community properly.

          # If you'd like text instead of buttons, then you can remove the following line in blue, decomment the lines in pink,

          # and edit as you see fit. Note that using the print_linkbar function will also add next and previous buttons when viewing using the EntryPage.

          #$e->print_linkbar();

          

          # Edit button : Only put up if the person viewing this entry wrote the entry

          # I check that by checking whether the person looking at the page is the owner of the page, and the entry's poster is the page's owner.

          # It puts Edit buttons on my entries, and entries that I post to communities that show on my friends page.

          if (viewer_is_owner() and $e.poster.username==$p.journal.username) { """

           <a href="$e.permalink_url" class="commentLinks">

            <img border="0" width="22" height="20" alt="Link" src="http://stat.livejournal.com/img/btn_link.gif" /></a>

          <a href="http://www.livejournal.com/editjournal_do.bml?journal=$e.journal.username&itemid=$e.itemid">

               <img border="0" width="22" height="20" alt="Edit Entry" src="http://stat.livejournal.com/img/btn_edit.gif" /></a>

            """;

          }"""

          

          <a href="http://www.livejournal.com/tools/memadd.bml?journal=$e.journal.username&itemid=$e.itemid">

              <img border="0" width="22" height="20" alt="Add to Memories" src="http://stat.livejournal.com/img/btn_memories.gif" /></a>

          <a href="http://www.livejournal.com/tools/tellafriend.bml?journal=$e.journal.username&itemid=$e.itemid">

              <img border="0" width="22" height="20" alt="Tell A Friend" src="http://stat.livejournal.com/img/btn_tellfriend.gif" /></a>""";

        """

        </div>

      </td>

    </tr>

  </table></div>

  """;









  # End the entry component and put a spacer after it so that entry components are seperated.

  print_system_box_bottom();

  """ <div><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="3" alt="" border="0"></div> """;



} # end of Function print_entry




Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 0 comments