Component Tips and Tricks

Component reviews

seshen — Wed, 01 Dec 2004 21:25:27 GMT

you asked for it

xevinx — Tue, 02 Mar 2004 08:09:38 GMT

this months s2themes contest is for Component! So if you think your Component colors theme is badass, hop on over and submit it into the competition!

Updates Live

xevinx — Sat, 21 Feb 2004 07:13:59 GMT

The updates previously mentioned are now live. This includes the Page Summary feature which can by turned on in your customization wizard, and the edit/mem buttons which can be turned off from the wizard.

testing help

xevinx — Wed, 04 Feb 2004 07:43:57 GMT

Hey all, the addition to the Page Summary and the Edit/Mem buttons have been implemented and are live on the test server, so those with accounts on there, if you could take a look at it and let me know how it works for you, I'd be greatful, thanks :)

More changes

xevinx — Mon, 02 Feb 2004 22:08:19 GMT

I added the Edit/Mem/Mail links to the recent pages, by default will be turned on, but I added an option to turn them off. So now there's an option to turn them off of the Recent View's and a seperate option for the Entry View. I removed the links from the ReplyPage since I couldn't keep them off when replying to a comment, but have them on otherwise. So, if this seems to be a problem for you, let me know, thanks :)

http://test.livejournal.org/users/xevinx/

Help

xevinx — Mon, 02 Feb 2004 17:11:43 GMT

I've added the Page Summary to Component and it'd help greatly to catch any visual errors if anyone with a moment could look it over. On top of adding the Page Summary, I also added "width=100%" to the table that the print_comment_top function, so check out the comment page too. Thanks. If you discover anything unusual, please let me know what OS and browser and version you're using, thanks :)

Currently this is not the test server version, just my own layer on the test server. So you have to check it out on my journal:

http://test.livejournal.org/users/xevinx/
http://test.livejournal.org/users/xevinx/friends/
http://test.livejournal.org/users/xevinx/2004/01/
http://test.livejournal.org/users/xevinx/2004/01/27/
http://test.livejournal.org/users/xevinx/11680.html?nc=14

Added: Oh yeah, if you could, let me know even if it looks good, thanks :)

s2 color theme contest

xevinx — Wed, 28 Jan 2004 10:14:19 GMT

The color theme contest has started! However...this month's contest is not for Component. It is for Digital Multiplex. Component will come soon, I'm sure. Don't be discouraged though, it's fun anyway! Check it out over at s2themes.

Updates coming!

xevinx — Wed, 14 Jan 2004 16:32:06 GMT

I am currently working on some updates to Component. Included in those updates are the Page Summary that has appeared recently in the Digital Multiplex and Opal S2 styles. Also I am adding "Add to Memories", "Email a Friends", "Edit", and "Link" links to each entry on the RecentPage entries.

So, as long as we're updating things, I thought it'd be nice to have a little contest. The contest will be for the best color theme! If it goes well, I'd like to do one a month and rotate through different S2 styles. I'm still working on all the details, but the way I see it is that a group of volunteers narrow the selection down to 5 or 10 and those are then voted on by everyone else. The winner(s) gets their theme added to the available system themes for that style. What do you think?

update to component

xevinx — Mon, 05 Jan 2004 08:27:23 GMT

Bug fix: I missed a line of code originally, and without any way to test it until a January came along, I didn't catch it until a few days ago. If you get the error "Invalid month: 00" in the mini-calendar, then you're familiar with the bug. This has been fixed on the test server and will eventually make its way over to the lj.

Example of using print_custom_head() - Adding transparency.

xevinx — Wed, 26 Nov 2003 14:54:38 GMT

Until recently, if you wanted to customize any elements in the stylesheet in Component, you had to recreate the print_stylesheet() function, paste the contents of the entire stylesheet into it, and make the few minor changes you wanted to. However, with the addition of print_custom_head to S2 styles (I think they all have it now), you can now modify the behavior of the stylesheet without having to recreate the entire thing.

When you make changes through the wizard or theme/user layers, it often changes values in your external stylesheet. The external stylesheet is then loaded into the top of the page so that as the rest of the page loads your browser knows how to format it. Now the contents of print_custom_head() are loaded right below the external stylesheet. The browser loads the external first, then sees any style information that you have entered using print_custom_head. It uses the last style infromation it finds to format the page. So if, for example, you want to change the font size from px to em, you can use:

