Friends

: darlingbones wrote in s2flexisquares; December 27th, 22:48

Is it possible to edit the colour of the quick reply comment box border? this one here

I'm sure it is but I've been playing with various classes all night & it's just not happening for me, perhaps I need fresh eyes XD

Thanks for any help in advance.

Tags: comments, paid accounts

echoes

: darlingbones wrote in mintyapple; December 27th, 13:04

Layout: echoes (flexible squares)
Tested: Safari & Firefox
Custom comment pages, tiny icons, topbar

'echoes' : 4 colour schemes : Temp. Live Preview (purple)

( previews & code & instructions )

Tags: style: flexible squares

smooth sailing: this is my pen name

: nicefinalbeam wrote in mintyapple; December 26th, 18:48

Smooth Sailing: this is my pen name

Image Preview // Live Preview!

( codes under the cut )

Tags: style: smooth sailing

flexible squares: the good life

: eunkyung wrote in mintyapple; December 26th, 19:56

LIVE PREVIEW
Theme: Flexible Squares
Browsers: IE7, firefox
Accounts: Free, Plus, Paid
- credit ribbonized when using
- Please comment when taking
- watch ribbonized for exlusive goodies

( codes and uploading instructions )

Tags: style: flexible squares

Moving ads a bit down

: toboe_lonewolf wrote in s2flexisquares; December 26th, 11:27

I had a paid account that's recently been downgraded to plus. In doing so, I noticed that the ads on the plus account are now inserted between my calender component and my tag component.

Is there any way to fix this with CSS, or do I have to upgrade to Paid temporarily/permanently to fix this, and if so, how do I do it?

My layer:

layerinfo "type" = "theme";
layerinfo "name" = "Toboe Custom 02_Theme";

#-----------------------------------
#
#  SMART STUFF
#
#-----------------------------------

class myClass
{
  ## function to sort the tags. 
  ##   Boolean is to determine whether function was called by print_tags (from the tags component)
  ##   or from the TagsPage. Depending on which, I want different CSS.

function sort_my_tags(bool isTagComponent) : string;

## text for sticky post
  function print_sticky();
}

####################################################
#  BUNDLE-LEVEL TAGS IN SIDEBAR #
#  copied from component_help's layer : http://www.livejournal.com/customize/advanced/layersource.bml?id=14180607
#  Also FS-version: http://murklinstest.livejournal.com/23732.html
#  Create a single function that will be called twice in the journal.
####################################################

function myClass::sort_my_tags(bool isTagComponent) : string
{

var string delimiter = ":";

var string[] tagorder = ["study abroad", "media", "fandom", "character", "pairing" ];

var string list = "";

var Page p = get_page();
    
  if (size $p->visible_tag_list() > 0)
  {     
    	var string{} sorttags;

foreach var string tagname ($tagorder)
	{
      		$sorttags{$tagname} = $tagname;
    	}

if ($delimiter->length() > 1)
	{
      		$delimiter = $delimiter->substr(0, 1);
    	}

var string prev_top_level = "";
    	var TagDetail{}[]{} visibletags;
    	var string[] unordered = [];

foreach var TagDetail t ($p->visible_tag_list())
	{            
      		if ($t.name)
		{
        		var string[] tags;
        		var int array_counter = 0;
        		var string buffer = "";
        		var bool found_delimiter = false;

foreach var string char ($t.name)
			{
          			if (($found_delimiter == false) and ($char == $delimiter))
				{
            				$found_delimiter = true;
            				$tags[$array_counter] = $buffer;
            				$array_counter = $array_counter + 1;
            				$buffer = "";
          			}
          			else
				{
            				$buffer = $buffer + $char;
          			} 
        		}  
        		$tags[$array_counter] = $buffer;
                 
        		if (size $tags == 1)
			{
				#tag has no subtag
          			$visibletags{$tags[0]}[size $visibletags{$tags[0]}] = {$tags[0] => $t};
        		}
        		else
			{
          			var string subtag = $tags[0] + "sub";
          			$visibletags{$subtag}[size $visibletags{$subtag}] = {$tags[1] => $t};
        		}

if ($tags[0] != $prev_top_level)
			{
          			if ($sorttags{$tags[0]} != $tags[0])
				{
            				$unordered[size $unordered] = $tags[0];
          			}
          			$prev_top_level = $tags[0];
        		}
      		}  
    	}

# Start the list
    	$list = """<ul>""";

# Add alphabetically sorted tags to the list (ones without the categories listed in $tagorder above)
	foreach var string tagname ($unordered) {

# Ignore any tag names in sort array that aren't in the visible tag list
		if ($visibletags{$tagname} or $visibletags{"${tagname}sub"}) {
		        if ($visibletags{$tagname}) {
				# This is a top-level tag
				var TagDetail t = $visibletags{$tagname}[0]{$tagname};
				var string uses = get_plural_phrase($t.use_count, "text_tag_uses");
			        var string security = $t.visibility;
				$list = $list + """<li class="tagItem"><a href="$t.url" title="$uses, $security">$tagname</a></li>""";
 			}
		       	else {
				# These subtags are just a top-level label
				$list = $list + """<li class="tagItem">$tagname</li>""";
			}

# Add the subtags
        		if ($visibletags{"${tagname}sub"}) {
			        $list = $list + """</ul>""";
			        foreach var TagDetail{} subtag ($visibletags{"${tagname}sub"}) {
					foreach var string name ($subtag) {
						var TagDetail t =  $subtag{$name};
						var string uses = get_plural_phrase($t.use_count, "text_tag_uses");
					        var string security = $t.visibility;
						$list = $list + """<li class="tagItem"><a href="$t.url" title="$uses, $security">$name</a>""";
					        $list = $list + "</li>";
				        }
			        }
		        	$list = $list + "</ul>";
		        }
		}
	}

# Now add sorted tags to list (the ones in the categories listed in $tagorder above)
    	foreach var string tagname ($tagorder)
	{
      		if ($visibletags{$tagname} or $visibletags{"${tagname}sub"})
		{
        		if ($visibletags{$tagname})
			{
				# This is a top-level tag
          			var TagDetail t = $visibletags{$tagname}[0]{$tagname};
				var string uses = get_plural_phrase($t.use_count, "text_tag_uses");
			        var string security = $t.visibility;
          			$list = $list + """<li class="tagItemHeader"><a href="$t.url" title="$uses, $security">$tagname</a></li>""";
        		}
        		else
			{
				# These subtags are just a top-level label
          			$list = $list + """<li class="tagItemHeader">$tagname</li>""";
        		}

# Add the subtags
        		if ($visibletags{"${tagname}sub"})
			{
        			$list = $list + """</ul><ul>""";

foreach var TagDetail{} subtag ($visibletags{"${tagname}sub"})
				{
          				foreach var string name ($subtag)
					{
            					var TagDetail t = $subtag{$name};
						var string uses = get_plural_phrase($t.use_count, "text_tag_uses");
					        var string security = $t.visibility;
            					$list = $list + """<li class="tagItem"><a href="$t.url" title="$uses, $security">$name</a></li>""";
        				}
        			}
        			$list = $list + "</ul><ul>";
        		}
      		}
    	}

$list = $list + "</ul>";

# was this function called by the tag component? Then put CSS for tag component. 
	if($isTagComponent){ 
		$list = """<div id="tag-box">""" + $list + """</div>""";
	}
	else {
		$list = """<div id="lj-tagsPage">""" + $list + """</div>""";
	}
  }

return $list;
}

####################################################
#
#  STICKY POST
#
####################################################

function myClass::print_sticky(){
	"""          
	<div class="subcontent">
		<div class="datesubjectSticky">
			<div class="subject">
				<center>Heyla! Welcome to <i>-Howling Point-</i>.</center>
			</div>
		</div>
		<div class="entry">
			<div class="entry2">
			<div class="entry_textSticky"> <center>This is Toboe Lonewolf's journal, where lulz/crack/insanity abounds. If you've trekked over here because of my flash animations, 
				you may want to check out the <a href="http://toboe-lonewolf.livejournal.com/tag/media:+flash">flash</a> and <a href="http://toboe-lonewolf.livejournal.com/tag/media:+flash+update">flash: update</a> tags.
				<br> If, on the other hand, you're wondering how I'm doing in study abroad in Cape Town, South Africa, you'll want to check out the
				<a href="http://toboe-lonewolf.livejournal.com/tag/study+abroad">study abroad</a>, 
				<a href="http://toboe-lonewolf.livejournal.com/tag/study+abroad:+life">study abroad: life</a>, 
				<a href="http://toboe-lonewolf.livejournal.com/tag/study+abroad:+project">study abroad: project</a>, 
				<a href="http://toboe-lonewolf.livejournal.com/tag/study+abroad:+photo">study abroad: photo</a>, and
				<a href="http://toboe-lonewolf.livejournal.com/tag/study+abroad:+photo">study abroad: looking back</a> tags. </center>
				</div>
                	</div>
		</div>
		<div class="separator">   </div>
		<div class="clear">   </div>
	</div>
	""";
}

#===============================================
#
#  CUSTOM HEADER
#
#===============================================

