unique.wonders. ([info]uniquewonders) wrote in [info]component_help,
@ 2008-04-04 19:35:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:!tutorial, *account level: paid/perm, admin: updates, class: page, function: print_comment, function: print_custom_head, function: print_linkbar, function: print_postlink, user: uw

TUTORIAL: [Comments] Custom Comments

!!! Recently Updated !!!


Difficulty Level3 stars


Instructions
» Copy and paste the code located in the box.
» If you already have some of these properties somewhere in your code, do not copy/paste them again.
» If you already have function Page::print_custom_head() somewhere in your code, do not copy/paste the function again. Only c/p the CSS which is into it.
» If you already have function CommentInfo::print_postlink(), do not copy/paste it again.
» Read the code for further instructions on how to change settings and data. Instructions are in green. Settings and data you can change are in red.
» Enjoy! :)

Thanks & Credit
» Credit goes to [info]kunzite1 for writing 99% of this.
» Heartfelt thanks to the users who beta-tested this and gave me precious feedback.




####################################################
#  CUSTOM COMMENTS (V2) #
#  overrides: #
#  Page::print_custom_head() #
#  CommentInfo::print_postlink() #
#  Comment::print_linkbar() #
#  EntryPage::print_comment(Comment c) #
#  source: #
#  component_help/1204404.html #
####################################################

#===============================================
#
# PROPERTIES PERTAINING TO COMMENTS #
#
#===============================================

### USERPIC PROPERTY ###

# Display the userpic: yes (), no (off) or at half size (small)?

set comment_userpic_style = "";

### COMMENT HEADER PROPERTIES ###

set comments_bgcolor = "#E5E5E5";
set comments_screened_bgcolor = "#ECECEC";

set text_comment_from = "From:";
set text_poster_anonymous = "(Anonymous)";
set text_permalink = "Link";
set text_comment_date = "Date:";
set text_multiform_check = "Select:";
set text_comment_ipaddr = "IP Address:";

set text_comment_reply = "Reply";
set text_comment_frozen = "Frozen";
set text_comment_parent = "Parent";
set text_comment_thread = "Thread";
set text_comment_expand = "Expand";

### COMMENT TEXT PROPERTIES ###

set text_comment_edittime = "Edited at";

##### !!! If you already have this function add the CSS code to your existing function instead !!! #####

function Page::print_custom_head() {
"""
<style type="text/css">

/* Code for the quick reply form */

  .quickreply_entry form, .quickreply_comment form {
    margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 10px;
  }

/* End of code for the quick reply form */

/* Code for the comments icons */

  .comment-img {
    vertical-align: middle !important;
  }

/* End of code for the comments icons */

</style>
""";
}

#===============================================
#
# POST COMMENT LINK #
#
#===============================================


##### !!! If you already have this function, do not c/p it again !!! #####


function CommentInfo::print_postlink() {

  ##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####

  ### Enter your image URL if you want to replace the text link by an image link.

  var string img_url = "";

  ### Enter the width and height of your image URL if you want to replace the text link by an image link.

  var int img_width = 0;
  var int img_height = 0;

  ##### END CONFIGURATION. #####

  ##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####

  if($.show_postlink) {
    var Page p      = get_page();
    var string url  = $.post_url;
    var string text = get_plural_phrase(0, "text_post_comment" + ($p.view == "friends" ? "_friends" : ""));

    	if ($.maxcomments) {
		print safe "$*text_max_comments";
    	}
    	else
	{
    		if ($img_url != "") {

        		if ($p.view == "entry") {
          			$p->print_reply_link({"target" => "topcomment", "img_url" =>$img_url, "alt" => $*text_post_comment,  "title" => $*text_post_comment});
			}
			else
			{
				"""<a href="$url"><img src="$img_url" width="$img_width" height="$img_height" alt="$text" title="$text" border="0" /></a>""";
			}
      
    		} else {

        		if ($p.view == "entry") {
          			$p->print_reply_link({"target" => "topcomment", "linktext" => $*text_post_comment});
			}
			else
			{
	     			"""<a href="$url">$text</a>""";
			}
    		}
	}
  }

}