body, td { font-size: 1em; }

and it will use this value, even though the external stylesheet states the font size in px. Its important to note though that just because we have a body here, we're not going to lose the rest of the body style from the external stylesheet. We're simply modifying or appending.

Now, on to the fun stuff.

The print_custom_head() function is a little different than other functions we've dealt with in my tutorials. Unlike print_stylesheet, this function is not a global function. For practical purposes, this means that the code will look a little different. However, its a lot cooler because we can change its behavior depending on what page you're on. Initially we'll take a look at Page. All pages within the style inherit from Page. That means that if we don't specify a print_custom_head() for the page you're on, it'll use the values found in Page.

For example, lets say we want to make our component backgrounds slightly transparent. First we find that each component uses the class of .compBg:

<td class="compBg"

So, using Page and print_custom_head() together, we get:

function Page::print_custom_head() {

Then we use the familiar triple quotes and enter what we want printed in the head. In this case, we want to print style stuff, so we use the style tag:

	"""
	<style media="screen" type="text/css">

Then, searching around the many many helpful communities we can find the CSS needed to make things transparent. We add that to our .compBg class and end up with:

	.compBg { filter:alpha(opacity=65); -moz-opacity:0.65; }

And finally, close our style tag, triple quotes, and curly bracket.

	</style>
	""";
}

Put that all together and we get:

function Page::print_custom_head() {
	"""
	<style media="screen" type="text/css">
	.compBg { filter:alpha(opacity=65); -moz-opacity:0.65; }
	</style>
	""";
}

Now, for some reason, you want the opacity to be 50% on your Friends Page. Easy, enough, instead of using Page, use the FriendsPage class.

function FriendsPage::print_custom_head() {
	"""
	<style media="screen" type="text/css">
	.compBg { filter:alpha(opacity=50); -moz-opacity:0.5; }
	</style>
	""";
}

Other pages you may be interested in using are found in the S2 documentation, but I've also listed them here:

Note that when looking at those, some have Derived (Child) and Parent classes. For example, FriendsPage is a child of RecentPage. That means that if you specify a print_custom_head for RecentPage that FriendsPage will use it too, unless you specify something else for FriendsPage. However, just like I don't inherit anything from my child, RecentPage doesn't get anything from FriendsPage.

I don't feel like I've explained this all very well, not really in the writing mindset, but I wanted to get this info out to you all. So let me know if this makes sense to you, or how I can reword anything that might help explain things. Thanks.

Minor Update

xevinx — Sat, 22 Nov 2003 13:24:25 GMT

On the EntryPage (the page with the comments) it will default to always showing the userpic. This is so that it is more in-line with the rest of the styles. For those that don't want it to show, there is a hidden property that you will be able to set like so:

set show_entrypage_userpic = false;

It should be on the test server now for those that would like to check it out and test it out for me, thanks :)

fty

xevinx — Thu, 20 Nov 2003 00:21:08 GMT

There was an addition to the EntryPage::print_body for those that have modified it. No biggie...

For everyone, now there will be a link at the bottom of the Entry page, below all the comments, that lets you reply to the top entry. This should make it a little more usable. Look for it to be on the test server in the next day or so if you want to test it out.

Updates Updates Updates

xevinx — Tue, 11 Nov 2003 09:39:54 GMT

Greetings all!

And welcome to another round of Component changes.

Today you will find a couple things changed that are both exciting and different.

First off, many of you may notice that the font size may be a little bit different.

This is because the default was set to 11px. Now it's set to 12px. It's not that all journals have to have a large font size, but we don't want livejournal getting a reputation that its hard to read. So mainly we wanted to change the default size. Some of you may be a little upset over this, but I have more exciting news that should make you happy....in a minute.

Also, some of the themes were changed slightly, including the default one, to be a little higher contrast. Once again, looking to make the defaults a little more legible. None of the color changes were drastic.

Also, my apologies for print_free_text() change...again...it wasn't intentional and will be changed back to print_free_text(Page p) soon.