function Page::lay_print_header()
"Prints header"
{
  var Page page = get_page();
  var string title = $this->title();
  
  # by default, LJ can print the following links in the header navigation:
  #
  # userinfo ... the profile page
  # recent ..... the recent entries page
  # friends .... the friends page (no filter)
  # archive .... the calendar (current year page)
  # tags ....... the visible tags page
  #
  # the skiplinks are not available in the header by default, but were added by this tutorial:
  #
  # forward .... the 'skip a number of entries forward' link (younger entries)
  # back ....... the 'skip a number of entries back' link (older entries)

# specify the URL of any additional links you'd like to show up in the header navigation
  #                 of LJ default links that you'd like to override (except skiplinks)
  #                 (e.g. to link to a friends filter rather than the normal friends page)
  #                 if you don't want to change anything, leave empty curly braces {};
  var string{} links = { "memories"   => "http://www.livejournal.com/tools/memories.bml?user=toboe_lonewolf",
                         "scrapbook"   => "http://pics.livejournal.com/toboe_lonewolf",
                         "tags" => "http://toboe-lonewolf.livejournal.com/tag/" };

# specify the order in which the links are supposed to show up:
  var string[] order = ["recent", "friends", "archive", "userinfo", "tags", "memories", "scrapbook", "back", "forward"];

# specify the link text:  can be text or an image tag (<img src='IMAGE URL'> ... please use single quotes around the URL)
  #                         or leave blank to use the text set in the Customization Wizard for the default links and skiplinks
  #                         (custom links will show as "Unknown View" if left blank)
  var string{} text = { "userinfo"  => "",
                        "recent"    => "",
                        "friends"   => "",
                        "archive"   => "",
                        "tags"      => "",
                        "forward"   => "walk forward >>",
                        "back"      => "<< step backward",
                        "memories"  => "memories",
                        "scrapbook" => "scrapbook" };

# link current view: set wether or not you want the current view
  #                    (e.g. the navigation item saying Friends while you're on your friends page)
  #                    to be a link (set it to true) or not (set it to false).
  var bool link_current_view = false;

# display website: set whether or not to print the website specified in the Customization Wizard
  #                  (if set to true, website will always display as the very first link)
  var bool display_website = false;

# --- do not edit beyond this point --- #

print  """
  <div id="header">
    <ul class="navheader">""";
    
      # remove website 
      
      # link in the order specified in $order
      var string linktext;
      var string linkurl;
      
      foreach var string v ($order) {
        $linktext = $text{$v} == "" ? lang_viewname($v) : $text{$v}; # custom link text or HTML, otherwise default LJ view name
        $linkurl = clean_url($links{$v}) == "" ? $.view_url{$v} : $links{$v}; # custom URL if valid, otherwise default LJ view url
        
        if (($v == "forward" or $v == "back") and ($this isa RecentPage or $this isa FriendsPage))
        {        
          if ($this isa RecentPage)
          {
            var RecentPage pageext = ($this as RecentPage);
            if ($v == "forward")
            {
              $linkurl = $pageext.nav.forward_url;
              $linktext = $text{$v} == "" ? $*text_skiplinks_forward : $text{$v};
            }
            elseif ($v == "back") {
              $linkurl = $pageext.nav.backward_url;
              $linktext = $text{$v} == "" ? $*text_skiplinks_back : $text{$v};
            }
          }
          elseif ($this isa FriendsPage)
          {
            var FriendsPage pageext = ($this as FriendsPage);
            if ($v == "forward")
            {
              $linkurl = $pageext.nav.forward_url;
              $linktext = $text{$v} == "" ? $*text_skiplinks_forward : $text{$v};
            }
            elseif ($v == "back") {
              $linkurl = $pageext.nav.backward_url;
              $linktext = $text{$v} == "" ? $*text_skiplinks_back : $text{$v};
            }
          }
        }
        
        if (not (($v == "forward" or $v == "back") and $linkurl == ""))
        {
          if ($.view == $v and $link_current_view == false)
          {
            println """<li class="view">$linktext</li>""";
          }
          elseif ($.view == $v)
          {
            println """<li class="view"><a href="$linkurl">$linktext</a></li>""";
          }
          else
          {
              println """<li><a href="$linkurl">$linktext</a></li>""";
          }
        }
      }
      print safe """
      </ul>
      <div class="title">
        $title
      </div>
      <div class="subtitle">
        $.global_subtitle
      </div>
  </div>
  """;
}

#===============================================
#
#  PRINT MY STICKY POST
#
#===============================================

function RecentPage::print_body {
	if (size $.entries == 0 ) {
	        """
        	<br /><br /><div class="entry" style="border-width: 1px">
	        $*text_noentries_recent
        	</div>
	        """;
	}
	else 
	{
        	if( $.nav.skip == 0 and $.view != "friends") {
			var myClass mC = new myClass;
			$mC->print_sticky();
	        }

foreach var Entry e ($.entries) {
			$this->print_entry($e);
	        }
	}
}

#===============================================
#
#  CUSTOM ENTRIES
#
#===============================================

function print_entry(Page p, Entry e, Color bgcolor, Color fgcolor)
{
    """<a name="$e.journal.username$e.itemid"></a>""";
    $e->print_linkbar();

# Userpic

var string userpic = "";
    if ($*show_entry_userpic)
    {
        if ($p.view == "friends" or $p.view == "entry" or $p.view == "reply")
        {
            if (defined $e.userpic)
                 {
                $userpic = $userpic + """<img src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height"  alt="$e.poster.name" title="$e.poster.name""";
                    if ($e.poster.username != $e.journal.username)
                        {
                            $userpic = $userpic + " in $e.journal.name";
                        }
                    $userpic = $userpic + "\">";
                }
        }
        elseif ($p.journal_type == "C" and $p.view == "recent")
        {
            if (defined $e.userpic)
                 {
                $userpic = $userpic + """<img src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height"  alt="$e.poster.name" title="$e.poster.name" />""";
                }
        }
    else
        {
            if (defined $e.userpic)
                {
                 $userpic = $userpic + """<div class="userpic"><img src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="$e.poster.name" title="$e.poster.name" /></div>""";
                }
    }
    }
    print """
        <div class="subcontent">
        """;
        if (($p.view == "recent" and $p.journal_type != "C" ) or $p.view == "day")
        {
            print """$userpic""";
        }
        else
        {
            if ($p.view == "recent" and $p.journal_type == "C" )
            {
                """<div class="userpicfriends" style="background-color: $*entry_bgcolor;">""";
            }
            else
            {
                """<div class="userpicfriends" style="background-color: $bgcolor;">""";
            }
            print """$userpic""";

# Poster

if ($p.view == "friends" or $p.view == "entry" or $p.view == "reply")
            {
                var UserLite linkto;
                $linkto = $e.poster;
                #print "$e.poster.username";
                """<br /><a href=\"""" + $linkto->base_url() + "\">";
                 "<font color=\"$fgcolor\">$linkto.username</font></a>";
            }
            elseif ($p.journal_type == "C" and $p.view == "recent")
            {
                var UserLite linkto;
                $linkto = $e.poster;
                #print "$e.poster.username";
                """<br /><a href=\"""" + $linkto->base_url() + "\">";
                 "$linkto.username</a>";
            }
            if (($p.view == "friends" or $p.view == "entry" or $p.view == "reply") and $e.poster.username != $e.journal.username)
            {
                    var UserLite linkto;
                $linkto = $e.journal;
                """<br />[<a href=\"""" + $linkto->base_url() + "\">";
                 "<font color=\"$fgcolor\">$linkto.username</font></a>]";
            }
            if ($p.view == "recent" and $p.journal_type == "C")
            {
                print "</div>";
            }
            if ($p.view != "recent" and $p.view != "day")
            {
                print """</div>""";
            }
        }

# Date, time, subject

### MULTI-STYLED ENTRIES OPTIONS ###
	  ## Variables for tags.
	  ## You can edit the names of the variables if you want to replace lorem, ipsum and lp with the names of your tags. Blank spaces aren't allowed, though.
	  ## To add one more tag trigger, copy/paste the line for one variable and customize the name.
	  ## Make sure to use the same names in the code below.

var bool tag_match_school = false;
	  var bool tag_match_studyAbroad = false;

## Do not edit this.
	  var string multi_id = "";

## Associating tag names and tag variables.
	  ## Edit to put the exact names of your tags.
	  ## Edit if you have changed the names of the variables.
	  ## Edit if you want to add more tag triggers.

if ((size $e.tags > 0) and $*tags_aware) {
	        foreach var Tag t ($e.tags) {

if ($t.name == "school") {
 	   			$tag_match_school = true;
	 		}

elseif ($t.name == "study abroad" or $t.name == "study abroad: life" or $t.name == "study abroad: project" or $t.name == "study abroad: photo" or $t.name == "study abroad: looking back") {
 	   			$tag_match_studyAbroad = true;
	 		}
		}
	  }

## Associating tag variables and CSS IDs.
	  ## Edit the colors.
	  ## Edit if you have changed the names of the variables or the names of the CSS IDs.
	  ## Edit if you want to add more tag triggers.

if ($tag_match_school == true) { $multi_id = "datesubject-multi-school"; }
	  elseif ($tag_match_studyAbroad == true) { $multi_id = "datesubject-multi-studyAbroad"; }
	  else { $multi_id = "datesubject"; }

var string time = "";
	$time = $time + """ :: """;
	$time = $time + $e.time->time_format("short");
	var string date = "";
	$date = $date + $e.time->date_format("long_day");

"""
            <div class=$multi_id><div class="date">""";
                print $e.time->date_format("%%dd%% %%month%% %%yyyy%%");
                "$time
               </div>";
            """
            <div class="subject">""";
                if ($e.security != "")
                {
                    $e.security_icon->print();
                }      
                if ($p.view != "entry") {
                   print $e->formatted_subject({"class"=>"subj-link"});"  ";
                }
                else { print "$e.subject  "; }
            """</div>
        </div>
        """;

"""
         <div class="entry">
              <div class="entry_text">""";

$e->print_text();
                        print "</div> ";

# Currents

var string currents ="";
            $e->print_metadata();

# Comments  
    
      """
      <div class="clear"> </div>
      <div class="comments">""";

### start custom code ###
      
        # Set the basic order in which the links are supposed to appear, from left to right. Available links are:
        #   edit_entry       = edit the entry
        #   edit_tags        = edit the tags assigned to the entry
        #   mem_add          = add to your memories (of the user currently logged in)
        #   mem_as_comm      = add to memories of the community (the "authas"-link, can only be used by owner/moderators of community)
        #   watch_comments   = track/untrack the post
        #   tell_friend      = mail link to friend
        #   permalink        = link to the entry
        #   comments         = read/post comments link
        #   format           = link to unformatted entry, or entry with different s2id
        
        #   |                = all links before this symbol are printed aligned to the left, all others aligned to the right (standard)

#                      to print all links aligned right (standard), set "|" first
        
        var string[] link_order = ["edit_entry", "edit_tags", "|", "comments"];
      
        # Set the urls to the images you want to use, or leave the quotes empty.
        # read/post comment links can not be set to images here (see Step 7)
        var string{} link_images = { "edit_entry"       => "",
                                     "edit_tags"        => "",
                                     "mem_add"          => "",
                                     "mem_as_comm"      => "",
                                     "tell_friend"      => "",
                                     "watch_comments"   => "",
                                     "unwatch_comments" => "",
                                     "permalink"        => "",
                                     "format"           => ""
                                   };

# link texts (in case there is no image specified)
        var string{} link_text = { "edit_entry"       => $*text_edit_entry,
                                   "edit_tags"        => $*text_edit_tags,
                                   "mem_add"          => $*text_mem_add,
                                   "mem_as_comm"      => "+",
                                   "tell_friend"      => $*text_tell_friend,
                                   "watch_comments"   => $*text_watch_comments,
                                   "unwatch_comments" => $*text_unwatch_comments,
                                   "permalink"        => $*text_permalink,
                                   "format"           => "unformatted"
                                 };

# Set the separator that should appear between the individual links or images
        # separator between read/post comment links can not be set here (see Step 6)
        var string link_separator = " :: ";
        
        # Set the name of the community that the "mem_as_comm" link should work for
        var string community = "";
        
        # Set the text that will be appended to the "format" link
        # e.g. "?format=light" or "?s2id=1234567" or "?mode=reply&s2id=1234567"
        var string format = "?format=light";
        
        ### no editing beyond this point ###
        
        # helper var to decide if separator is printed before link or not
        var bool i = false;
        
        # Step through the links in the order the user wants
        
        """<div class="leftlinks">""";
        foreach var string link ($link_order)
        {
          if ($link == "") { continue; } # skip emtpy quotes
          
          if ($link == "|") # close leftlinks div and open standard-aligned div
          {
            """</div><div>""";
            $i = false;
            continue;
          }
          
          # special case comment links
          if ($link == "comments")
          {
            if ($e.comments.enabled)
            {
              if ($i == true) { """$link_separator""";}
              $e.comments->print();
              $i = true;
            }
            else { " "; }
          }
          else
          {
            # get the url of the link
            var string url;
            if ($link == "permalink") { $url = $e.permalink_url; }
            elseif ($link == "format") { $url = $e.permalink_url + $format; }
            else
            {
              var Link url_temp;
              $url_temp = ($link == "mem_as_comm") ? $e->get_link("mem_add") : $e->get_link($link);
              
              if (isnull $url_temp)
              {
                if ($link == "watch_comments" and viewer_logged_in())
                {
                  $url_temp = $e->get_link("unwatch_comments");
                  $link = "unwatch_comments";
                }
                else { continue; }
              }
              $url = $url_temp.url;
              if ($link == "mem_as_comm") { $url = """$url&authas=$community"""; }
            }
            
            # get the link image or text
            var string text;
            if (clean_url($link_images{$link}) == "") { $text = $link_text{$link}; }
            else { $text = """<img src="$link_images{$link}">"""; }
            
            # print separator, link and text/image
            if ($i == true) { """$link_separator""";}
            """<a href="$url" title="$link_text{$link}">$text</a>""";

$i = true;
          }
        }
        
      "</div>";

### end custom code ###

"""
      </div>

</div>
  </div>

<div class="separator"></div>
  <div class="clear"> </div>""";
}