#===============================================
#
# POST COMMENT LINKBAR #
#
#===============================================

function Comment::print_linkbar() {

  var string link_separator = "&nbsp;";

  # Initialize array/hashes.
  var string[] link_keyseq = [""];
  var string{} link_url = {"" => ""};
  var string{} link_caption = {"" => ""};
  var string{} link_image = {"" => ""};

  var string print = "";

  # Gather current linkbar.
  foreach var string link_key ($.link_keyseq) {
    var Link  link = $this->get_link($link_key);
    $link_url{$link_key} = $link.url;
    $link_caption{$link_key} = $link.caption;
    $link_image{$link_key} = $link.icon.url;
    $link_keyseq[size($link_keyseq)] = $link_key;
  }

  ##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####

  ### Images used as links. If you'd rather use your own, replace $*edit_comment_img, etc. with your URLs.

  $link_image = {
        	"edit_comment" => "$*edit_comment_img",
        	"delete_comment" => "$*del_comment_img",
        	"screen_comment" => "$*scr_comment_img",
        	"unscreen_comment" => "$*unscr_comment_img",
        	"freeze_thread" => "$*freeze_comment_img",
        	"unfreeze_thread" => "$*unfreeze_comment_img",
        	"watch_thread" => "$*track_comment_img",
        	"watching_parent" => "$*tracking_parent_img",
        	"unwatch_thread" => "$*untrack_comment_img",
                };

  ##### END CONFIGURATION. #####

  ##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####

  # Loop through linkbar and add links to print var.
  foreach var string link_key ($link_keyseq)
  {
    	if($link_url{$link_key} != "")
	{
      		$print = $print + """<a href="$link_url{$link_key}">""";
      		if($link_image{$link_key} != "")
		{
        		var string id = "";
        		if($link_key->contains("screen"))
			{
          			$id = "sus_";
        		}
        		if($link_key->contains("freeze"))
			{
          			$id = "fuf_";
        		}
        		$id = "$id$.talkid";
        		$print = $print + """<img id="$id" src="$link_image{$link_key}" alt="$link_caption{$link_key}" title="$link_caption{$link_key}" border="0" class="comment-img" />""";
      		} else {
        		$print = $print + "$link_caption{$link_key}";
      		}

      		$print = $print + "</a>$link_separator";
    	}
  }

  # Hack off last separator.
  $print = $print->substr(0, $print->length() - $link_separator->length());

  # We're done! Let's print it!
  print $print;
}


#===============================================
#
# PRINT COLLAPSED COMMENTS #
#
#===============================================


function EntryPage::print_comment_partial (Comment c) {

  ##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####

  ### COMMENT HEADER OPTIONS ###

  # Opening and closing symbol for the expand link.

  var string link_open_bracket = "(";
  var string link_close_bracket = ")";

  ##### END CONFIGURATION. #####

  ##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####

    if($c.depth == 1) {
        var Comment[] replies;
        $replies = $c.replies;
        var int count = 0;
        foreach var Comment reply ($replies) {
            $count ++;
        }
        var string head;
        if($count > 0) {
            $head = "Thread started by a screened user";
        } else {
            $head = "Comment by screened user";
        }
        print_entry_header($head);
        print_comment_top();
    }
    var string content;
    if($c.screened) {
        $content = "<b>Screened comment</b>";
    } else {
        var string poster = defined $c.poster ? $c.poster->as_string() : "<i>(Anonymous)</i>";
        var string subj = $c.subject != "" ? $c.subject : $*text_nosubject;
        $content =  "<a href=\"$c.permalink_url\">$subj</a> - $poster";
    }
    var Link expand_link = $c->get_link("expand_comments");
    if ($c.thread_url != "" and defined $expand_link) {
        $content = "$content " + "$link_open_bracket" + $c->expand_link() + "$link_close_bracket";
    }
    print_comment_content_top($c);
    "$content";
    print_comment_content_bottom();
}


