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 cutthanks 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("
<div class=\"date3\">"+$e.time->date_format("l
<div class=\"date4\">"+$e.time->time_format()
"""</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"+$hea
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-le
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-l
# 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_moo
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_mus
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