#===============================================
#
#  CUSTOM LINKBAR
#
#===============================================

function Entry::print_linkbar()
{
    # Links (memories, edit, prev, next)
    var Page p = get_page();
    if ($p.view == "entry" or $p.view == "reply")
    {
        var Link prev   = $this->get_link("nav_prev");
        var Link next   = $this->get_link("nav_next");
	var int entryID = $this.itemid;

var string read_style = $entryID + """.html?style=mine""";

var string{} link_text = {
                         "edit_entry"  => $*text_edit,
                         "edit_tags"   => $*text_edit_tags,
                         "mem_add"     => $*text_memories,
                         "tell_friend" => $*text_tell_friend,
                         "flag"        => $*text_flag,
                         "watch_comments" => $*text_track,
                         "unwatch_comments" => $*text_untrack,
        };
        print safe """
        <div class="clear"> </div>
        <div class="skiplinks">
            <a href="$prev.url">$*text_previous_entry</a> :: """;

var Link link;
        var string url;
        var string text;
        foreach var string link_key ($.link_keyseq) {
            $link = $this->get_link($link_key);
            $url = $link.url;
            $text = $link_text{$link_key} != "" ? $link_text{$link_key} : $link.caption;
            if (defined $link) {
                print safe """<a href="$url">$text</a> :: """;
            }
        }

# Add link so that reader can read in their own style
	print safe """<a href="$read_style">read in your style</a> :: """;

print safe """<a href="$next.url">$*text_next_entry</a>
        </div>
        <div class="clear"> </div>""";
    }

}

#===============================================
#
#  METADATA
#
#===============================================

set text_tags = "Tagging this with:";
set tags_aware = true;

function Entry::print_metadata() 
{
  #-- START CUSTOMIZATION ------------- #

var string tags_sep         = ", ";       # text for tags separator, ", " for "tag, tag, tag"

var string show_tags_link   = "none";     # set to "edit" if you want the tags label to act as an 'edit tags' link
                                            # set to "page" if you want the tags label to link to the poster's tag page
                                            # set to "manage" to link to the Tags Management page
                                            # set to "none" to delinkify the tags label completely

var bool   show_loc_link    = false;      # set to true to display the Google Map link

var bool   show_groups_link = false;      # set to true to display the custom friends group link

var bool   show_music_link  = true;       # set to false to hide the last.fm link to the artist/song pages

var bool   print_table      = true;       # set to false to display the mood icon inline with the mood text (default FS style)

var string alignment        = "left";     # set the side of the mood icon (left or right of the currents) - only if printed in table
  
  # set the order in which you want mood, music, location, tags, security and custom friends group to appear
  # any metadata you want to hide journalwide, delete from this list
  var string[] metaorder = ["mood", "music", "location", "groups", "tags"];

# optional:
  # put in the URLs to the pics you want to use instead of the currents' text labels
  # if you leave it blank, the text label will be used instead
  var string{} metapics = { "mood"               => "",
                            "music"              => "",
                            "location"           => "",
                            "tags"               => "",
                            "groups"             => "" };

# -- CUSTOMIZATION END ---------- #

var string currents       = """<div class="currents">""";         # here all metadata will be added to print currents container

var Link   edit_tags      = $this->get_link("edit_tags");         # helper var to see if remote user can edit tags

if ((size $.metadata > 0) or ((size $.tags > 0) and $*tags_aware)) {  
    
    # display mood and moodicon?
    var bool display_mood = false;
    foreach var string moodtest ($metaorder) {
      if ($moodtest == "mood") { $display_mood = true; }
    }
    
    # table and mood icon
    if (defined $.mood_icon and $display_mood and $print_table) {
      $currents = ($alignment == "left") ?
                  $currents + """<table class="metaTable" border="0"><tr><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td><td>""" :
                  $currents + """<table class="metaTable" border="0"><tr><td>""";
    }
    
    # step through metadata in the order the user wants
    foreach var string k ($metaorder) {
    
      var string text;                     # the actual value of the metadata
      var string label;                    # the label of the metadata as set in the wizard or set-statements
      
      # handling tags metadata
      if ($k == "tags" and (size $.tags > 0) and $*tags_aware) {
        
        # label as image or text
        $label = clean_url($metapics{$k}) != "" ? """<img src="$metapics{$k}" title="$*text_tags" alt="$*text_tags" border=0>""" : $*text_tags;
        
        # optional linkage around tags label
        if ($show_tags_link == "edit" and $edit_tags.url != "") {  
          $label = """<a href="$edit_tags.url">""" + $label + """</a>""";
        }
        elseif ($show_tags_link == "page") {                           
          $label = """<a href=" """ + $.journal->base_url() + """/tag/ ">""" + $label + """</a>""";
        }
        elseif ($show_tags_link == "manage" and viewer_is_owner()) {   
          $label = """<a href=" """ + $.journal->tag_manage_url() + """ ">""" + $label + """</a>""";
        }
        
        # build tag list
        var bool addsep = false;
        foreach var Tag t ($.tags) {
          if ($addsep) {
            $text = $text + $tags_sep + """<a rel="tag" href="$t.url">$t.name</a>""";
          }
          else {

$text = $text + """<a rel="tag" href="$t.url">$t.name</a>""";
            $addsep = true;

}
        }

} #end tags
      
      # handling all other metadata
      elseif ($k != "tags" and $k != "" and $.metadata{$k} != "") {
        
        # metadata value
        $text = $.metadata{$k};
        
        # label as image or text
        $label = clean_url($metapics{$k}) != "" ? "<img src=\"$metapics{$k}\" title=\"" + lang_metadata_title($k) + "\" alt=\"" + lang_metadata_title($k) + "\" border=0>" : lang_metadata_title($k);
        
        # strip location/music/groups link
        if ((not ($show_loc_link) and ($k == "location"))
            or (not ($show_music_link) and ($k == "music"))
            or (not ($show_groups_link) and ($k == "groups"))) {
          $text = striphtml($text);
        }

# inline mood image
        if (not ($print_table) and $k == "mood" and defined $.mood_icon) {
          $text = """<img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" align="middle" />""" + $text;
        }

} #end metadata

# skipping empty metadata
      else { continue; }
      
      # assemble the individual currents 
      $currents = $currents + """<div class="current$k"><strong>$label</strong> <span class="text">$text</span></div>""";
      
    } # end foreach

# table and mood icon
    if ($display_mood and defined $.mood_icon and $print_table) {
      $currents = ($alignment == "left") ?
                  $currents + """</td></tr></table>""" :
                  $currents + """</td><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td></tr></table>""";
    }

# close currents container and print
    println $currents +  """</div>""";
  }
}