#===============================================
#
# PRINT FULL COMMENTS #
#
#===============================================

function EntryPage::print_comment(Comment c) {

  ##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####

  ### THREAD TITLE OPTIONS ###

  # You can edit these.

  var string comment_prefix = "Comment by ";
  var string thread_prefix = "Thread started by ";
  var string anonymous_title = "Anonymous";

  ### COMMENT HEADER OPTIONS ###

  # Background color for frozen comments.
  # The one for screened comments must be edited above.

  var Color comments_frozen_bgcolor = "#aaaaff";

  # Link the userpics to the user's userpic page: true or false?
  var bool allpics_link = false;

  # Show the userpic keyword when hovering over the userpic: true or false?
  var bool show_picword = false;

  # Opening and closing symbols for the IP adress.

  var string ip_open_bracket = "[";
  var string ip_close_bracket = "]";

  # Opening and closing symbols for the comment links.

  var string link_open_bracket = "(";
  var string link_close_bracket = ")";

  ### COMMENT LINKS OPTIONS ###

  # Enter the URLs of your icons if you want to use some for the Permalink, Reply, Parent and Thread links. Otherwise, leave blank.

  var string reply_img ="";
  var string parent_img ="";
  var string thread_img ="";
  var string permalink_img ="";

  ##### END CONFIGURATION. #####

  ##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####

  var string link_separator = "&nbsp;";

  ### Takes care of changes when screened, frozen and max comments.

  # Header background color.
  var string header_bgcolor = ($c.screened ? "$*comments_screened_bgcolor" : "$*comments_bgcolor");

  var string reply = $*text_comment_reply;
  var bool print_reply_link = true;

  # If comment is frozen, change bgcolor, change link text and do not print the reply link.
  if ($c.frozen) { $header_bgcolor = $comments_frozen_bgcolor; $print_reply_link = false; $reply = $*text_comment_frozen; }

  # If we've reached max comments for entry, change link text and do not print the reply link.
  if ($.entry.comments.maxcomments) { $reply = $*text_max_comments; $print_reply_link = false; }

  ### Place the anchor for the parent/thread links.
  print """<a name="t$c.talkid"></a>""";
 
  ### Print the thread title if the comment's at the first level.
  if ($c.depth == 1) {
    print_entry_header((size $c.replies > 0 ? $thread_prefix : $comment_prefix) + (defined $c.poster ? $c.poster.name : $anonymous_title));
    print_comment_top();
  }

  ### Start the comment header section.

  print_comment_content_top($c);

  """
  <div style="background-color: $header_bgcolor; color: $*entry_fgcolor; margin-top: 4px;">
    <table id="cmtbar$c.talkid" cellpadding="2" cellspacing="0" summary="0" width="100%" bgcolor="$header_bgcolor">""";

  # Variables for comment metadata.
  var bool show_userpic = (defined $c.userpic) and ($*comment_userpic_style != "off");
  var bool show_ip = ($c.metadata{"poster_ip"} != "");
  var bool show_subject = ($c.subject != "" or defined $c.subject_icon);

  ### Start the first row of the header.
  """
      <tr valign="top">""";

  # Build the userpic.

  if ($show_userpic) {
    var string alttext = $c.poster.name;
    var string title = "";
    var string picword = $c.metadata{"picture_keyword"};
    var Image upi = $c.userpic;
    var int width = $upi.width;
    var int height = $upi.height;
    var string userpic = "";

    	if ($picword != "") {
      		$alttext = $alttext + ": " + $picword;
    	}

    	if ($show_picword) {
      		$title = $alttext;
    	}

    	if ($*comment_userpic_style == "small") {
      		$width  = $width  / 2;
      		$height = $height / 2;
    	}

    	$userpic = """<img src="$upi.url" width="$width" height="$height" alt="$alttext" title="$title" border="0" />""";

    	if ($allpics_link) {
      		$userpic = """<a href="$*SITEROOT/allpics.bml?user=$c.poster.username">$userpic</a>""";
    	}

  ## Print the userpic.
  ## Start the first row.
    """
        <td width="$width" align="center">$userpic</td>
        <td>
          <table cellpadding="2" cellspacing="0" width="100%" bgcolor="$header_bgcolor">
            <tr>""";
  }

  # Print the username.
  """<td align="left" width="100%" style="white-space: nowrap;"><strong>$*text_comment_from </strong>""";

  	if (defined $c.poster) {
    		"""$c.poster""";
  	} else {
    		"""$*text_poster_anonymous""";
  	}

  """</td>""";

  # Print the linkbar and the permalink.
  """<td align="right" style="white-space: nowrap">"""; $c->print_linkbar();
  """<strong>$link_separator$link_open_bracket<a href="$c.permalink_url">""";

  if ($permalink_img != "")
  {
	"""<img src="$permalink_img" alt="$*text_permalink" title="$*text_permalink" border="0" class="comment-img" />""";
  } else {
	"""$*text_permalink""";
  }

  """</a>$link_close_bracket</strong></td>""";

  ## Close the first row.
  """</tr>""";

  ## Start the second row.
  """<tr valign="top">""";

  # Print the date (with user time zone).
  """<td align="left" style="white-space: nowrap"><strong>$*text_comment_date</strong> """;
  		print $c->time_display("long", "");
  """</td>""";

  # If multiform is on, print the select box for the multi action selector.
  if ($.multiform_on) {
    """<td align="right" style="white-space: nowrap"><label for="ljcomsel_$c.talkid">$*text_multiform_check</label>""";
    $c->print_multiform_check();
    """
  </td>""";
  }

  ## Close the second row.
  """</tr>""";

  ## Start the third row if the IP address must be shown.
  if ($show_ip) {
  """<tr valign="top">""";
  """<td colspan="2" align="left" style="white-space: nowrap"><strong>$*text_comment_ipaddr</strong> $c.metadata{"poster_ip"}</td>""";

  ## Close the third row.
  """</tr>""";
  }

  ## Start the fourth row if there is a subject.
  if ($show_subject) {
  """<tr valign="top">""";

  """<td colspan="2" class="commentSubject">""";
    	if (defined $c.subject_icon) {
      		"""$c.subject_icon """;
    	}
    	if ($c.subject != "") {
      		"""<strong>$c.subject</strong>""";
    	}
    """</td>""";

  ## Close the fourth row.
  """</tr>""";
  }

  if ($show_userpic) {
    """
          </table>
        </td>
      </tr>
    """;
  }

  ### End of comment header section.
  """
    </table>
  </div>
  """;

  ### Place the text.

  """<div style="margin-left: 5px;">"""; $c->print_text(); """</div>""";
  ### Place the Reply / Parent / Thread links.

  """<div class="commentLink">$link_open_bracket""";

  if ($print_reply_link) {
	if ($reply_img != "")
	{
		$c->print_reply_link({"reply_url" => $c.reply_url, "img_url" => $reply_img, "alt" => $reply, "title" => $reply});
  	} else {
	    	$c->print_reply_link({"linktext" => $reply});
	}
  } else {
	if (not $c.frozen) { """<a href="$c.reply_url">"""; }
	if ($reply_img != "")
	{
		"""<img src="$reply_img" alt="$reply" title="$reply" border="0" />""";
  	} else {
    		"""$reply""";
	}
	if (not $c.frozen) { """</a>"""; }
  }
  """$link_close_bracket""";

  if ($c.parent_url != "")
  {
    	"""$link_separator$link_open_bracket<a href="$c.parent_url">""";

	if ($parent_img != "")
	{
		"""<img src="$parent_img" alt="$*text_comment_parent" title="$*text_comment_parent" border="0" />""";
  	} else {
		"""$*text_comment_parent""";
  	}
  	"""</a>$link_close_bracket""";
  }

  if ($c.thread_url != "")
  {
    	"""$link_separator$link_open_bracket<a href="$c.thread_url">""";

	if ($thread_img != "")
	{
		"""<img src="$thread_img" alt="$*text_comment_thread" title="$*text_comment_thread" border="0" />""";
  	} else {
		"""$*text_comment_thread""";
  	}

	"""</a>$link_close_bracket""";

        var Link expand_link = $c->get_link("expand_comments");
        if (defined $expand_link) {
            "$link_separator$link_open_bracket" + $c->expand_link() + "$link_close_bracket";
        }
  }

  ### Print the QuickReply form.
  if ($print_reply_link) {
    	$c->print_reply_container({"class" => "quickreply_comment"});
  }
  """</div>""";

  ### End of comment.
  print_comment_content_bottom();
}