Finally...here's the exciting bit...

Component (and Boxer) now use print_custom_head()! This essentially replaces the role that overrides did with S1.

No long will you need to override the entire stylesheet! (I hated that you had to)

How does it work?

So, now, instead of override print_stylesheet() and having the replace the entire stylesheet you can create a new function in your user/theme layer that looks like this:

function Page::print_custom_head() {
   """<style>
          body { font-size: 11px; }
        </style>
   """;
}

Everything you enter here will be printed out after the stylesheet, so you'd only be changing the font size while leaving everything else the same.

I'm sure in the near distant future we'll be seeing more complex examples and tutorials on using print_custon_head, but this should get you started.

Thanks again, and sorry about print_free_text()...again.

(i love you guys because you're all so patient with me.... *wink* *wink* )

Component stylesheet, with properties

crschmidt — Sat, 08 Nov 2003 15:21:20 GMT

Since Component is closed source, all tutorials up to this point have not included information on the properties in the stylesheet. I needed to look at the stylesheet extensively for a support request, so I figured I'd just go through and reverse engineer the properties.

So, from now on, you should be able to use this stylesheet rather than one you copy yourself. There may be some differences that you will have to manually correct, such as the font_size, because I'm not sure the exact math used in creating that variable. Additionally, the palimg stuff isn't something I understand at all, so those might be a little off. However, the rest of it, including all of the colors, should be all find and dandy.

Hopefully this helps some people out when trying to create or recreate component styles. My next task is to release all of the html included in each of the builtin functions so that they can be more easily overridden.

Good luck, and happy styling!

function print_stylesheet() {
var string lineht = $*lineheight + "px";
var string linesmall = ($*lineheight-2)+"px";
var string palimg = $*header_bgcolor.as_string->substr(1,6);
var string $bgimg = $*page_background_image + "p0000000";
"""
		body { background-color: $*main_bgcolor;

			background-image: url("$bgimg");
			background-repeat: repeat;
			background-position: center;
			background-attachment: scroll;
		
			margin-top: 0px; margin-left: 0px;
			margin-right: 0px;
			font-family: $*font_family;
			font-size: .65em;  #font_size seems to be involved somehow
			color: $*entry_fgcolor;
		}
		
		td, tr {
			font-family: $*font_family;
			font-size: 100%;
			color: $*entry_fgcolor;
			line-height: $*lineht;
		}

		h1, h2, h3, h4 { line-height: normal; }
		
		a {
			color: $*entry_link;
			
		}
		
		a:visited {
			color: $*entry_link_visited;
		}
		
		a.calendarLink {
			color: $*calendar_link;
		}
		
		a.header {
			color: $*header_link;
		}
		a.headerLinks {
			color: $*header_link;
		}
		
		
			select, input, textarea {
				font-family: $*font_family;
				font-size: 100%;
				background-color: $*comp_bgcolor;
				color: $*comp_fgcolor;
			}
			

		input { line-height: normal; }

		.subject { font-weight: bold; }
		.small { margin-top: 3px;}
	
		.header {
			background-image: url("http://www.livejournal.com/palimg/component/top-bg.gif/pt$palimg");
			background-repeat: repeat-x;
			height: 25px;
		}
		
		.userTitle {
			font-size: 130%;
			text-weight: bolder;
			color: $*header_fgcolor;
			line-height: 17px;
		}
		
		.userSubTitle { 
			font-size: 120%;
			color: $*header_fgcolor_lt;
			line-height: $lineht;
		}
		
		.header-item {
			padding-left: 15px;
			position: relative;
			top: 5px;
		}
		
		.dkLine { background-color: #000000; }
		.ltLine { background-color: #000046; }
		.medLine { background-color: #000000; }
		.divLine { background-color: $*header_fgcolor; }
		.tabBg { background-color: $*header_bgcolor; }
		
		.entryDate {
			font-size: 100%;
			color: $*header_fgcolor_lt;
		}
		
		.entryHolderBg {
			background-color: $*comp_bgcolor;
			color: $*comp_fgcolor;
			padding-top: 7px;
			padding-right: 7px;
			padding-left: 7px;
			padding-bottom: 7px;
		}
		
		.entry {
			padding-top: 7px;
			padding-right: 7px;
			padding-left: 7px;
			padding-bottom: 7px;
			background-color: $*entry_bgcolor;
			font-size: 100%;
		}
		
		.entryHeader {
			font-size: 110%;
			font-weight: bold;
		}
		
		.entryComments {
			margin-top: 8px;
			margin-left: 8px;
			font-size: 100%;
			color: $*comp_fgcolor;
		}
		
		.entryDash {
			background-color: #000000;
			width: 100%;
			height: 1px;
		}
		
		.sideHeader {
			color: $*header_fgcolor;
		}
		
		.comp { margin-bottom: 3px; }

		.compBg { background-color: $*comp_bgcolor; }

		.compContent {
			padding-left: 6px;
			padding-right: 6px;
			padding-bottom: 6px;
			padding-top: 3px;
			line-height: 18px;
			color: $*comp_fgcolor;
		}
		
		.compList {
			line-height: $linesmall;
			padding-left: 6px;
		}
		
		.userPic { border-color: #000000; }
		
		.shortLine {
			width: 20px;
			background-color: #000000;
			margin-bottom: 1px;
		}

		a.calendartitle {
			font-size: 11px;
		}
		
		.calendarInactive {
			background-color: $*calendar_inactive;
			font-size: 9px;
			letter-spacing: 2px;
			color: $*calendar_fgcolor;
		}
		
		.calendarActive {
			color: $*calendar_link;
			background-color: $*calendar_active;
			font-size: 9px;
			letter-spacing: 2px;
		}
""";
}

Editing the Profile Component

liabunny — Sun, 02 Nov 2003 10:37:22 GMT

Ok, here's a tutorial to edit your profile component, and how to add in the instant messenger and livejournal stuff...

First off, here's the basic code to edit your profile component, which zzyzx posted here.



function print_profile(Page p) {

print_comp_header("PROFILE COMPONENT TITLE");
"""
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="50%" align="center">
<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
</td>
<td align="center"><a href="http://www.livejournal.com/allpics.bml?user=USERNAME">$p.journal.default_pic </a></td>
<td width="50%" align="center">
<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>
</td>
</tr>
<tr>
<td colspan="3" class="compContent">
<div><b>User:</b> <span class='ljuser' style='white-space:nowrap;'><a href='http://www.livejournal.com/userinfo.bml?user=USERNAME'><img src='http://stat.livejournal.com/img/userinfo.gif' alt='userinfo' width='17' height='17' style='vertical-align:bottom;border:0;' /></a><a href='http://www.livejournal.com/users/USERNAME/'><b>USERNAME</b></a></span></div>
<div><b>Name:</b> NAME</div>
<div><b>Website:</b> <a href="WEBSITE URL">WEBSITE NAME</a></div>
<div><b>Age:</b> AGE</div>
<div><b>Location:</b> LOCATION</div>

##### If you choose to add in the IM/LJ stuff, it will go right here #####

</td>
</tr> 
</table>
""";
print_comp_footer();
}

Ok, so now that you've got that, if you want to add the instant message/live journal stuff, you will need to add this in where the red text is in the code above...



<table style="width: 100%;">
<tr><th colspan="2">Instant Messengers</th></tr>

<tr><td><a href="http://edit.yahoo.com/config/send_webmesg?.target=YOUR YAHOO NAME">
<img src="URL FOR YAHOO IMAGE GOES HERE" alt="Message me" style="border: 0;" /></a></td>
<td style="text-align: right;">
<a href="http://profiles.yahoo.com/YOUR YAHOO NAME">my Profile</a><br />
<a href="http://edit.yahoo.com/config/set_buddygrp?.src=&.cmd=a&.bg=Friends&.bdl=YOUR YAHOO NAME">+Add me</a><br />
<a href="http://edit.yahoo.com/config/send_webmesg?.target=YOUR YAHOO NAME">Message me</a><br />
<a href="http://photos.yahoo.com/YOUR YAHOO NAME">my Photos</a><br /></td></tr>

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

<tr><td><a href="http://wwp.icq.com/scripts/contact.dll?msgto=YOUR ICQ NUMBER">
<img src="URL FOR ICQ IMAGE GOES HERE" alt="Message me" style="border: 0;" /></a></td>
<td style="text-align: right;">
<a href="http://wwp.icq.com/whitepages/about_me/1,,,00.html?Uin=YOUR ICQ NUMBER">my Profile</a><br />
<a href="http://wwp.icq.com/scripts/search.dll?to=YOUR ICQ NUMBER">+Add me</a><br />
<a href="http://wwp.icq.com/scripts/contact.dll?msgto=YOUR ICQ NUMBER">Message me</a><br /></td></tr>

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

<tr><td><a href="aim:goim?screenname=YOUR AIM SCREENNAME&message=I'm+an+LJ+junkie+too!">
<img src="URL FOR AIM IMAGE GOES HERE" alt="Message me" style="border: 0;" /></a></td>
<td style="text-align: right;">
<a href="aim:addbuddy?screenname=YOUR AIM SCREENNAME">+add me</a><br />
<a href="aim:goim?screenname=YOUR AIM SCREENNAME&message=I'm+an+LJ+junkie+too!">message me</a><br /></td></tr>

<tr><th colspan="2">LiveJournal</th></tr>
<tr><td><a href="http://www.livejournal.com/friends/add.bml?user=YOUR USERNAME">
<img src="URL FOR ADD USER IMAGE GOES HERE" alt="Add me" style="border: 0;" /></a></td>
<td style="text-align: right;"><a href="http://www.livejournal.com/friends/add.bml?user=YOUR USERNAME">+add me</a></td></tr>

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

<tr><td><a href="http://www.livejournal.com/todo/?user=YOUR USERNAME">
<img src="URL FOR TODO LIST IMAGE GOES HERE" alt="my Todo list" style="border: 0;" /></a></td>
<td style="text-align: right;"><a href="http://www.livejournal.com/todo/?user=YOUR USERNAME">my to do list</a></td></tr>

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

<tr><td><a href="http://www.livejournal.com/tools/memories.bml?user=YOUR USERNAME">
<img src="URL FOR MEMORIES IMAGE GOES HERE" alt="my Memories" style="border: 0;" /></a></td>
<td style="text-align: right;"><a href="http://www.livejournal.com/tools/memories.bml?user=YOUR USERNAME">my memories</a></td></tr>

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

<tr><td><a href="http://www.livejournal.com/tools/tellafriend.bml?user=YOUR USERNAME">
<img src="URL FOR TELL A FRIEND IMAGE GOES HERE" alt="Tell someone about me" style="border: 0;" /></a></td>
<td style="text-align: right;"><a href="http://www.livejournal.com/tools/tellafriend.bml?user=YOUR USERNAME">tell someone about me</a>
</td>
</tr>
</table>

If I caught them all, I put in capital letters where you need to change it to your username.

Here's some images you can use:

To get the images, upload them to your own webspace and put their urls in this code.

Last thing... let me know if it doesn't work right. I proofread all this a couple of times, but still may have missed something. And I only used the AIM section in the instant messengers, so I went back and added in the Yahoo and ICQ ones, so let me know if they don't work right, I didn't test it out with them in it.

edit: Sorry, for some reason this post wound up with a weird error I had to go back in and fix. This happened with this post in component_help and I fixed it, but forgot that I had it posted here as well. Anyway, it's all fixed now.

I have also uploaded some pictures you can use and put them in the post, but I do ask that you save them and upload them to your own webspace. I'm using free hosting and it only allows so much bandwith.

Picture above entries tutorial

anchan218 — Thu, 30 Oct 2003 22:20:17 GMT

For those of you who have used my tutorial, I've finally figured out why the mini calendar used to break with it and have fixed it so the mini calendar now works, and the tutorial has been updated with the fixed code. If you're using it, I suggest you at least look at the code I have at the end so you can fix your journals. :)