#===============================================
#
# TAGS COMPONENT and TAGS PAGE #
#  Uses the bundle tags sorting function way back on top
#
#===============================================

function print_sidebar_tags()
{
    var myClass mC = new myClass;
    var bool isTagComponent = true;

var Page p= get_page();
    var TagDetail[] tag_list = $p->visible_tag_list();

if( size $tag_list == 0)
    {
        return;
    }
    var string tags = "";

if($*sidebar_tags_display == "list")
    {
        $tags = $mC->sort_my_tags($isTagComponent);
    }

elseif($*sidebar_tags_display == "cloud")
    {
        var int tag_category = 10;  # number of tag categories
        var int basefontsize = 80;  # size of the first tag category in percent of the default font size of the page
        var int increment = 20;     # The difference in size between tag categories.

var int max_use_count = 0;
        var int min_use_count;
        var int x;
        var int category;

# Define a maximum and minimum number of uses of the tags:
        $min_use_count = $tag_list[0].use_count;
        foreach var TagDetail td ($tag_list)
        {
            if ($td.use_count > $max_use_count)
            {
                $max_use_count = $td.use_count;
            }
            elseif ($td.use_count < $min_use_count)
            {
                $min_use_count = $td.use_count;
            }

}

# Avoid a division by zero
        if ($max_use_count == $min_use_count)
        {
            $max_use_count = $max_use_count + 1;
        }

# Put the tags into categories according to the number of times they're used,
        # then use it to determine the size of the tag:
        foreach var TagDetail td ($tag_list)
        {
            # Create different categories according to the number of uses of the tag
            $category = (($td.use_count - $min_use_count) * $tag_category / ($max_use_count - $min_use_count));
            if ($category == $tag_category) { $category = $tag_category - 1; }

# Convert those categories into sizes
            $x = ($category * $increment) + $basefontsize;
            $tags = $tags + """<span style="font-size: $x%;"><a href="$td.url" title="$td.use_count" class="tagcategory$category">$td.name</a></span> """;
        }

# Enclose the entire list in an li tag as required by the layout.
        $tags = """<li class="tagcloud">""" + $tags + """</li>""";
    }

var string tags_title = ($*text_sidebar_tags != "") ? "<li class='sbartitle'>$*text_sidebar_tags</li>" : "";
    print_sidebar_box($tags_title, $tags, "sidebar_tags");
}

function TagsPage::print_body()
{
   var myClass mC = new myClass;
   var bool isTagComponent = false;
   var string tags = "";

$tags = $mC->sort_my_tags($isTagComponent);

"""
   <h3>Visible Tags:</h3>
   $tags
   """;

}

#-----------------------------
#
# PROFILE COMPONENT
#
#-----------------------------

function print_userpic () {
    var Page p= get_page();
    var Image up_img = $p.journal.default_pic;
    if (defined $up_img) {
        """<div class="defaultuserpic">
        <a href="$p.journal.userpic_listing_url"><img border="0" src="$up_img.url" height="$up_img.height" width="$up_img.width" alt="$p.journal.name" title="$p.journal.name" /></a>
	<div class="defaultuserpic_text">
	<b>User:</b> $p.journal
	<br><b>Name:</b> $p.journal.name
	""";

var string website_name = $p.journal.website_name ? $p.journal.website_name : $*text_website_default_name;
        if ($p.journal.website_url != "")
        {
            println safe """<br><b>Website:</b> <a href="$p.journal.website_url">$website_name</a>""";
        }

"""
	</div></div>
	""";
    }
}

#--------------------------------------
#
# EXTRA SIDE BAR COMPONENTS
#
#--------------------------------------

function print_sidebar()
{

var string extra1_title = "";
    var string extra1_content = "";

$extra1_title = """<li class="sbartitle">about the layout</li>""";
    $extra1_content = """<li>CSS from <b> <a href="http://community.livejournal.com/thefulcrum/3957.html#cutid1"><img src='http://p-stat.livejournal.com/img/community.gif' alt='[info]' style='vertical-align: bottom; border: 0; padding-right: 1px;' />the fulcrum</a></b>, Template 13.5; lightly edited. 
			S2 code based from tutorials/guides in <br><b><a href="http://community.livejournal.com/component_help"><img src='http://p-stat.livejournal.com/img/community.gif' alt='[info]' style='vertical-align: bottom; border: 0; padding-right: 1px;' />component_help</a></b>
			<br>and <b><a href="http://community.livejournal.com/s2flexisquares"><img src='http://p-stat.livejournal.com/img/community.gif' alt='[info]' style='vertical-align: bottom; border: 0; padding-right: 1px;' />s2flexisquares</a></b>. </li>""";

var string extra2_title ="";
    var string extra2_content ="";
    $extra2_title = """<li class="sbartitle">Title of New Box 2</li>""";
    $extra2_content = """<li class="sbaritem">Text for New Box 2. You can use HTML here if you want to.</li>""";
  
    sidebar_order($*sidebar_order_1);
    sidebar_order($*sidebar_order_2);
    sidebar_order($*sidebar_order_3);
    sidebar_order($*sidebar_order_4);
    sidebar_order($*sidebar_order_5);
    sidebar_order($*sidebar_order_6);
    print_sidebar_box($extra1_title, $extra1_content);

# Make sure the ad prints
    if (viewer_sees_vbox() and $*sidebar_order_1 != "calendar" and $*sidebar_order_2 != "calendar"
            and $*sidebar_order_3 != "calendar" and $*sidebar_order_4 != "calendar" and $*sidebar_order_5 != "calendar"
            and $*sidebar_order_6 != "calendar") {
        var Page p = get_page();
        """<div style="margin: 10px auto 10px auto; width: 160px;">""";
        $p->print_vbox();
        "</div>";
    }
}

#-------------------------------------
#
# PREVIOUS AND NEXT LINKS IN FOOTER
#
#-------------------------------------

function RecentPage::lay_print_footer()
{
    var string range = "most recent entries";
    var string sep;
    var string back;
    var string forward;

if ($.nav.skip > 0)
    {
        $range = "$.nav.skip entries back";
    }
    if ($.nav.forward_url != "" or $.nav.backward_url != "")
    {
        if ($.nav.backward_url != "")
        {
            $back = """<li><a href="$.nav.backward_url"><< """ + get_plural_phrase($.nav.backward_count, "text_skiplinks_back") + """</a></li>""";
        }
        if ($.nav.forward_url != "")
        {
            $forward = """<li><a href="$.nav.forward_url">""" + get_plural_phrase($.nav.forward_count, "text_skiplinks_forward") + """ >></a></li>""";
        }
    }
    print safe """
    <div class="clearfoot"> </div>
    <div id="footer">
        <ul class="navfooter">
            $back
            <li class="viewing">viewing $range</li>
            $forward
        </ul>
    </div>
    <div class="clearfoot"> </div>
    """;
}

My CSS:

/* Cleaned CSS: */

/* CSS for multi-styled entries */

.datesubject-multi-school{
	background-color: #232736; !important;
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 10px 3px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
  }

.datesubject-multi-school, .datesubject-multi-school * {
   	color: #888888 !important;
  }

.datesubject-multi-studyAbroad {
   	background-color: #243623; !important;
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 10px 3px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
  }

.headerimage { 
	background: url(http://pics.livejournal.com/toboe_lonewolf/pic/00001shr) #000000 top right no-repeat;
	height: 60px;
	padding: 0;
	}

/*	Template: (13.5) Jack The Stripper		*/
/*	Date: November 5, 2006				*/
/*	S2 Style: Flexible Squares
/*	Available at http://community.livejournal.com/thefulcrum/	*/
/*	Made by Liz a.k.a. grrliz.livejournal.com	*/

/*	Light modifications by Toboe LoneWolf		*/

/* ------------------------------ */
/* ------------ MAIN ------------ */
/* ------------------------------ */

html { margin: 0px; padding: 0px; }

body {
	margin: 0px; padding: 0px;
	background: #1F1F1F;
	color: #888888;
	font-size: 0.8em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "trebuchet ms", verdana, arial, tahoma, sans-serif;
	text-align: center;
	}

a, a:link, a:visited, a:active {
	color: #677888;
	text-decoration: none;
	}

a:hover {
	color: #bbbbbb;
	text-decoration: underline;
	}

blockquote {
	margin: 10px 40px;
	padding: 10px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	background: #2a2a2a;
	}

code, kbd, pre, tt {
	font-family: monospace;
	}

input, textarea {
	border: 1px solid #555555;
	background: #2a2a2a;
	color: #888888;
	}

/* --------------------------------------------- */
/* ------------ CONTAINING ELEMENTS ------------ */
/* --------------------------------------------- */

#content {  
	margin: 0px 20px; padding: 0px;
	text-align: left;
	}