(Post a new comment)


[info]london_fan
2008-10-04 06:35 pm UTC (link)
Hello, sorry for bothering you again!

I've got a few questions concerning the comments layout.

1. I'd like to use an image for the permalink instead of the text in the comment header. My idea was to replace $*text_permalink with <img src="http://yoururl">. The result is an image, but with a red strong square border. What else would I have to change?

2. Furthermore I'd like to have the linkbar and the permalink in one line on the right side.

3. I'm sure it has been asked and answered before, but I can't find it: How can I change the text for the Reply, Parent, Thread etc links below the comments into images? I got it to work for the entry, but not for the comments.

That is what I mean, my layer ID is #11066589

I hope that's not asked too much. If you rather want me to post this as a general question, let me know and I'll do so...

Thanks in advance for any help!

(Reply to this) (Thread)


[info]900degrees
2008-10-04 06:57 pm UTC (link)
Hi again, London Fan. Sorry for answering you with this unusual username but I'm updating my LiveJournal skins and this requires me to be logged in to a test account. I plan on updating this tutorial to allow all the links to be turned into icons but I don't have time to do that for now. However, if you're in a hurry, simply find $*text_comment_parent and any other text you want to replace and put them with <img src="http//yoururl" /<

You cannot directly use img src when defining the value of property (i.e. what you did in #1) because it doesn't accept HTML.

~uniquewonders

(Reply to this) (Parent)


[info]900degrees
2008-10-04 06:58 pm UTC (link)
Edit:

<img src="http//yoururl" />

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-10-04 07:29 pm UTC (link)
Thanks for the fast replay! ;)