HOW TO: searching in component using freefind

aelana — Tue, 14 Oct 2003 10:51:07 GMT

Ok more component override fun... I used to have a "search style" in S1 that fed to freefind then they changed some things in S1 surrounding & and & that made it impossible... now with S2, I can do it without even creating a style, just by overriding some things in component...

What this allows you to do is sign up with freefind.com for free search which spiders your journal and comments and allows you and others to search through your prior entries and comments without seriously impacting LJ's servers.

How to do it:
use the following override in a theme layer (per another howto posted in this community)

function MonthPage::print() {
  if ($.args{"searchseed"} != "true") {
    page_layout($this);
  } else {
    var MonthEntryInfo index;
    var MonthDay dayindex;
    """<html><head><title>FreeFind Search Seed</title></head><body>""";
    foreach $index ($.months) {
      print "<a href=\"$index.url?.searchseed=true\">$index.url?.searchseed=true</a><br>";
    }
    foreach $dayindex ($.days) {
      var Entry entryindex;
      foreach $entryindex ($dayindex.entries) {
        print "<a href=\"$entryindex.permalink_url\">$entryindex.permalink_url</a><br>";
      }
    }
    """</body></html>""";
  }
}

Then sign up for freefind.com using the url: http://www.livejournal.com/users/username/2003/10/?.searchseed=true (note: replace username with your username and you can use any year and month, it doesnt matter you don't even need to have any entries for that month or even have had a LJ in that month).