#header {
	margin: 0px 0px 7px 0px;
	padding: 0px 0px 7px 0px;
	}

#maincontent { 
	margin: 0px 0px 0px 220px;
	text-align: justify;
	}

#sidebar {
	float: left;
	width: 200px;
	margin: 0px; 
	padding: 0px 0px 20px 0px;
	text-align: left;
	}

#footer {
	text-align: center;
	}

/* -------------------------------- */
/* ------------ HEADER ------------ */
/* -------------------------------- */

ul.navheader {
	width: 100%;
	margin: 15px 0px 20px 0px;
	padding: 10px 0px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	background: #282828;
	color: #888888;
	text-align: center;
	text-transform: lowercase;
	list-style-type: none;
	}

.navheader li {
	display: inline;
	margin: 0px 2px; padding: 0px;
	}

.navheader a:link, 
.navheader a:visited,
.navheader a:active {
	padding: 10px 20px;
	color: #888888;
	border-right: 1px solid #555555;
	border-left: 1px solid #555555;
	font-weight: normal;
	text-decoration: none;
	}

.navheader a:hover {
	background: #141414;
	color: #677888;
	}

li.view {
	color: #677888;
	padding: 10px 20px;
	border-right: 1px solid #555555;
	border-left: 1px solid #555555;
	text-decoration: none;
	background-color: #1C1C1C;
	}

.title {
	margin: 0px; padding: 20px 0px 0px 0px;
	border-top: 1px solid #555555;
	color: #677888;
	font-size: 1.5em;
	line-height: 17px;
	text-align: left;
	display: none;
	}

.subtitle {
	margin: 0px; padding: 10px 0px 0px 0px;
	color: #666666;
	font-size: 1.0em;
	display: none;
	}

/* -------------------------------------- */
/* ------------ MAIN CONTENT ------------ */
/* -------------------------------------- */

.subcontent {
	margin: 0px; padding: 0px;
	}

.entry {margin: 0px 0px 30px 0px;}

.entry ol {
	margin: 10px 40px;
	list-style: upper-roman;
	}

.userpic, .userpicfriends {
	position: relative;
	float: right;
	z-index: 15;
	margin: 10px 0px 5px 10px;
	text-align: center;
	background-color: transparent !important;
	color: #555555 !important;
	}

.userpic a:link, .userpicfriends a:link, 
.userpic a:visited, .userpicfriends a:visited, 
.userpic a:active, .userpicfriends a:active,
.userpicfriends font {
	color: #888888 !important;
	}

.userpic img, .userpicfriends img {
	border: 0px;
	}

.datesubject {
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 10px 3px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	}

.date {
	padding: 0px 0px 5px 0px;
	color: #999999;
	font-size: 1em;
	}

.subject {
	color: #677888;
	font-size: 1.25em;
	}

.subject a, .subject a:link, .subject a:hover{ color: #677888; text-decoration: none; }

.datesubjectSticky {
	margin: 0px 0px 10px 0px;
	padding: 10px 0px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	background-color: #141414;
	}

.entry_text { padding-left: 15px; min-height: 75px; }

.currents { margin-top: 15px; padding-left: 15px;}

.metaTable { 
	background-color: #282828; 
	border-top: 1px solid #222222;
	border-bottom: 1px solid #222222;
	padding: 5px;
	}

.comments {
	width: 100%;
	margin: 10px 0px 20px 0px;
	padding: 5px 0px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	background: #282828;
	color: #282828;
	text-align: center;
	text-transform: lowercase;
	list-style-type: none;
	}

div.comments a, 
div.comments a:link, 
div.comments a:visited {
	margin: 0px;
	padding: 5px 10px;
	color: #888888;
	border-right: 1px solid #555555;
	border-left: 1px solid #555555;
	font-size: 1em;
	font-weight: normal;
	text-decoration: none;
	}

div.comments a:hover {
	background: #141414;
	color: #677888;
	}

.skiplinks {margin: 0px 0px 10px 0px;}

.leftlinks {
	float: right;
	position: relative;
	font-style: italic;
	}

/* ----------------------------------------------------- */
/* ------------ CONTENT: ENTRY, REPLY PAGES ------------ */
/* ----------------------------------------------------- */

.datesubjectcomment {
	margin: 0px 0px 20px 0px;
	}

.userpiccomment {
	z-index: 15;
	float: left;
	left: 0px;
	margin: 0px 15px 5px 0px;
	padding: 0px;
	border: 3px solid #677888;
	}

.box {
	padding: 0px;
	}

input, textarea {
	}

textarea.textbox  {
	width: 100% !important;
	}

.reply {
	position: relative;
	margin: 20px 0px 10px 0px;
	padding: 25px 0px 10px 0px;
	text-align: left;
	}

.replytosubject {
	font-weight: bold;
	}

.commentreply {
	position: relative;
	margin: 0px;
	}

.commentbox {
	margin: 10px 0px 10px 0px; 
	padding: 20px; 
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	background: #2a2a2a;
	}

.commentbox a:link,
.commentbox a:link,
.commentbox a:active {
	color: #677888;
	}

.commentbox a:hover {color: #cccccc;}

.commentboxpartial {
	padding: 10px; 
	margin: 10px; 
	}

.commentinfo {
	margin-top: 10px; 
	width: 100%;
	}

/* --------------------------------- */
/* ------------ SIDEBAR ------------ */
/* --------------------------------- */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
	color: #888888;
	}

div#sidebar a:hover {
	color: #677888;
	text-decoration: none;
	}

.defaultuserpic {
	margin: 0;
	padding: 10px 0px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	text-align: center;
	}

.defaultuserpic a img {
	border: 2px solid #222222;
	}

.defaultuserpic a:hover img {
	border: 2px solid #555555;
	}

.defaultuserpic_text {
	padding-left: 10px;
	padding-top: 5px;
	text-align: left;
	}

.sbarheader {
	margin: 0px; padding: 0px;
	}

.sbarbody,
.sbarbody2 {
	margin: 0px;
	padding: 0px;
	}

ul.sbarlist {
	margin: 0px; padding: 0px;
	list-style: none;
	}

li.sbaritem a {
	display: block;
	padding: 2px 0px;
	border-bottom: 1px solid #444444;
	color: #888888;
	font-size: 14px;
	font-weight: normal;
	text-transform: lowercase;
	}

li.sbaritem a:hover {
	background: #141414;
	color: #677888;
	}

li.sbartitle {
	margin: 10px 0px 5px 0px;
	padding: 5px 0px 5px 7px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	color: #677888;
	font-size: 18px;
	text-transform: lowercase;
	background-color: #141414;
	}

table.calendar {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	}

.sbarcalendar {
	border: 1px solid #555555;
	background: #2a2a2a;
	text-align: center;
	}

.sbarcalendarposts {
	border: 1px solid #555555;
	background-color: #141414;
	color: #677888;
	text-align: center;
	}

.sbarcalendarposts:hover { background-color: #444444; }

.sbarcalendarposts a:link,
.sbarcalendarposts a:visited,
.sbarcalendarposts a:active {color: #677888 !important;}

.sbarcalendarposts a:hover {color: #cccccc !important; }

/* ------------------------------------------- */
/* ------------ CONTENT: ARCHIVES ------------ */
/* ------------------------------------------- */

ul.year {
	margin: 10px 30px 10px 25px;
	}

ul.year li {
	display: inline;
	color: #677888;
	font-size: 1.5em;
	}

ul.year li.active { color: #999999; }

table.yeartable {
	margin-left: auto;
	margin-right: auto;
	width: 450px;
	}

table.yeartable td.yeardate, table.yeartable td.yearday {
	border: 1px solid #555555;
	}

table.yeartable td.yearday {
	background: #2a2a2a;
	text-align: center;
	}

td.yearmonth {
	border-style: none;
	font-size: 1.2em;
	}

.yeardate a { font-weight: normal; }
.yeardate a:hover { font-weight: bold; }

/* -------------------------------- */
/* ------------ FOOTER ------------ */
/* -------------------------------- */

ul.navfooter {
	width: 100%;
	margin: 0px 0px 20px 0px;
	padding: 10px 0px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
	color: #888888;
	text-align: center;
	text-transform: lowercase;
	list-style-type: none;
	}

.navfooter li  {
	display: inline;
	margin: 0px 2px; padding: 0px;
	}
 
.navfooter a:link, 
.navfooter a:visited,
.navfooter a:active {
	padding: 10px 20px;
	color: #888888;
	border-right: 1px solid #555555;
	border-left: 1px solid #555555;
	font-weight: normal;
	text-decoration: none;
	}

.navfooter a:hover {
	background: #141414;
	color: #677888;
	}

li.viewing {
	padding: 10px 20px;
	color: #888888;
	border-right: 1px solid #555555;
	border-left: 1px solid #555555;
	font-weight: normal;
	text-decoration: none;
	}

.clearfoot {
	clear: left;
	height: 0px;
	margin: 0px; padding: 0px;
	font-size: 0px; line-height: 0px;
	}

/* ------------------------------ */
/* ------------ MISC ------------ */
/* ------------------------------ */

.clear { height: 0px; }

.skiplinks { text-align: center; }

.separator { height: 0px; }

/* ------------------------------ */
/* ------- CSS FOR TAGS --------- */
/* ------------------------------ */

#tag-box ul, #lj-tagsPage ul {
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-top: 3px;
	margin: 0px; 
	}

.tagItemHeader {
	list-style-type: none;
	text-align: right;
	font-variant: small-caps;
	}

.tagItemHeader a { font-weight: bold; }

#tag-box .tagItem {
	list-style-type: none;
	padding: 1px 0px 1px 10px;
	border-left: 6px solid;
	border-bottom: 1px solid;
	border-color: #445360;
	}

#tag-box .tagItem:hover {
	background-color: #141414; 
	border-left-color: #5b6c7a;
	}

#tag-box .tagItem a:hover { 
	color: #677888;
	text-decoration: none;
	}