Okay, I'll meddle around with this a little bit until there is an update of this tutorial! If you modify this tutorial with images instead of the text links, it would be awesome if you could include some text pop-up over the new icons (the same way it's working with the linkbar already) Hey, don't feel pressured or anything... it's just an idea! ;)

(Reply to this) (Parent)


[info]london_fan
2008-10-04 07:52 pm UTC (link)
Okay, I don't get the images without the borders! :(
I have the same problem with Reply, Parent and the permalink.
O have to replace $*text_comment_parent with
<img src="http//yoururl" />
, right? Or did I understand that wrong? Or did I replace it in the wrong place?

Edited at 2008-10-04 07:54 pm UTC

(Reply to this) (Parent)(Thread)


[info]900degrees
2008-10-04 07:56 pm UTC (link)
<img src="http//yoururl" border="0" />

For the pop-over text, it's:

<img src="http//yoururl" border="0" alt="$*text_comment_parent" title="$*text_comment_parent" />

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-10-04 08:30 pm UTC (link)
I LOVE YOU!!!! In a non-pervy way! ;)
Thanks a lot, you are a genius! \o/

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-10-05 08:29 am UTC (link)
♥ You're welcome!

(Reply to this) (Parent)


[info]900degrees
2008-10-04 07:00 pm UTC (link)
For the Quick Reply link, it should be something like:

$c->print_reply_link({"alt" => $reply, "reply_url" => $c.reply_url, "img_url" =>"http://yoururl"});

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-10-04 07:30 pm UTC (link)
Works like a charm! Thanks!

(Reply to this) (Parent)