Then go into the freefind control panel under "exclude pages" and put the following rules in:

http://www.livejournal.com/*
http://www.livejournal.com/users/username/*.html index=yes follow=yes
http://www.livejournal.com/users/username/*?.searchseed=true index=no follow=yes
http://www.livejournal.com/users/username/*.html?mode=reply index=no follow=no
http://www.livejournal.com/users/username/*.html?thread=*#* index=yes follow=yes

Again replacing username with your username.

[edit: thanks to liabunny for the following addition: "a starting point [needs to be added] (under the "build index" tab on the FreeFind Control Center) to http://www.livejournal.com to get it to work" Thanks]

You will need to will want to customize your search result page in freefind, secudeule the spidering for weekly and get the html from the html tab and put it in a post, custom component and/or your user info... But that is all either documented already (see this journal for how to create custom components) or on freefind's control panel which should be easy enough to figure out.

Hope people like and enjoy it.

The benifit of doing it this way instead of a new whole style is that the pages they get to from the search will be in your component style :) plus IMO its slicker, esp if you customize your search page to look like the rest of your journal... then it all looks the same... try mine out at aelana if your interested on how it looks when all is said and done.

Change Component Date Format!

xevinx — Wed, 01 Oct 2003 21:39:31 GMT

See, already component_help has come in handy.