#lj-tagsPage {
	width: 220px;
	margin: auto;
	}

#lj-tagsPage .tagItemHeader {
	text-align: left;
	}

#lj-tagsPage .tagItem {
	list-style-type: none;
	text-align: right;
	padding: 1px 10px 1px 0px;
	border-right: 6px solid;
	border-bottom: 1px solid;
	border-color: #445360;
	}

#lj-tagsPage .tagItem a { color: #888888; }

#lj-tagsPage .tagItem:hover {
	background-color: #141414; 
	border-right-color: #5b6c7a;
	}

#lj-tagsPage .tagItem a:hover { 
	color: #677888;
	text-decoration: none;
	}

/* ------------------------------------------- */
/* ---------- CUSTOM USER INFO ICONS --------- */
/* ------------------------------------------- */

/* Icon for users */
img[src*="userinfo.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/user_paw_v2.gif) !important;
	padding: 16px 16px 0px 0 !important;
	}

/* Icon for communities */
img[src*="community.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/community.gif) !important;
	padding: 16px 16px 0 0 !important;
	}

/* Icon for sponsored communities */
img[src*="sponcomm.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/community_sponsored.gif) !important;
	padding: 16px 16px 0 0 !important;
	}

/* Icon for syndicated feeds */
	img[src*="syndicated.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/feed-2.gif) !important;
	padding: 16px 16px 0 0 !important;
	}

/* Icon for Open ID users */
	img[src*="openid-profile.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/openID.gif) !important;
	padding: 16px 16px 0 0 !important;
	}

/* Icon for the news community */
	img[src*="newsinfo.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/news.gif) !important;
	padding: 16px 16px 0 0 !important;

}

/* To customize the user icon displayed in the username text field of the comment reply box, add this: */
input[style*="url(http://p-stat.livejournal.com/img/userinfo.gif)"] {
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/user_paw_v2.gif) !important;
	}

/* Icon for friends-only security */
.subject img[src*="icon_protected.gif"], .entry img[src*="icon_protected.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/f-lock.gif) !important;
	padding: 16px 16px 0 0 !important;
	}

/* Icon for custom friends groups security */
.subject img[src*="icon_groups.gif"], .entry img[src*="icon_groups.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/group-lock.gif) !important;
	padding: 16px 16px 0 0 !important;
	}

/* Icon for private security */
.subject img[src*="icon_private.gif"], .entry img[src*="icon_private.gif"] {
	width: 0;
	height: 0;
	background-repeat: no-repeat;
	background-image: url(http://i246.photobucket.com/albums/gg88/toboe_lonewolf/layouts/private.gif) !important;
	padding: 16px 16px 0 0 !important;
	}

/* ------------------------------------------- */
/* ---------- LJ CONTROL STRIP --------------- */
/* ------------------------------------------- */

#lj_controlstrip td, #lj_controlstrip_statustext { color: #888888; }

#lj_controlstrip a { color: #BBBBBB; }

#lj_controlstrip input { background-color: #282828; color: #999999; }

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember
	{ background-color: #282828; color: #888888; }

#lj_controlstrip_search_input_text { background: #282828 !important; color: #999999 !important; }

Tags: free accounts, paid accounts, sidebar, stylesheet

Leave a comment

[2] S2: Flexible Squares

: star_jrock wrote in mintyapple; December 25th, 17:36

Current Mood:: busy

Current Music:: Meet me On the Equinox - Death Cab For Cutie

TITLE: Thoughtless
STYLE: S2
THEME: Flexible Squares
ACCOUNTS: Basic Plus Paid
BROWSER: Tested in FF|IE|Safari
LIVE PREVIEW:

xlolix038

( I have to forget. i have to forget in order to live... )

Tags: style: flexible squares

(no subject)

: darlingbones wrote in mintyapple; December 26th, 11:14

Layout: saturnalia (flexible squares)
Tested: Safari & Firefox
Custom comment pages, tiny icons, fixed sidebar, rounded corners in FF

img | temp. live

( code & instructions )

Tags: style: flexible squares

Help with currents and blockquote!

: ellen_grieves wrote in s2flexisquares; December 25th, 16:42

Okay I don't know why and I've been messing the layout as it is, but the currents 'location, music & mood' are not in order.

Screenshot: Here

And I want to put a background when I use blockquote but transparent enough so that the text can be seen.
Screenshot: Here

Stylesheet for

k_yuki_fever

/* Stylesheet by presents.livejournal.com. */

body {
background-image: url(http://i565.photobucket.com/albums/ss94/unpayabledream/bbvw3.gif);
text-align: center;
font: 8pt arial, sans-serif;
margin: 10px 0 20px 0;
}
    a, a:link, a:visited, a:active {
color: #1CBBB4;
text-decoration: none;
}
    a:hover {
color: #F7941D;
text-decoration: none;
}
    strong, b {
color: #1CBBB4;
}
    em, i {
color: #F7941D;
}
    blockquote {
margin: 0 8px 0 8px; 
padding: 8px;
background-color: #fafafa;
color: #808080;
font: 7pt/15px arial, sans-serif;
text-align: right;
}
    code, kbd, pre, tt {
font-family: monospace;
}
    textarea, .textbox, select, input {
background-color: #fff;
color: #9C9C9C;
border: 1px solid #CCCACA;
}
    select, input {
border: 1px solid #CCCACA;
        }
    #content {
width: 75%;
margin: 0 auto;
background-color: #fff;
border: 0px;   
padding: 0px;
}
     #maincontent {
float: left;
width: 75%;
margin-top: 0px;
background-color: transparent;
color: #000000;
border: 0px;
text-align: left;
}
    #sidebar {
float: right;
padding: 0 2px 0 4px;
margin: 0 5px 0 0;
background-color: transparent;
border-left: 1px dotted #CCCCCC;
text-align: left;
width: 22%;
}
    #header {
padding: 0px;
margin: 0px;
text-align: left;
font: normal 7pt arial, sans-serif;
letter-spacing: 0px;
background-color: #2C2C2C;
color: #ffffff;
}
    #footer {
text-align: center;
font: 7pt arial, sans-serif;
background-color: transparent;
color: #F7941D;
z-index: 100;
clear: both;
border-top: 1px dotted #CCCCCC;
padding: 10px 0 0 0;
}
    div#footer a, div#footer a:link, div#footer a:visited {
color: #1CBBB4;
font-weight: normal;
}
    div#footer a:hover {
color: #F7941D;
font-weight: normal;
border-bottom: 1px dotted #ccc;
}
    /* header */
    div#header a, div#header a:link, div#header a:visited {
color: #C1C1C1;
	}
div#header a:hover {
color: #FBEDFD;
	}
      .navheader {
border: 0px;
background-color: #1B1B1B;
text-align: left;
}
    ul.navheader
{
padding: 12px 0 12px 3px;
margin: 0px;
}
    ul.navheader li  {
display: inline;
padding: 0 7px 0 7px;
}
ul.navheader li a {
background-color: #1B1B1B;
color: #ffffff;
text-transform: uppercase;
	}
.view {
color: #ffffff;
text-transform: uppercase;
	}
.title {text-align: left;
color: #1CBBB4;
font: 12pt/15pt "trebuchet ms", arial, sans-serif;
padding: 3px 10px 2px 10px;
}

.subtitle {text-align: right;
color: #F7941D;
font: 10pt/15pt "trebuchet ms", arial, sans-serif;
padding: 1px 10px 3px 10px;
}
    /* sidebar */
    div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #F7941D;
    }
    div#sidebar a:hover {
color: #808080;
text-decoration: none;
    }
    .defaultuserpic {
display: none;
}
    .sbarheader {
padding: 0px 5px 0px 5px;
}
    .sbarbody {
padding: 0px 5px 0px 5px;
}
    .sbarbody2 {
padding: 5px 5px 5px 8px;
margin: 5px;
	color: #666;
	font: 9px/15px arial, sans-serif;
background: #FAFAFA;
    }
#sidebar_summary img {display: none;}
    .sbarcalendar {
border: 1px solid #EFEFEF;
text-align: center;
font: 7pt arial, verdana, sans-serif;
padding: 4px;
color: #686868;
}
    .sbarcalendarposts {
border: 1px solid #98E0DC;
text-align: center;
font: 7pt arial, verdana, sans-serif;
padding: 4px;
}
    ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
    li.sbaritem, .tagcloud {
padding-left: 3px;
}
    li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font-family: arial, sans-serif;
font-size: 7pt;
line-height: 24px;
border: none;
border-bottom: 1px dotted #CCCCCC;
display: block;
background: transparent url(http://img.photobucket.com/albums/v72/panthersgem/ref/oli-1.gif) no-repeat center left;
padding: 0 0 0 13px;
text-transform: lowercase;
}

li.sbaritem a:hover, a:hover visited, a:hover b {
text-decoration: none;
border-bottom: 1px dotted #CCCCCC;
background: #FAFAFA url(http://img.photobucket.com/albums/v72/panthersgem/ref/oli-1.gif) no-repeat center left;
}

li.sbartitle {
padding: 0;
list-style: none;
border: 0;
background-color: #ffffff;
margin: 18px 0 8px 0;
color: #1CBBB4;
font: 7pt arial, verdana, sans-serif;
text-transform: uppercase;
}