[info]uniquewonders
2008-10-05 09:23 am UTC (link)
#2 They are on one line on the right side. Or am I misunderstanding what you want to achieve?

Edited at 2008-10-05 09:50 am UTC

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-10-05 03:35 pm UTC (link)
Sorry for not saying it clearer. I mean, I want them to be side by side without the gap between the "Track This" and the "Permalink" icon. It's the black pump and the grey/red ball in my layout and there's this gap between them (see screenshot in my first comment).

I guess, there's some confusion, because apparently the icons are side by side if you look at the comments while logged in as a different user, but if I look at my own journal, there's this gap. For my friend it looks like this and we're using the same browser:

I want it to look like that for me, too! *pouts*

Since you are the genius for fast and easy solutions here, I dare to ask another question, that came up while replacing the Reply/Thread/Parent text with images... Please, just answer if it's easy for you, I really feel guilty enough to bother you so much already...

Is there an easy way to get some space between the comment text and the images I use for Reply,Thread and Parent? It looks a little squeezed right now (especially if someone puts a picture in the comment)...
I made a screenshot for you here.

Thank you in advance! :)

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-10-06 04:48 pm UTC (link)
I've updated the tutorial to make images easy to use and to correct the alignment as you suggested. Would you try it, please?

Also, to add some space above the Reply, etc. links, try this:

.commentLink {
padding-top: 5px !important;
}

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-10-06 05:42 pm UTC (link)
Wow! Simply wow!

The "new" tutorial works like a charm and it's definitely easier to customize. I love it, it's amazing! THANK YOU FOR DOING THIS!!! \o/

And thanks for the additional code for the commentLink space! :)

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-10-06 06:59 pm UTC (link)
Seems we make a good team. ;)

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-10-06 07:06 pm UTC (link)
Lol! You do the hard work and I bug you all the time! I won't complain about this division of work! ;)

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-10-06 07:10 pm UTC (link)
Hey, you got the ideas!

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-10-06 07:48 pm UTC (link)
Okay, I'll take 0.01 percent of the credit for being a nag your muse! ;)

(Reply to this) (Parent)


[info]london_fan
2008-11-24 04:34 pm UTC (link)
Hello there!

I'm so sorry to bother you again, but I've got one more question: Is there an easy way to replace the Unfold and Expand links for collapsed comments with images, too? Especially the Expand link in the linkbar right next to the Reply/Parent/Thread at the bottom of the last "un-collapsed" comment...

(Reply to this) (Thread)


[info]uniquewonders
2008-11-24 10:25 pm UTC (link)
No problem!

I don't have an unfold link (and I don't understand what it's for) but here's what you can do for the expand link:

In function EntryPage::print_comment_partial (Comment c) replace:
    if ($c.thread_url != "" and defined $expand_link) {
        $content = "$content " + "$link_open_bracket" + $c->expand_link() + "$link_close_bracket";
    }
    print_comment_content_top($c);
    "$content";
    print_comment_content_bottom();
with:
    print_comment_content_top($c);
    "$content ";
    if ($c.thread_url != "" and defined $expand_link) {
        print $c->expand_link({ "img_url" => "http://p-stat.livejournal.com/img/userinfo.gif", "img_border" => "0", "img_width" => "16", "img_height" => "16", "img_align" => "middle", "alt" => "Expand", "title" => "Expand"});
    }
    print_comment_content_bottom();


In function EntryPage::print_comment(Comment c) replace:
            "$link_separator$link_open_bracket" + $c->expand_link() + "$link_close_bracket";
with:
		"$link_separator$link_open_bracket";
        	print $c->expand_link({ "img_url" => "http://p-stat.livejournal.com/img/userinfo.gif", "img_border" => "0", "img_width" => "16", "img_height" => "16", "img_align" => "middle", "alt" => "Expand", "title" => "Expand"});
		"$link_close_bracket";


Customize URL, width and height.

(Reply to this) (Parent)(Thread)


[info]london_fan
2008-11-24 11:08 pm UTC (link)
Perfect!!! Like always. I had to tweak "img_align" => "middle" to "img_align" => "top" for the images to line up, but now it's perfect!!! ♥