----

Prerequisite: Ability to create/modify a theme/user layer.

----

Component uses the date_format("long") for entries. So to change the date format, you need to change the settings for what it considers to be "long" (as you'll see, size does not matter) in your theme/user layer. S2 has a way built into it to change this since different languages and cultures use different ordering for their dates, etc...

So, in your user/theme layer, add

set lang_fmt_date_long =

then use the S2 manual's Date Formats to come up with a string for the format. For example, instead of "February 5th, 1980", which is the default for Component, you can move the day in front of the month by appending:

"%%dayord%% %%month%% %%yyyy%%";

or shorten the year by using %%yy%% for the 2 digit version...and on and on.

so you would have:

set lang_fmt_date_long = "%%dayord%% %%month%% %%yyyy%%";

Thanks for the voting

xevinx — Wed, 01 Oct 2003 15:12:16 GMT

The poll is closer than I wanted it to be. I was hoping for a clear answer. The general feedback though is that people would rather have this community stay as is so that they don't have to filter it due to excessive posts. I agree strongly with that, there are other S2 communities that fill up my friend's page as it is. At the same time though, I want people to get their questions answered, so, thanks to liabunnny, there is now component_help. I know, it may seem excessive to have two communities (even one seemed overboard to me) for one style, but if it helps people, I'll support it.

So this community will be used solely for tips/tricks/tutorials and announcements, and component_help will be used to asking questions or reporting errors. If a bug is verified or tip/trick comes through component_help, I will post it here too as an announcement. Hopefully this will help in getting people the help that is needed, and will also keep the posts to this community down, for those using it just for the latest news.

Any attempts to post to this community that is not a Tip/Trick/Tutorial or Announcement relating to Component will be rejected and will be directed to component_help. I apologize, but I just don't have the time to answer each one individually now.

Also, the community user info and memories have been updated.

Thanks,
Kevin

s2component poll

xevinx — Tue, 30 Sep 2003 20:26:43 GMT

A note before the question: I've gotten a couple of reports of comments acting weird on the Entry pages today. I haven't made any changes to the code in Component, but I guess there have been some changes to the livejournal code recently. I'll look into this, but keep an eye out for it. You can reply to this post if you need to report any oddities on it instead of the Bugs post.

Speaking of the Bugs post, that brings me to the Question. There has recently been an increase in the number of submitted posts to this community. I also haven't had time to go over a lot of the comments to bugs/suggestions/feedback lately. A lot of them have been questions previously asked by others. I also have noticed that there should be a "questions" entry people can reply to. So, what does this all tell me? That maybe it's time for this to be an unmoderated community. This means the community is no longer a centerpoint for tips/tricks/tutorials, but a place for people to help each other out with problems and such. This has always been my intention, but I wanted to keep it simple while people adjusted to S2 and Component. However, maybe it's still too soon. So, let's put it to a vote!

Vote Yes to Open the community, vote No to keep it tutorials/tips/announcements.

edit: When I say "unmoderated", I mean that posts to the community will go straight to the community instead of being approved first. I'll still be watching the community to get rid of off-topic posts and to reply when I have time.

edit: Voting is now closed.

Override blitz...

aelana — Fri, 26 Sep 2003 12:20:23 GMT

Ok time to further my exploration of s2 and mangling of component :) *chuckle*