span.count {
display: none;
}

/* maincontent */

.entry    {
margin: 0 0 0 6px;
padding: 0 10px 10px 10px;
background-color: transparent;
color: #6B6B6B;
font: 8pt/16pt arial, tahoma, arial, sans-serif;
text-align: justify;
border-width: 0px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.entry_text {padding: 0 0 12px 0;}

.userpic {
position: relative;
float: left;
margin: 10px 10px 3px 10px;
background-color: #FAFAFA;
padding: 5px;
}

.userpicfriends {
background-color: #FAFAFA !important;
padding: 5px;
text-align: center;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
margin: 10px 10px 3px 10px;
position: relative;
float: left;
}

.userpicfriends a font {
font-family: arial, verdana, sans-serif;
font-size: 7pt;
color: #606060;
}

.userpicfriends a:hover font {
color: #9C9C9C;
}

.date {
color: #c0c0c0;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
text-transform: lowercase;
margin: 0 0 0 125px;
padding: 6px 0 0 15px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/time.gif) no-repeat bottom left;
}

.subject {
color: #F7941D;
font: 11pt "trebuchet ms", arial, georgia, verdana, sans-serif;
padding: 5px 0 0 0;
margin: 0;
}

.subject a, .subject a:link, .subject a:visited {
color: #F7941D;
}

.subject a:hover {
color: #FABC72;
}

.datesubject {
background-color: #ffffff;
padding: 5px;
}

.comments {
font: 12pt "trebuchet ms", verdana, sans-serif;
text-align: right;
color: #F7941D;
background-color: #ffffff;
padding: 4px 10px 0px 5px;
border-top: 1px dotted #ccc;
text-transform: lowercase;
margin: 10px 0 0 0;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #F7941D;
}

div.comments a:hover {
color: #1CBBB4;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

.currentmood, .currentmusic, .currentlocation {
text-transform: lowercase;
color: #c0c0c0;
font-size: 7pt;
font-family: arial, sans-serif;
line-height: 11pt;
}

.currentlocation {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/oloc.gif) no-repeat center left;
padding: 0 0 0 10px;
}

.currentmood {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/omood.gif) no-repeat center left;
padding: 0 0 0 11px;
}

.currentmusic {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/omus.gif) no-repeat center left;
padding: 0 0 0 11px;
}

.currents {
padding: 0 0 3px 10px;
margin: 0;
}

.currents a:link, .currents a:visited, .currents a:active {
color: #A4A4A4;
}

.currents a:hover {
color: #c0c0c0;
border-bottom: 1px solid #EAEAEA;
}

.currents strong, .currentmood strong, .currentmusic strong {
display: none;
}

.currentmood img {display: ;}

.ljtags {
margin: 12px 0 0 10px;
font: 1pt arial, sans-serif;
color: #fff;
text-transform: lowercase;
text-align: justify;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/otag.gif) no-repeat center left;
padding: 3px 0 0 6px;
}

.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #A4A4A4;
font-weight: normal;
text-transform: lowercase;
font-size: 7pt;
padding: 0 6px 0 0;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/sep.gif) no-repeat center right;
}

.ljtags a:hover {
color: #c0c0c0;
border-bottom: 1px solid #EAEAEA;
text-decoration: none;
font-weight: normal;
}

/* maincontent --  entry, reply pages */

.datesubjectcomment {
padding-top: 5px;
line-height: 17pt;
}

.userpiccomment {
background-color: #F7F7F7;
padding: 5px;
position: relative;
left: 0px;
margin: 10px;
z-index: 15;
float: left;
top: -10px;
}

.box {
border: 0px;
padding: 10px;
clear: left;
background-color: #fff;
color: #c6c6c6;
}

textarea.textbox  {
width: 95% !important;
}

.reply    {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
color: #9C9C9C;
font: 8pt/18px arial, sans-serif;
text-align: justify;
background-color: #fff;
}

.commentreply {
position: relative;
margin: 10px;
color: #9C9C9C;
font: 8pt/18px arial, sans-serif;
text-align: justify;
padding: 5px;
}

.commentbox, .commenttext {
padding: 5px;
margin: 10px;
background-color: #fff;
border: 1px solid #CCCACA;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #efefef;
color: #9C9C9C;
font: 8pt/18px arial, sans-serif;
text-align: justify;
}

.commentinfo {
background-color: transparent;
margin-top: 10px;
width: 100%;
}

.replytoposter {
text-align: right;
color: #D1D1D1;
text-transform: lowercase;
font-size: 7pt;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/time2.gif) no-repeat center right;
margin: 0 130px 0 0;
padding: 8px 15px 0 0;
line-height: 15pt;
}

.replytosubject {
text-align: right;
font-weight: normal;
font-family: "lucida grande", arial, verdana, sans-serif;
padding: 0 0 1px 0;
color: #606060;
font-size: 12pt;
text-transform: lowercase;
border-bottom: 1px solid #EFEFEF;
margin: 0 130px 0 0;
}

/* maincontent -- year/achive pages */

/* year/achive pages */

ul.year {
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 25px 0;
background: #fff;
color: #C6C6C6;
}

ul.year li {
display: inline;
}

table.yeartable {
margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #D0D0D0;
background: #fff;
}

table.yeartable, td.yearday {
background-color: transparent;
text-align: center;
color: #8A8A8A;
background: #fff;
padding: 10px;
}

td.yearmonth {
border-style: none;
background: #fff;
}

/* footer */

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li  {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/* misc  */

.clear {
height: 0px;
}

.skiplinks {
text-align: center;
background: #fff;
padding: 5px 0 0 0;
}

.separator{
height: 25px;
    }

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
    }

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
    }

img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/plock.gif);
}

img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/plock.gif);
}

img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/plock.gif);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ti1.gif);
padding: 14px 7px 2px 2px !important;
}

.ljuser a:hover b {
color: #93DFDC;
background: transparent;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
	background-color: transparent;
  	background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ti1.gif);
padding: 14px 7px 2px 2px !important;
	}

.ljuser:hover img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
  	background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ti2.gif);
	}
    .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color: transparent;
    	background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ti1.gif);
padding: 14px 7px 2px 2px !important;
    	}
    .ljuser:hover img[src="http://p-stat.livejournal.com/img/community.gif"] {background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ti2.gif);
    	}
    #ljuser_row img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{ width: 0; height: 0; padding: 0 7px 10px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/ti1.gif); }

.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_del.gif"]{ width:0; height:0; padding: 0 16px 14px 0; background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_delete.png); }

.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_scr.gif"]{ width:0; height: 0; padding: 0 16px 14px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_screen.png); }

.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_freeze.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_freeze.png); }

.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_edit.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_edit.png); }

.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_track.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_track.png); }

.box img[src="http://p-stat.livejournal.com/img/anonymous.gif"]{ width: 0; height: 0; padding: 0 16px 12px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_anon.png); }

.box img[src="http://p-stat.livejournal.com/img/openid-profile.gif"]{ width: 0; height: 0; padding: 0 16px 15px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_oi.png); }

.box img[src="http://p-stat.livejournal.com/img/help.gif"]{ width: 0; height: 0; padding: 0 14px 14px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_help.png); }
.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_del.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://s18.photobucket.com/albums/b149/lycanthropist/Layout/commentdelete.gif);
		}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_scr.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/screen.gif);
		}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/unscreen.gif);
		}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/freeze.gif);
		}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/unfreeze.gif);
		}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_track.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/track-1.gif);
		}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_tracking.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/tracking.gif);
		}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_edit.gif"]	{
		width: 0; height: 0;
		padding: 0 20px 22px 0;
		background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/edit.gif);
		}

Tags: entries, free accounts, misc, stylesheet

Leave a comment

Editing the look of an LJ cut

: temporalranger wrote in s2flexisquares; December 24th, 20:31

Accont type: Paid
Journal: Flutterby icons