Oh, you're right, I just remember that the "Unfold link" was some FF add-on for LJ, that was invented before LJ provided the function to unfold single collapsed comments. I'll check my FF setting to remove that (hasn't worked properly ever since LJ changed the settings anyway)...

THANK YOU VERY MUCH FOR YOUR QUICK HELP AGAIN!!!

(Reply to this) (Parent)


[info]51291
2008-12-13 10:08 am UTC (link)
Sorry dear, on my current layout if I put the code somewhere other than on top it doesn't work but if I put it on top it does work but messes up my CSS properties for links & text. How can I fix this? Originally, I don't need it but only for when you post a comment I do need it. You can see what I mean in my journal on the FO entry. Reading comments is fine but when you post all the properties are gone.

Edited at 2008-12-13 10:10 am UTC

(Reply to this) (Thread)


[info]uniquewonders
2008-12-13 10:16 am UTC (link)
Would you make your code viewable, please?

(Reply to this) (Parent)(Thread)


[info]51291
2008-12-13 10:27 am UTC (link)
Sure. #13855950

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-12-13 09:39 pm UTC (link)
Thanks. When you say it doesn't work, what do you mean?
Also, I see you already have function Page::print_custom_head() twice. You should only have it once meaning that instead of copying/pasting this function every time it's in a new tutorial, you should just copy the CSS part (it's usually delineated with comments like /* CSS for blah blah blah*/ /* end of CSS */) and put it into your existing function. Otherwise you only get the CSS from one function as it overrides the other ones. I guess this is why you have problems when you put the tutorial at the top. It overrides your other Page::print_custom_head functions.

(Reply to this) (Parent)(Thread)


[info]51291
2008-12-13 10:04 pm UTC (link)
I tried that and it seems I did it wrong. I'm sorry if I'm a bit dense in this.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-12-13 10:28 pm UTC (link)
Well see for example, select and copy the code which starts at:
/* CSS for profile component */
and ends at:
/* End CSS for profile component */

Then paste it into the first print_custom_head function, just below:
/* End CSS for the navigation bar */

Finally delete the second print_custom_head function entirely. You can do the same with the CSS which is in this tutorial. See what I mean?

Edited at 2008-12-13 10:29 pm UTC

(Reply to this) (Parent)(Thread)


[info]51291
2008-12-14 01:27 am UTC (link)
I did that but the comments stay the same. I'm sorry, Thank you for being so patient with me.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-12-14 09:39 am UTC (link)
I did that but the comments stay the same.
That's why I asked when you meant when you say it didn't work. What did you expect this tutorial to do?

(Reply to this) (Parent)(Thread)


[info]51291
2008-12-14 12:35 pm UTC (link)
oh no i mean when you're going to post a comment the whole thing isn't there the border of the comment text box.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-12-14 01:43 pm UTC (link)
This part of your code is preventing the border from being visible in input areas so that you don't see the message box in the comment form:

select, input, textarea {
color: #b285da !important;
font-family: georgia;
font-size: 8pt;
background-color: #cfb4e8;
background-image: url(' ');
border: 1px solid #cfb4e8;
}

Either remove part(s) of this CSS or use other CSS to give the comment box a visible background/border again such as:

#commenttext {
background-color: #fff;
border: 1px solid #9E68D0;
}

Edited at 2008-12-14 01:46 pm UTC

(Reply to this) (Parent)(Thread)


[info]51291
2008-12-14 01:48 pm UTC (link)
THANK YOU! *gives cookies* I'm so grateful. :) Thanks so much dear.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-12-14 01:54 pm UTC (link)
You're welcome! :)

(Reply to this) (Parent)


[info]anfbabe
2008-12-14 05:43 pm UTC (link)
thank you so much for this!

(Reply to this) (Thread)


[info]uniquewonders
2008-12-14 09:10 pm UTC (link)
You're welcome! ^_^

(Reply to this) (Parent)


Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…