I wanted to be able to have two "different" kind of entries on my Recent and Day view...
I wanted to be able to format an entry where the title ends up in the top area instead of the date/time and remove things like the user icon and the like (for announcements, see http://www.livejournal.com/users/aelana at the top -- the welcome message is a forward-dated message that is set using the code below to an announcemnt).
The other was a hidden entry that doesn't show up on the recent or day views, but can be linked to explicitly.

While musing about how to code this I noticed in xevinx's journal that he was thinking about doing it by date but that didn't seem right or generic enough for me (i want to be able to randomly do them throughout my journal not just at the top and bottom)... so I settled on doing it based on two special moods...

The code below overwrites the print_entry function in the RecentPage and DayPage (and FriendsPage, just to change it back for the Friends Page) so that if an entry has the mood "special/announcement" it is formatted like an announcement, and if it is "special/hidden" it hides it... if you tack "?.unmask=true" it will display all the events "normally" (so you can do things like find out links for hidden entries, etc)...

Enjoy.

(note - I couldn't override in the ReplyPage and EntryPage for some reason, so this formatting does not carry over to those... also your friends will not see the special formatting, so changes are you will want to set backdate on entries that you do this to so it doesnt go to their friends' pages)
(also note - this does not do anything with poster name etc, so it may need tweaking for community and shared journal use - or not depending on who/why you want to use it)

function DayPage::print_entry(Entry e) {
  var Color fg;
  var Color bg;

  if (($e.metadata{"mood"} == "special/announcement") and ($.args{"unmask"} != "true")) {
    print_entry_header("<b>$e.subject</b>");
    print_system_box_top();
    print_content_top();
    print $e.text;
    print_content_bottom();

    if ($e.comments.enabled) {
      if (not ($e.comments.count == 0)) {
        """<div class="entryComments">""";
        $e.comments->print_readlink();
        """ """;
        print $*comment_divider;
        """ """;      
      }
      $e.comments->print_postlink();
      """</div>""";
    }

    print_system_box_bottom();
    print_spacer();
  } elseif ((not ($e.metadata{"mood"} == "special/hidden")) or ($.args{"unmask"} == "true")) {
    print_entry($this, $e, $bg->Color("#ffffff"), $fg->Color("#000000"), false);  
  }
}

function RecentPage::print_entry(Entry e) {
  var Color fg;
  var Color bg;

  if (($e.metadata{"mood"} == "special/announcement") and ($.args{"unmask"} != "true")) {
    print_entry_header("<b>$e.subject</b>");
    print_system_box_top();
    print_content_top();
    print $e.text;
    print_content_bottom();

    if ($e.comments.enabled) {
        """<div class="entryComments">""";
      if (not ($e.comments.count == 0)) {
        $e.comments->print_readlink();
        """ """;
        print $*comment_divider;
        """ """;      
      }
      $e.comments->print_postlink();
      """</div>""";
    }

    print_system_box_bottom();
    print_spacer();
  } elseif ((not ($e.metadata{"mood"} == "special/hidden")) or ($.args{"unmask"} == "true")) {
    print_entry($this, $e, $bg->Color("#ffffff"), $fg->Color("#000000"), false);  
  }
}


function FriendsPage::print_entry(Entry e) {
  print_entry($this, $e, $.friends{$e.journal.username}.bgcolor, $.friends{$e.journal.username}.fgcolor, false);
}

How to give yourself an error page...

aelana — Thu, 25 Sep 2003 09:54:16 GMT

I have a Default View on friends list that is empty and various friends groups that I read... I wanted to be able to alert people to this fact if they try to go to my friends page.
Another possible reason for this is to allert people to a friends only journal (i.e. going to the LastN page with no entries)

One way that works for the LastN page is a far distant past post that is publicly viewable, but that does not work for the Friends page because friends page only will show posts posted (not date on post) within the last two weeks.

So I did was overrid RecentPage:print and check for size $.entries of 0 (no entries) if not call page_layout if so display my erorr... and poof instant error page...

(note you have to create a custom theme, look at previous posts in this communitiy if you need a tutorial on that)..

function RecentPage::print() {
  var Page p;
  $p = get_page();

  if ((size $.entries) == 0) {
  """
	<!DOCTYPE html 
    	 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
		  <head>
                      <link rel="stylesheet" href="$.stylesheet_url" type="text/css" />
  """;
  print $.head_content;
  """
                     <title>Error</title>
                  </head>
                  <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
                  <table cellspacing="0" cellpadding="0" border="0" width="100%">
                 <tr><td colspan=5><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
	         <tr>
		    <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0" /></td>
  		    <td valign="top" width="99%">
  """;

  print_entry_header("<h3>Error</h3>");
  print_system_box_top();

  """
           
           PUT YOUR ERROR HTML HERE   
           

  """;  

  print_system_box_bottom();


  """
                    </td>
                    		<td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0" /></td>
  """;
  print_my_components($p);
  """
      		    <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0" /></td>
                 </tr>
                  </table>
                  </body>
                </html>
  """;
  } else {
   page_layout($p);
  }
}

official notice

xevinx — Thu, 18 Sep 2003 19:20:01 GMT

Officially we are leaving (Page p) in the print_free_text(Page p) function.
All my tutorials have been updated to represent the changes.
Those that have already added Page p will not have to do anything.
Those that were waiting for it to be reverted should modify their layer.

Once again, sorry about the confusion.

Notice

xevinx — Fri, 12 Sep 2003 08:33:58 GMT

Due to my mistake of making

function print_free_text(Page p) {

A lot of people are getting error compiling layers, or are missing free_text components.

To fix, change:

function print_free_text();

function print_free_text(Page p);

and if you have

var Page p = get_page();

(which you would if you did the update journal component), get rid of it.

however, as soon as this latest update goes through, you'll need to change it back...

more updates

xevinx — Thu, 11 Sep 2003 16:16:13 GMT

changes went live.

the use of "em" didn't go over well. some people were getting really large text, some were getting really small text. the differences between using the Component setting of "small", "normal", "large", etc and using IE's Text Size setting "smaller", "small", "medium" etc were being confused. General chaos continued, cats were marrying dogs, rain come up from the ground, etc.

So, for the time being, font sizes have been moved back to "px". The question is, does it still need to change to "em" since users can now can enable the View comment pages in your journal style? option in your personal information? Any suggestions on font handling that would minimize the number of broken styles? I'd especially like to hear from other web developers.

Also, print_free_text(Page p) has been changed back to pring_free_text() so that it wont break your layers anymore. My bad...I'm sorry...

Finally, because of the change back to pixel, $base_font is still available, but does nothing at the moment. If you're using it in a layer, I recommend removing it in case base_font is completely removed in the future (which might be the case if the fonts stay with px).