I was wondering if there was a way to define the look of the lj cut seperate from the rest of my links? I had a look around and couldn't see anything, so I apologise if this has already been asked. By preference, I'd like to have the lj cut bolded and centred, with normal links remaining as is (colour and hover-colour, normal weight and alignment.

Custom CSS:

body{ background: #f5f5f5;<br />background-image: url(http://sites.google.com/site/ljpicstore/pi/lgbgflut.jpg);<br />background-attachment: fixed;<br />background-position: left;<br />background-repeat: no-repeat;<br />font-family:lucida sans unicode; font-size:7.5pt; color:#999; line-height:150%; margin:0;}<br /><br />a, a:link, a:visited, a:active, b, i{ color: #f80394; font-weight: 100; text-decoration: none;}<br /><br />a:hover{ color: #00aeef; }<br /><br />code, kbd, pre, tt{ font-family: courier new; }<br /><br />#content{ width: 880px; float:left; }<br /><br />#maincontent{ text-align: left;<br /> background: #101010;<br /> width:550px;<br /> margin-top:20px;<br /> left:210px;<br /> position:relative;<br />} <br /><br />.subcontent, .skiplinks{ background:#fff; padding:0 10px 10px 10px; margin-top:-5px; border:1px #eee solid;}<br /><br />.skiplinks{ margin-top:-20px; }<br /><br />.entry{ margin: 10px 0 auto 0;}<br /><br />.userpic, .userpicfriends, .userpiccomment{ position: relative; float: right; text-align:center; margin: 0 -130px 0px 0px; background: transparent!important; color:#f80394!important; font-family:georgia;!important;} <br /><br />.userpicfriends font{ color: #f80394!important; }<br /><br />.userpic img, .userpicfriends img{ border:7px solid #101010; padding:0px; }<br /><br />.subject{ text-align: left; padding: 15px 15px 0 15px; color: #505050; margin:-5px -15px 0 -15px; font-weight:bold; font-family: arial; text-transform:uppercase; font-size:16px;}<br /><br />.datesubject{ padding: 5px 5px 5px 0;}<br /><br />.entry ul li, .entry ol li{ padding-left: 5px; margin-left: 15px; }<br /><br />.comments{ text-transform:uppercase; text-align: right; color:#fff; position: relative; margin: 0 0 0 -10px; font-family:georgia;}<br /><br />.comments a{ background:#f8f8f8; border:1px #eee solid; padding:4px; margin-left:-3px;}<br /><br />#footer{ margin: -25px 0 10px 0; padding: 10px; text-align: left; left:200px; position:relative;}<br /><br />ul.navfooter{ padding: 0; margin: 0;}<br /><br />ul.navfooter li{display:inline; text-align:center; font-family:georgia; background:#fff; border:1px #eee solid; padding:10px;}<br /><br />.clearfoot{ clear: both; }<br /><br />.clear{ height: 15px; }<br /><br />span.ljuser, span.ljuser a b{ padding: 0; width: 0; height: 0; margin: 0; font-weight:100; }<br /><br />span.ljuser img{ visibility: hidden; padding: 0; width: 0; height: 0; }<br /><br />.ljtaglist{ padding:15px; list-style:none; background:#fff; }<br /><br />.yeartable{ background:#fff; padding:0; margin-top:15px; }<br /><br />.yearday{ border-left:1px #ececec solid; padding:5px; }<br /><br />.yearmonth{ padding:5px; }<br /><br />.yeardate{ border-left:1px #ececec solid; border-top:1px #ececec solid; padding:5px; }<br /><br />ul.year, ul.year li{ list-style:none; padding:10px; display:inline; }<br /><br />img[src="http://l-stat.livejournal.com/img/icon_protected.gif"], img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; padding: 0 0 10px 8px; background: url(http://i25.tinypic.com/2i11ptz.gif); }<br /><br />h2, #header, .defaultuserpic, #sidebar_calendar, .currents strong, #footer .viewing, .date{ display:none; }<br /><br />#sidebar{ background: #181818; float:left; width:200px; margin: 50px 0 0 0;<br />padding: 18px 0 0 0; position:fixed; border-right: 1px solid #101010; color:#888; text-align:right; min-height:100%; font-family:georgia;}<br /><br />.sbarbody2{ background: #202020; border:1px #101010 solid; padding:10px;}<br /><br />ul.sbarlist{ list-style: none; width:100%; margin:15px -55px 0 -40px; }        <br /><br />li.sbaritem{ list-style: none; padding:2px 2px 2px 5px; background:#0f0f0f; border:1px #000 solid;}<br /><br />li.sbaritem:hover{ background:#000; border:1px #0f0f0f solid; }<br /><br />.currents{ margin-top:-10px; padding:5px; background:#f8f8f8; border:1px #eee solid; font-family:georgia;}<br /><br />.currentlocation{ background:url(http://i33.tinypic.com/6r7a4z.gif) no-repeat left center; padding:0 0 0 15px;}<br /><br />.currentmood{ background:url(http://i35.tinypic.com/3345hqf.gif) no-repeat left center; padding:0 0 0 15px; }<br /><br />.currentmusic{ background:url(http://i37.tinypic.com/2hf6of4.gif) no-repeat left center; padding:0 0 0 15px; }<br /><br />div.ContextualPopup div.Inner{ background:transparent!important; color: #ababab!important; padding:10px; width: 250px;<br />font-family:georgia; border:0; font-size:7.5pt!important;}<br /><br />div.ContextualPopup .Content{ padding:7px 10px 7px 10px; margin-right:80px; line-height: 1.4; background:#fff; border:1px solid #ececec; }<br /><br />div.ContextualPopup .Userpic{ padding:10px; background:#fff; margin:0; border:1px solid #ececec; }<br /><br />div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited{ text-decoration: none !important; font-weight: 100; color: #555!important; }<br /><br /><br />div.ContextualPopup .Relation{ letter-spacing:1px; border-bottom: 1px solid #ececec; margin-bottom:4px; padding-bottom:4px; }<br /><br />.box {<br />border-top: 1px solid #B79E9F;<br />padding: 0px;<br />margin: 0px 0px 0px 10px;<br />width:530px; <br />margin-top:20px; <br />left: -10px<br />position:relative;<br />clear: left;<br />}<br /><br />.commentbox {<br />padding: 10px;<br />margin: 0px;<br />}<br /><br />.skiplinks {<br />text-align: center;<br />}

Mods, could someone please remove the free accounts tag? Sorry for the iconvenience.

Tags: free accounts, misc, paid accounts

Leave a comment

Journal entries appear indented.

: quixotical wrote in s2flexisquares; December 23rd, 22:56

Account type: Basic
Journal:

novaculite

How can I prevent the entries from indenting?

( Coding under here... )

Tags: entries

Leave a comment

Baby it's the last show.

: retardparty wrote in mintyapple; December 24th, 1:24

Current Music:: Lady Gaga

▼ Please do not take the credit off
▼ I'd appreciate a comment if you are taking
▼ 4 different versions
Join Thatparty for more! ▼

( Rah Rah Ah Ah Ah... )

Tags: profile codes: general

Comment links: Reply/Thread/Link and buttons, move alignment to the right

: snooby_23 wrote in s2flexisquares; December 24th, 2:14

Account type: Plus
Journal:

snooby_23

Hi again. I've already solved my previous problem. Now I want to know what codes to use to shift the comment links and the buttons located below the comments posted to the right without changing the other elements? I've tried modifying things like .comment, .commentreply, etc. but nothing made it look the way I wanted.

This is what I mean:

( css overrides and preview )

If someone please help me. I know this is simple but I just can't get myself to work this out. What's more, trying to figure this out made me stay up late till 3:00am. *sigh* Help!!!!

Tags: comments, free accounts

Leave a comment

cut it out

: kristine_oh wrote in mintyapple; December 22nd, 16:12

anoher simple one :) full preview is under the cut, along with another version, codes and rules. please read them before you use :)
preview;

( this way ~ )

Tags: profile codes: general

Flexible Squares: Sea of Dreams

: wittyghosts wrote in mintyapple; December 22nd, 20:56

Current Mood:: weird

Current Music:: Love on the Cat Walk - Her Words Kill

image / live / download

( go quiet through the trees )

Tags: style: flexible squares

S2 Flexible Squares: Corbeau

: encontre wrote in mintyapple; December 21st, 23:49

Screenshot | Live Preview

S2 Flexible Squares
Tested in Firefox 3 and Safari 4
Works for all account types

( Codes & Installation )

Tags: maker: encontre, style: flexible squares

4 Christmas Profiles :D

: hitzusin wrote in mintyapple; December 22nd, 2:13

More profiles! :D I mainly did a bunch of them in one day, and thought I'd spread out distributing them so you wouldn't be flooded by my crap xD I haven't done html-y stuff in awhile, which baffles me because I really do like doing it (and learning more). Oh weell, hopefully this is the start of me doing more! :D I had to tweak a few, but I have tested them all and they work. :D

Anyways, on with the pretties! :D

( Mistletoe & Silverbells )

Tags: profile codes: general

as simple as it gets

: kristine_oh wrote in mintyapple; December 22nd, 0:41

this is my first profile code made ever, and it's just a simple layout. actually i like it, i prefer to keep it simple. :)
theres another version under the cut, along with the codes and rules. please read rules before you use it!<3

preview; (version 1)

( version two, codes and rules this way )

Tags: profile codes: general

christmas text and idol icons

: shalowater wrote in texticons411; December 21st, 17:17

preview

- none are bases (unless stated)
- i'd love suggestions on icon themes
- comments are love, nominations too
- no hotlinking, please credit
- resources | bases | icons | textures

here @

shalowater

Leave a comment

Issue with Header, Footer, Comment Bar, and Userpic Border (Solved)

: tempestinatcup wrote in s2flexisquares; December 21st, 14:44

I recently made a layout for my journal,

tempestinatcup, and I didn't know anything about CSS, so I spent hours learning it and working on the coding. Mostly, I've gotten it the way I want it, but a few problems still remain, which my newbie skills can't fix.

1. SOLVED-I needed to use width: auto.
The header is a tiny bit longer than the entries, and hangs over on the right.

2. SOLVED-by me.
The footer has a weird bullet point, which I can't figure out how to remove. Also, the footer isn't its own box (it doesn't have a background or border) and I'm not sure why.
EDIT:I used this CSS validator. It didn't tell me that there was anything wrong with my CSS, but I copied the valid CSS it gave me and the footer works fine now. (Plus, all of my CSS is nice and tidy now.)

3. SOLVED-I had a typo. :)
On my friends and comment pages, the border around the userpic box is yellow, and I can't figure out why. I want it to be black, like it is on my recent entries page.

4. SOLVED-by me.
I can't find a way for the comment bar at the bottom of each entry to be the same length as the main entry (like the date/subject bar is). I think this is an issue with the entry's padding, and I've tried different positions and negative margins, but I just can't seem to fix it.
EDIT: I used left: -12px and changed the width to 101.4%, and this works perfectly in Google Chrome but is one pixel too wide in IE! Is there a better way to fix this?
EDIT (again): I made the width 101.33%, and it works in both browsers now. I don't know about Firefox, though.

I have a free account, I have the layout's stylesheet disabled, and all of my CSS is in the custom stylesheet box on the journal customization page.

( I'm not sure how much of the code to include, so the whole thing is under the cut. )
Thanks in advance!

Tags: entry comment bar, entry usericon and username, free accounts, header and footer, solved

Xmas Snow [Twitter Layout]