Opal Resources
Here are a few helpful resources for coding using Opal. These are based on frequently asked questions in opal_help and my previous Opal layouts. I didn't write most of these tutorials or bits of code, but they are scattered around in different entries, communities, and comments, so I thought it would be helpful to provide links to them in a single entry. This isn't a comprehensive list so if you discover more, by all means comment here and I’ll edit the post to add them.
Notes:
All apply to Paid/Perm accounts.
Things that will work for Basic/Plus accounts are denoted with *'s.
Changes that apply to kunzite1's version of halffling's template are denoted with **'s.
• Edits: •
[01/2008]
• I added a tutorial for changing security images to text in both the Entires and Archive.
[09/2007]
• I added a tutorial for changing the mood, location, music, and tags text to images.
[07/2007]
• I added a Sidebar Tags Cloud code.
• I added a fix for the Random Text in Sidebar code for carriep63's Opal Unfolded template.
[06/2007]
• I added links to my Opal Stylesheet Explained tutorial, how to edit links in the entry and comment linkbars, and how to make your sidebar calendar start on Monday instead of Sunday.
• Opal Colors Explained by onetimeoffer is now locked, so I removed it from the Helpful Hints section.
Frequently Asked Questions
• Helpful Hints: •
Check out component_help's Getting Started Guide for helpful information on S2.
Check out my Opal Sytlesheet Guide: Part 1 | Part 2 in graphicsbyjulz
Q: How do I make my layer viewable to all and post a link to it?
When asking a question about your specific layout, it is very helpful to provide a link to the layer in question so the people helping you can see your actual code. Follow this tutorial originally posted in component_help.
Q: Why do I get compiling errors when using HTML?
This comment in component_help explains common compiling errors due to quotes and HTML syntax.
Adding HTML to parts to your layer is easy, just put it between triple quotes like this """HTML"""; otherwise it will give you an error when compiling.
• Navigation: •
Q: How do I remove the Navigation Links? *
#nav {
display: none;
}
Q: How do I change the order and/or delete some of the links in my Navbar?
Navigation links are defined in Page::lay_print_header.
kunzite1's version of and halffling's code:
Replace this:
var string[] views_order = $.views_order;
With this:
var string[] views_order = ["userinfo", "recent", "friends", "archive", "tags"];
pamelajoy's code:
Replace this:
foreach var string v ($.views_order) {
With this:
foreach var string v ("userinfo", "recent", "friends", "archive", "tags"]) {
No template, ignited's code, grrliz's code, and carriep63's code:
Add this to your layer:
function Page::lay_print_header () {
var string title = $this->title();
print safe """
$title
""";
foreach var string v ("userinfo", "recent", "friends", "archive", "tags"]) {
println " "+lang_viewname($v)+"";
}
var string website;
if($.journal.website_url != "") {
$website = """ $.journal.website_name""";
}
"""
$website
""";
}
Then change the order by switching them around. Also, deleting one to removes it completely (i.e., the link to the calendar/archive page won't display if you delete "archive").
• Sidebar: •
Q: How do I move the sidebar to the right?
By default, Opal's sidebar is to the left. Moving it to the right, isn't as simple as adding a float: right; to your stylesheet. You need to move the entire column that contains the sidebar in the table defined in Print::print.
This is the code for the column containing the sidebar (from the raw source code not from a template):
""";
$this->lay_print_sidebar();
"""
You need to move the entire bit of code above to after the other column, which contains the subnavigation and entries:
""";
$this->lay_print_subnav();
$this->print_body();
$this->lay_print_subnav();
"""
Example of Page::Print with sidebar on right
Q: How do I remove the sidebar? *
You can do this 3 ways:
1. * In your stylesheet:
.sidetd {display: none;}
2. In Page::print, delete the code from above.
3. Delete (or put a # in front of):
$this->lay_print_sidebar();
in Page::print.
Q: How do I add a random userpic in my sidebar?
Use this code by sssexygirl in s2layers.
Q: How do I add randomized text in my sidebar?
The concept is the same for the random userpic. This will display a new bit of text in your sidebar every time you refresh the page. If you're using kunzite1's version of halffling's code, put this code in Page::lay_print_sidebar where you want it:
var string[] text;
$text[0]="random1";
$text[1]="random2";
$text[2]="random3";
$text[3]="random4";
$text[4]="random5";
var int randtext;
$randtext = rand(0, ((size $text) - 1));
$header = "headertext";
$content = "" +
box_item("$text[$randtext]");
print_box($header, $content);
Add as many $text[#]="";'s as you want. Also, to add HTML, just put it in triple quotes instead. Ex:
$text[0]="""randomHTML""";
For other code versions, add:
var string header = "";
var string content = "";
Above var string[] text;.
If you are using carriep63's Opal Unfolded template, use the following code instead:
var string[] quotes;
$quotes[0]="random1";
$quotes[1]="random2";
$quotes[2]="random3";
$quotes[3]="random4";
$quotes[4]="random5";
var int randquote;
$randquote = rand(0, ((size $quotes) - 1));
$header = "headertext";
$text = "" +
box_item($quotes[$randquote]);
print_box($header, $text);
Q: How do I add a tag cloud to my sidebar?
I grabbed this code from s2flexisquares and modified it for Opal. Put the following code in Page::lay_print_sidebar (note: don't put it inside a box or it won't display, the code automatically puts it in a new box):
$header = "Tags";
#### TAG CLOUD CODE ####
###### Configuration ######
var int tag_category = 4; # The number can be changed if you want more or fewer 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 string tag_title = "Tag cloud"; # Title of the tag box.
###### End Configuration ######
var Page p = get_page();
var string list = "";
var int max_use_count = 0 ;
var int min_use_count ;
var int x ;
if (size $p->visible_tag_list() > 0)
{
# Define a maximum and minimum number of uses of the tags:
var TagDetail[] visible_tag_list = $p->visible_tag_list();
if($visible_tag_list)
{
$min_use_count = $visible_tag_list[0].use_count;
foreach var TagDetail td ($p->visible_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 ($p->visible_tag_list())
{
# Create different categories according to the number of uses of the tag
$x = (($td.use_count - $min_use_count) * $tag_category / ($max_use_count - $min_use_count));
if ($x == $tag_category) { $x = $tag_category - 1; }
# Convert those categories into sizes
$x = ($x * $increment) + $basefontsize;
$list = $list + """ $td.name """;
}
# Enclose the entire list in an li tag as required by the layout.
$list = """
""" + $list + """""";
print_box($header, $list);
}
Q: How do I make the mini calendar in my sidebar start on Monday instead of Sunday?"
Add the following code to your theme layer ( originally posted to s2flexisquares by cyrnelle but modified for Opal by julzroguenine):
# ----------------------------------------------------------
# Sidebar Calendar Week Starts on Monday Instead of Sunday
# ----------------------------------------------------------
function Page::lay_print_calendar () {
var string text;
var Page p = get_page();
var YearMonth m = $p->get_latest_month();
var string mon = $m->month_format();
if($m.has_entries) {
$text = """""";
var YearWeek[] theWeeks = $m.weeks;
var YearMonth NewMonth;
var int NewWeek = 0;
var int NewDay;
var int NewStartDay;
var int count = 0;
foreach var YearWeek w ($m.weeks)
{
if ($w.pre_empty == 0)
{
$NewStartDay = 6;
}
else
{
$NewStartDay = $w.pre_empty - 1;
}
foreach var YearDay d ($w.days)
{
if ($d.day > 0)
{
$NewMonth.weeks[$NewWeek].days[$count] = $d;
}
$NewStartDay++;
$count++;
if ($NewStartDay >= 7)
{
if ($NewWeek == 0)
{
$NewMonth.weeks[$NewWeek].pre_empty = 7 - $count;
}
else
{
$NewMonth.weeks[$NewWeek].post_empty = 7 - $count;
}
$NewStartDay = 0;
$count = 0;
$NewWeek++;
}
}
}
if ($count >0)
{
$NewMonth.weeks[$NewWeek].post_empty = 7 - $count;
}
foreach var YearWeek w ($NewMonth.weeks) {
$text = $text + "";
var YearDay[] theDays = $w.days;
var int pre = $w.pre_empty;
if($pre > 0) {
$text = $text + """ """;
}
foreach var YearDay d ($theDays) {
if ($d.num_entries) {
$text = $text + """ $d.day""";
} else {
$text = $text + """$d.day""";
}
}
$text = $text + "\n";
}
$text = $text + "";
}
$mon = """$mon""";
if ($text != "") {
print_box($mon, $text);
}
}
• Entries: •
Q: How do I remove the userpic from my entries? *
.userpic2 {
display: none;
}
Q: How do I add a Sticky Entry to the top of my Recent Page?
I modified this code by darklyscarlett in s2flexisquares. It was originally made for Flexible Squares, but compiles fine in Opal, although the div classes are for Flexible Squares. Modifying it for Opal (specifically kunzite1's version of halffling's code) gives you something like the following:
function RecentPage::print_body
{
if (size $.entries == 0 )
{
"""
$*text_noentries_recent
""";
}
else
{
if( $.nav.skip == 0 and $.view != "friends")
{
var string userpic = """ yourusername" target="_blank">
userpic URL" height="userpic height" width="userpic width" border="0px" alt="yourusername [userpic]" title="yourusername [userpic]" />""";
var string upic_container = """
$userpic""";
var string subject = "subjecttitle";
var string security = """
URL of Security icon"gt;""";
var string date = "date";
var string time = "time";
var string tags = """ Tag URL">tagname""";
var string location = "your location";
var string mood = """
URL of Mood icon" alt="mood" title="mood" align="middle" /> your mood""";
var string music = "music";
var string sep = "entrylink seperator";
print """
$upic_container
$subject
$security posted on: $date @ $time
Tags: $tags
entrycontentHTMLhere
Location: $location
Mood: $mood
Music: $music
Backdated Entry Permalink URL"> $sep URLOfBackdatedEntry.html?mode=reply">Comment
back to top
""";
}
foreach var Entry e ($.entries)
{
$this->print_entry($e);
}
}
}
Change everything in red and it should create a pseudo entry at the top of your recent entries page.
Q: How do I separate my entries (a la Generator)?
Tutorial: Separating Entries in Opal by julzroguenine
Q: How do I add an image divider between my entries?
In Page::print_entry, add HTML after the 'back to top' link but before the """;
Q: How do I move my mood icon to the left of my metadata?
Mood icon to the left of the metadata by kunzite1 in s2layers.
Q: How do I change the mood, location, music, and tags text to images?
The easiest way to do this is to use kunzite1s Mood icon to the left of the metadata and replace the text with image urls:
function Entry::print_metadata() {
var string tags_header = """TAG IMAGE URL"""; # text for tags header, "Current Tags"
var string tags_joiner = """"""; # text for tags joiner, ":"
var string tags_sep = ", "; # text for tags separator, ", "
var bool show_edit_tags_link = false; # set to true if you want edit tags link as tags header
var string currents_open = """
"""; # html for opening of currents container
var string currents_close = """"""; # html for closing of currents container
var bool loc_after_mood = false; # set to true to print location after mood
var bool vanilla_loc = true; # set to true to delinkify location
# if you need data specific to the meta to be in these strings you'll have to set those individually down further
# one example is provided with meta_label_open
var string meta_label_open = """"""; # html for opening of metadata label
var string meta_label_close = """"""; # html for closing of metadata label
var string meta_val_open = """"""; # html for opening of metadata value
var string meta_val_close = """
"""; # html for closing of metadata value
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))){
if($.metadata{"mood"} == "" and $loc_after_mood) {
# if we're printing loc after mood but we have no mood, set loc_after_mood to false
$loc_after_mood = false;
}
var string currents = ""; # make var for printing
$currents = $currents_open; # add opening of currents container
if(defined $.mood_icon) {
var Image i = $.mood_icon;
$currents = $currents + """
""";
}
foreach var string k ($.metadata){ # step thru metadata
var string text = $k; # set text to key
var string val = $.metadata{$k}; # get val
if ($k == "mood"){ # if mood, set text to mood property
$text = """MOOD IMAGE URL""";
}
elseif ($k == "music") { # if music, set text to music property
$text = """MUSIC IMAGE URL""";
} elseif ($k == "location") { # if location, set text to loc variable
$text = """LOCATION IMAGE URL""";
if($vanilla_loc) { # if vanilla loc, striphtml() it
$val = striphtml($val);
}
}
if(not ($k == "location" and $loc_after_mood)) {
# if we're doing loc right now and printing loc after mood, skip it
# if we're doing loc right now and we're not printing loc after mood, print it now
# if we're not doing loc right now, print this piece of meta
# add the meta
$currents = $currents + """$meta_label_open$text$meta_label_close$meta_val_open$val$meta_val_close""";
}
if($k == "mood" and $loc_after_mood) {
# if we just now did the mood and we're printing loc after mood, print the loc
$k = "location"; # set meta key to "location"
$text = $*text_meta_location; # set text to loc variable
$val = $.metadata{$k}; # get val
# if we have a loc, do stuff
if($val != "") {
# if vanilla loc, striphtml() it
if($vanilla_loc) {
$val = striphtml($val);
}
# in this layout, each piece of meta gets its own class
$meta_label_open = """
""";
# add the meta
$currents = $currents + """$meta_label_open$text$meta_label_close$meta_val_open$val$meta_val_close""";
}
}
}
if ((size $.tags > 0) and $*tags_aware) {
var string k = "tags"; # set key to "tags"
var int tcount = 0; # set counter for tags
if($edit_tags.url != "" and $show_edit_tags_link) { # if remote user can edit tags, let's give them a link
$tags_header = """ $tags_header""";
}
# add text, open val container
$currents = $currents + """$meta_label_open$tags_header$tags_joiner$meta_label_close$meta_val_open""";
# build tag list
foreach var Tag t ($.tags) {
$currents = $currents + """ $t.name""";
$tcount++;
# if we haven't hit the last tag, add a separator
if ($tcount != size $.tags) { $currents = $currents + $tags_sep; }
}
# close val container
$currents = $currents + $meta_val_close;
}
if(defined $.mood_icon) {
$currents = $currents + """""";
}
# close currents container
$currents = $currents + $currents_close;
# print currents
println "$currents";
}
}
Q: How do I add the Permalink to the linkbar at the bottom of each entry?
In Page::print_entry, find
$e->print_linkbar();
""";
and put
$*text_permalink
after it.
Q: How do I change the Tracking Icon to text? **
Changing the Tracking Icon to Text by kunzite1 in opal_help
Q: How do I completely remove a link from the entry and/or comment linkbar?
My Tutorial in graphicsbyjulz
Q: How do I change the Security Icons in my posts(both images and/or text)? *
There are 2 ways, one works for all users, the other is for Paid/Perm users only.
Note: Only Paid/Perm users can change the images to text.
(1) All users can follow this tutorial found in everything_lj.
(2) Paid/Perm Users, can also use this:
Under Page::print_entry, replace the following section of code:
if ($e.security != "") {
$security = """
""";
}
or for kunzite1's version of halffling's code, it looks like this:
if ($e.security != "")
$security = $e.security_icon->as_string();
}
with this from kunzite1 in s2styles:
if($e.security == "") {
$security = """
Your Public Image URL" alt="[public post]" title="[public post]" style="vertical-align: bottom;" />""";
}
if($e.security == "protected") {
$security = """
Your Protected Image URL" alt="$*text_icon_alt_protected" title="$*text_icon_alt_protected" style="vertical-align: bottom;" />""";
}
if($e.security == "private") {
$security = """
Your Private Image URL" alt="$*text_icon_alt_private" title="$*text_icon_alt_private" style="vertical-align: bottom;" />""";
}
For text-only (no images), just replace the URLs in the above code with your text.
Q: How do I change the userinfo/community/syndicated icons? *
See below.
Q: How do I stop Voice Posts from messing up my layout?
Print Trusted Entry Content in s2howto
Q: How do I automatically Cut Quizzes/MEMES?
Originally posted as #3 by kunzite1 in opal_help.
In Page::print_entry, replace
$e->print_text();
with:
var string could_be_meme_message = "This entry has been automatically cut. Click to view."; # link text for link
var string[] memedomains = [ # list of domains
"quizdiva.com",
"quizilla.com",
"similarminds.com",
"4degreez.com",
"theferrett.com",
"bzoink.com",
"stvlive.com",
"deskslave.org",
"monkeyquiz.com",
"steve.org.uk",
"gotoquiz.com"
];
# assume that entry is ok
var bool could_be_meme = false;
if(($.view != "entry") and ($.view != "reply")) {
# loop thru domains seeing if the entry text contains one of them
foreach var string memedomain ($memedomains) {
if (($e.text->contains($memedomain)) and (not $could_be_meme)) {
# if it does contain one of the target domains take note of it
$could_be_meme = true;
}
}
# if it's got the poll image, take note of it
if(
$e.text->contains("$*IMGDIR/poll/")
) {
$could_be_meme = true;
}
}
# if no target domains found, print entry text
if(not $could_be_meme) {
$e->print_text();
} else {
# oops, it had a target domain, print permalink link
"""( $could_be_meme_message )""";
}
Note: you can add as many domain names to the list as you see fit.
• Calendar/Archive Page: •
Q: How do I make it so the date doesn't shift if there's no entry?
Originally posted as #2 by kunzite1 in opal_help.
Put this in your theme layer:
function YearWeek::print() {
"""
""";
if ($.pre_empty > 0) {
"""
""";
}
foreach var YearDay d ($.days) {
var string day = zeropad($d.day, 2);
"""
$day
""";
var string num = $d.num_entries < 10 ? " " + string($d.num_entries) : string($d.num_entries);
if($d.num_entries == 0) {
$num = " ";
}
"""
$num
""";
"""
""";
}
"""
""";
}
Q: How do I change the security icons on the MonthDay page (images and/or text)? *
There are 2 ways, one works for all users, the other is for Paid/Perm users only.
Note: Only Paid/Perm users can change the images to text.
(1) All Users:
.entrytext img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0; /* change to the size of your image */
background: url("http://YOURIMAGELINK.com");
}
.entrytext img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0; /* change to the size of your image */
background: url("http://YOURIMAGELINK.com");
}
(2) Paid/Perm Users can also use this:
Originally posted as #1 by kunzite1 in opal_help but I modified it a bit to include public, protected, and private icons.
function MonthDay::print_subjectlist() {
# Too many tables...
var string time = "";
var string poster = "";
var string icon = "";
var string subject = "";
var string comments = "";
foreach var Entry e ($.entries) {
$time = $e.time->time_format("short");
$poster = "";
if (not($e.poster->equals($e.journal))) {
$poster = $e.poster + " ";
}
$icon = "";
if($e.security == "") {
$icon = """
Your Public Image URL" alt="[public post]" title="[public post]" style="vertical-align: text-middle; margin-right: 2px;" />""";
}
if($e.security == "protected") {
$icon = """
Your Protected Image URL" alt="$*text_icon_alt_protected" title="$*text_icon_alt_protected" style="vertical-align: text-middle; margin-right: 2px;" />""";
}
if($e.security == "private") {
$icon = """
Your Public Image URL" title="$*text_icon_alt_private" style="vertical-align: text-middle; margin-right: 2px;" />""";
}
$subject = $e.subject != "" ? striphtml($e.subject) : """$*text_nosubject""";
$subject = """ $subject""";
$comments = "";
# divider between the link and the number of comments
var string dash = "- ";
if ($e.comments.count > 0) {
$comments = $dash + get_plural_phrase($e.comments.count, "text_read_comments");
}
if ($e.comments.screened) {
$comments = $comments + " $*text_month_screened_comments";
}
print "$time: $poster$icon$subject $comments
\n";
}
}
For text-only (no images), just replace the URLs in the above code with your text.
• Tags Page: •
Q: How do I get a Tags Cloud on my Tags Page?
forresto's code for the Tags Cloud works in Opal. Copy from '### forresto's tag cloud' down.
• Body: •
Q: I'm a Basic/Plus user, how do I add a header image? *
Add this to your stylesheet:
body {
background-image: url(url of your image);
background-repeat: no-repeat;
background-position: top;
background-attachment: scroll;
margin-top: heightofimagepx;
}
Q: How do I add shadows like in Quite Lickable?
A couple people asked me how I did this for a previous layout. I simply added 2 extra columns to the main table in Print::print. Example code below:
""";
# $this->lay_print_username();
$this->lay_print_header();
"""
""";
# $this->lay_print_userpic();
$this->lay_print_sidebar();
"""
""";
$this->print_body();
$this->lay_print_subnav();
"""
Then add .shadowleft and .shadowright to your stylesheet (include background image urls, repeat y, and width (or max-width so IE recognizes it) for each.
• General S2: •
Q: How do I change the info icons? *
(1) Changing Userinfo, Community, Syndicated, etc. Images by ephi *
(2) Or Paid/Perm users can use this:
Change info icons via CSS by kunzite1 in s2layers
Notes:
All apply to Paid/Perm accounts.
Things that will work for Basic/Plus accounts are denoted with *'s.
Changes that apply to kunzite1's version of halffling's template are denoted with **'s.
• Edits: •
[01/2008]
• I added a tutorial for changing security images to text in both the Entires and Archive.
[09/2007]
• I added a tutorial for changing the mood, location, music, and tags text to images.
[07/2007]
• I added a Sidebar Tags Cloud code.
• I added a fix for the Random Text in Sidebar code for carriep63's Opal Unfolded template.
[06/2007]
• I added links to my Opal Stylesheet Explained tutorial, how to edit links in the entry and comment linkbars, and how to make your sidebar calendar start on Monday instead of Sunday.
• Opal Colors Explained by onetimeoffer is now locked, so I removed it from the Helpful Hints section.
Frequently Asked Questions
• Helpful Hints: •
Check out component_help's Getting Started Guide for helpful information on S2.
Check out my Opal Sytlesheet Guide: Part 1 | Part 2 in graphicsbyjulz
Q: How do I make my layer viewable to all and post a link to it?
When asking a question about your specific layout, it is very helpful to provide a link to the layer in question so the people helping you can see your actual code. Follow this tutorial originally posted in component_help.
Q: Why do I get compiling errors when using HTML?
This comment in component_help explains common compiling errors due to quotes and HTML syntax.
Adding HTML to parts to your layer is easy, just put it between triple quotes like this """HTML"""; otherwise it will give you an error when compiling.
• Navigation: •
Q: How do I remove the Navigation Links? *
#nav {
display: none;
}
Q: How do I change the order and/or delete some of the links in my Navbar?
Navigation links are defined in Page::lay_print_header.
kunzite1's version of and halffling's code:
Replace this:
var string[] views_order = $.views_order;
With this:
var string[] views_order = ["userinfo", "recent", "friends", "archive", "tags"];
pamelajoy's code:
Replace this:
foreach var string v ($.views_order) {
With this:
foreach var string v ("userinfo", "recent", "friends", "archive", "tags"]) {
No template, ignited's code, grrliz's code, and carriep63's code:
Add this to your layer:
function Page::lay_print_header () {
var string title = $this->title();
print safe """
$title
""";
foreach var string v ("userinfo", "recent", "friends", "archive", "tags"]) {
println " "+lang_viewname($v)+"";
}
var string website;
if($.journal.website_url != "") {
$website = """ $.journal.website_name""";
}
"""
$website
""";
}
Then change the order by switching them around. Also, deleting one to removes it completely (i.e., the link to the calendar/archive page won't display if you delete "archive").
• Sidebar: •
Q: How do I move the sidebar to the right?
By default, Opal's sidebar is to the left. Moving it to the right, isn't as simple as adding a float: right; to your stylesheet. You need to move the entire column that contains the sidebar in the table defined in Print::print.
This is the code for the column containing the sidebar (from the raw source code not from a template):
""";
$this->lay_print_sidebar();
"""
You need to move the entire bit of code above to after the other column, which contains the subnavigation and entries:
""";
$this->lay_print_subnav();
$this->print_body();
$this->lay_print_subnav();
"""
Example of Page::Print with sidebar on right
Q: How do I remove the sidebar? *
You can do this 3 ways:
1. * In your stylesheet:
.sidetd {display: none;}
2. In Page::print, delete the code from above.
3. Delete (or put a # in front of):
$this->lay_print_sidebar();
in Page::print.
Q: How do I add a random userpic in my sidebar?
Use this code by sssexygirl in s2layers.
Q: How do I add randomized text in my sidebar?
The concept is the same for the random userpic. This will display a new bit of text in your sidebar every time you refresh the page. If you're using kunzite1's version of halffling's code, put this code in Page::lay_print_sidebar where you want it:
var string[] text;
$text[0]="random1";
$text[1]="random2";
$text[2]="random3";
$text[3]="random4";
$text[4]="random5";
var int randtext;
$randtext = rand(0, ((size $text) - 1));
$header = "headertext";
$content = "" +
box_item("$text[$randtext]");
print_box($header, $content);
Add as many $text[#]="";'s as you want. Also, to add HTML, just put it in triple quotes instead. Ex:
$text[0]="""randomHTML""";
For other code versions, add:
var string header = "";
var string content = "";
Above var string[] text;.
If you are using carriep63's Opal Unfolded template, use the following code instead:
var string[] quotes;
$quotes[0]="random1";
$quotes[1]="random2";
$quotes[2]="random3";
$quotes[3]="random4";
$quotes[4]="random5";
var int randquote;
$randquote = rand(0, ((size $quotes) - 1));
$header = "headertext";
$text = "" +
box_item($quotes[$randquote]);
print_box($header, $text);
Q: How do I add a tag cloud to my sidebar?
I grabbed this code from s2flexisquares and modified it for Opal. Put the following code in Page::lay_print_sidebar (note: don't put it inside a box or it won't display, the code automatically puts it in a new box):
$header = "Tags";
#### TAG CLOUD CODE ####
###### Configuration ######
var int tag_category = 4; # The number can be changed if you want more or fewer 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 string tag_title = "Tag cloud"; # Title of the tag box.
###### End Configuration ######
var Page p = get_page();
var string list = "";
var int max_use_count = 0 ;
var int min_use_count ;
var int x ;
if (size $p->visible_tag_list() > 0)
{
# Define a maximum and minimum number of uses of the tags:
var TagDetail[] visible_tag_list = $p->visible_tag_list();
if($visible_tag_list)
{
$min_use_count = $visible_tag_list[0].use_count;
foreach var TagDetail td ($p->visible_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 ($p->visible_tag_list())
{
# Create different categories according to the number of uses of the tag
$x = (($td.use_count - $min_use_count) * $tag_category / ($max_use_count - $min_use_count));
if ($x == $tag_category) { $x = $tag_category - 1; }
# Convert those categories into sizes
$x = ($x * $increment) + $basefontsize;
$list = $list + """ $td.name """;
}
# Enclose the entire list in an li tag as required by the layout.
$list = """
""" + $list + """""";
print_box($header, $list);
}
Q: How do I make the mini calendar in my sidebar start on Monday instead of Sunday?"
Add the following code to your theme layer ( originally posted to s2flexisquares by cyrnelle but modified for Opal by julzroguenine):
# ----------------------------------------------------------
# Sidebar Calendar Week Starts on Monday Instead of Sunday
# ----------------------------------------------------------
function Page::lay_print_calendar () {
var string text;
var Page p = get_page();
var YearMonth m = $p->get_latest_month();
var string mon = $m->month_format();
if($m.has_entries) {
$text = """""";
var YearWeek[] theWeeks = $m.weeks;
var YearMonth NewMonth;
var int NewWeek = 0;
var int NewDay;
var int NewStartDay;
var int count = 0;
foreach var YearWeek w ($m.weeks)
{
if ($w.pre_empty == 0)
{
$NewStartDay = 6;
}
else
{
$NewStartDay = $w.pre_empty - 1;
}
foreach var YearDay d ($w.days)
{
if ($d.day > 0)
{
$NewMonth.weeks[$NewWeek].days[$count] = $d;
}
$NewStartDay++;
$count++;
if ($NewStartDay >= 7)
{
if ($NewWeek == 0)
{
$NewMonth.weeks[$NewWeek].pre_empty = 7 - $count;
}
else
{
$NewMonth.weeks[$NewWeek].post_empty = 7 - $count;
}
$NewStartDay = 0;
$count = 0;
$NewWeek++;
}
}
}
if ($count >0)
{
$NewMonth.weeks[$NewWeek].post_empty = 7 - $count;
}
foreach var YearWeek w ($NewMonth.weeks) {
$text = $text + "";
var YearDay[] theDays = $w.days;
var int pre = $w.pre_empty;
if($pre > 0) {
$text = $text + """ """;
}
foreach var YearDay d ($theDays) {
if ($d.num_entries) {
$text = $text + """ $d.day""";
} else {
$text = $text + """$d.day""";
}
}
$text = $text + "\n";
}
$text = $text + "";
}
$mon = """$mon""";
if ($text != "") {
print_box($mon, $text);
}
}
• Entries: •
Q: How do I remove the userpic from my entries? *
.userpic2 {
display: none;
}
Q: How do I add a Sticky Entry to the top of my Recent Page?
I modified this code by darklyscarlett in s2flexisquares. It was originally made for Flexible Squares, but compiles fine in Opal, although the div classes are for Flexible Squares. Modifying it for Opal (specifically kunzite1's version of halffling's code) gives you something like the following:
function RecentPage::print_body
{
if (size $.entries == 0 )
{
"""
$*text_noentries_recent
""";
}
else
{
if( $.nav.skip == 0 and $.view != "friends")
{
var string userpic = """ yourusername" target="_blank">
userpic URL" height="userpic height" width="userpic width" border="0px" alt="yourusername [userpic]" title="yourusername [userpic]" />""";
var string upic_container = """
$userpic""";
var string subject = "subjecttitle";
var string security = """
URL of Security icon"gt;""";
var string date = "date";
var string time = "time";
var string tags = """ Tag URL">tagname""";
var string location = "your location";
var string mood = """
URL of Mood icon" alt="mood" title="mood" align="middle" /> your mood""";
var string music = "music";
var string sep = "entrylink seperator";
print """
$upic_container
$subject
$security posted on: $date @ $time
Tags: $tags
entrycontentHTMLhere
Location: $location
Mood: $mood
Music: $music
Backdated Entry Permalink URL">
back to top
""";
}
foreach var Entry e ($.entries)
{
$this->print_entry($e);
}
}
}
Change everything in red and it should create a pseudo entry at the top of your recent entries page.
Q: How do I separate my entries (a la Generator)?
Tutorial: Separating Entries in Opal by julzroguenine
Q: How do I add an image divider between my entries?
In Page::print_entry, add HTML after the 'back to top' link but before the """;
Q: How do I move my mood icon to the left of my metadata?
Mood icon to the left of the metadata by kunzite1 in s2layers.
Q: How do I change the mood, location, music, and tags text to images?
The easiest way to do this is to use kunzite1s Mood icon to the left of the metadata and replace the text with image urls:
function Entry::print_metadata() {
var string tags_header = """TAG IMAGE URL"""; # text for tags header, "Current Tags"
var string tags_joiner = """"""; # text for tags joiner, ":"
var string tags_sep = ", "; # text for tags separator, ", "
var bool show_edit_tags_link = false; # set to true if you want edit tags link as tags header
var string currents_open = """
"""; # html for opening of currents container
var string currents_close = """"""; # html for closing of currents container
var bool loc_after_mood = false; # set to true to print location after mood
var bool vanilla_loc = true; # set to true to delinkify location
# if you need data specific to the meta to be in these strings you'll have to set those individually down further
# one example is provided with meta_label_open
var string meta_label_open = """"""; # html for opening of metadata label
var string meta_label_close = """"""; # html for closing of metadata label
var string meta_val_open = """"""; # html for opening of metadata value
var string meta_val_close = """
"""; # html for closing of metadata value
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))){
if($.metadata{"mood"} == "" and $loc_after_mood) {
# if we're printing loc after mood but we have no mood, set loc_after_mood to false
$loc_after_mood = false;
}
var string currents = ""; # make var for printing
$currents = $currents_open; # add opening of currents container
if(defined $.mood_icon) {
var Image i = $.mood_icon;
$currents = $currents + """
""";
}
foreach var string k ($.metadata){ # step thru metadata
var string text = $k; # set text to key
var string val = $.metadata{$k}; # get val
if ($k == "mood"){ # if mood, set text to mood property
$text = """MOOD IMAGE URL""";
}
elseif ($k == "music") { # if music, set text to music property
$text = """MUSIC IMAGE URL""";
} elseif ($k == "location") { # if location, set text to loc variable
$text = """LOCATION IMAGE URL""";
if($vanilla_loc) { # if vanilla loc, striphtml() it
$val = striphtml($val);
}
}
if(not ($k == "location" and $loc_after_mood)) {
# if we're doing loc right now and printing loc after mood, skip it
# if we're doing loc right now and we're not printing loc after mood, print it now
# if we're not doing loc right now, print this piece of meta
# add the meta
$currents = $currents + """$meta_label_open$text$meta_label_close$meta_val_open$val$meta_val_close""";
}
if($k == "mood" and $loc_after_mood) {
# if we just now did the mood and we're printing loc after mood, print the loc
$k = "location"; # set meta key to "location"
$text = $*text_meta_location; # set text to loc variable
$val = $.metadata{$k}; # get val
# if we have a loc, do stuff
if($val != "") {
# if vanilla loc, striphtml() it
if($vanilla_loc) {
$val = striphtml($val);
}
# in this layout, each piece of meta gets its own class
$meta_label_open = """
""";
# add the meta
$currents = $currents + """$meta_label_open$text$meta_label_close$meta_val_open$val$meta_val_close""";
}
}
}
if ((size $.tags > 0) and $*tags_aware) {
var string k = "tags"; # set key to "tags"
var int tcount = 0; # set counter for tags
if($edit_tags.url != "" and $show_edit_tags_link) { # if remote user can edit tags, let's give them a link
$tags_header = """ $tags_header""";
}
# add text, open val container
$currents = $currents + """$meta_label_open$tags_header$tags_joiner$meta_label_close$meta_val_open""";
# build tag list
foreach var Tag t ($.tags) {
$currents = $currents + """ $t.name""";
$tcount++;
# if we haven't hit the last tag, add a separator
if ($tcount != size $.tags) { $currents = $currents + $tags_sep; }
}
# close val container
$currents = $currents + $meta_val_close;
}
if(defined $.mood_icon) {
$currents = $currents + """""";
}
# close currents container
$currents = $currents + $currents_close;
# print currents
println "$currents";
}
}
Q: How do I add the Permalink to the linkbar at the bottom of each entry?
In Page::print_entry, find
$e->print_linkbar();
""";
and put
$*text_permalink
after it.
Q: How do I change the Tracking Icon to text? **
Changing the Tracking Icon to Text by kunzite1 in opal_help
Q: How do I completely remove a link from the entry and/or comment linkbar?
My Tutorial in graphicsbyjulz
Q: How do I change the Security Icons in my posts(both images and/or text)? *
There are 2 ways, one works for all users, the other is for Paid/Perm users only.
Note: Only Paid/Perm users can change the images to text.
(1) All users can follow this tutorial found in everything_lj.
(2) Paid/Perm Users, can also use this:
Under Page::print_entry, replace the following section of code:
if ($e.security != "") {
$security = """
""";
}
or for kunzite1's version of halffling's code, it looks like this:
if ($e.security != "")
$security = $e.security_icon->as_string();
}
with this from kunzite1 in s2styles:
if($e.security == "") {
$security = """
Your Public Image URL" alt="[public post]" title="[public post]" style="vertical-align: bottom;" />""";
}
if($e.security == "protected") {
$security = """
Your Protected Image URL" alt="$*text_icon_alt_protected" title="$*text_icon_alt_protected" style="vertical-align: bottom;" />""";
}
if($e.security == "private") {
$security = """
Your Private Image URL" alt="$*text_icon_alt_private" title="$*text_icon_alt_private" style="vertical-align: bottom;" />""";
}
For text-only (no images), just replace the URLs in the above code with your text.
Q: How do I change the userinfo/community/syndicated icons? *
See below.
Q: How do I stop Voice Posts from messing up my layout?
Print Trusted Entry Content in s2howto
Q: How do I automatically Cut Quizzes/MEMES?
Originally posted as #3 by kunzite1 in opal_help.
In Page::print_entry, replace
$e->print_text();
with:
var string could_be_meme_message = "This entry has been automatically cut. Click to view."; # link text for link
var string[] memedomains = [ # list of domains
"quizdiva.com",
"quizilla.com",
"similarminds.com",
"4degreez.com",
"theferrett.com",
"bzoink.com",
"stvlive.com",
"deskslave.org",
"monkeyquiz.com",
"steve.org.uk",
"gotoquiz.com"
];
# assume that entry is ok
var bool could_be_meme = false;
if(($.view != "entry") and ($.view != "reply")) {
# loop thru domains seeing if the entry text contains one of them
foreach var string memedomain ($memedomains) {
if (($e.text->contains($memedomain)) and (not $could_be_meme)) {
# if it does contain one of the target domains take note of it
$could_be_meme = true;
}
}
# if it's got the poll image, take note of it
if(
$e.text->contains("$*IMGDIR/poll/")
) {
$could_be_meme = true;
}
}
# if no target domains found, print entry text
if(not $could_be_meme) {
$e->print_text();
} else {
# oops, it had a target domain, print permalink link
"""( $could_be_meme_message )""";
}
Note: you can add as many domain names to the list as you see fit.
• Calendar/Archive Page: •
Q: How do I make it so the date doesn't shift if there's no entry?
Originally posted as #2 by kunzite1 in opal_help.
Put this in your theme layer:
function YearWeek::print() {
"""
""";
if ($.pre_empty > 0) {
"""
""";
}
foreach var YearDay d ($.days) {
var string day = zeropad($d.day, 2);
"""
$day
""";
var string num = $d.num_entries < 10 ? " " + string($d.num_entries) : string($d.num_entries);
if($d.num_entries == 0) {
$num = " ";
}
"""
$num
""";
"""
""";
}
"""
""";
}
Q: How do I change the security icons on the MonthDay page (images and/or text)? *
There are 2 ways, one works for all users, the other is for Paid/Perm users only.
Note: Only Paid/Perm users can change the images to text.
(1) All Users:
.entrytext img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0; /* change to the size of your image */
background: url("http://YOURIMAGELINK.com");
}
.entrytext img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0; /* change to the size of your image */
background: url("http://YOURIMAGELINK.com");
}
(2) Paid/Perm Users can also use this:
Originally posted as #1 by kunzite1 in opal_help but I modified it a bit to include public, protected, and private icons.
function MonthDay::print_subjectlist() {
# Too many tables...
var string time = "";
var string poster = "";
var string icon = "";
var string subject = "";
var string comments = "";
foreach var Entry e ($.entries) {
$time = $e.time->time_format("short");
$poster = "";
if (not($e.poster->equals($e.journal))) {
$poster = $e.poster + " ";
}
$icon = "";
if($e.security == "") {
$icon = """
Your Public Image URL" alt="[public post]" title="[public post]" style="vertical-align: text-middle; margin-right: 2px;" />""";
}
if($e.security == "protected") {
$icon = """
Your Protected Image URL" alt="$*text_icon_alt_protected" title="$*text_icon_alt_protected" style="vertical-align: text-middle; margin-right: 2px;" />""";
}
if($e.security == "private") {
$icon = """
Your Public Image URL" title="$*text_icon_alt_private" style="vertical-align: text-middle; margin-right: 2px;" />""";
}
$subject = $e.subject != "" ? striphtml($e.subject) : """$*text_nosubject""";
$subject = """ $subject""";
$comments = "";
# divider between the link and the number of comments
var string dash = "- ";
if ($e.comments.count > 0) {
$comments = $dash + get_plural_phrase($e.comments.count, "text_read_comments");
}
if ($e.comments.screened) {
$comments = $comments + " $*text_month_screened_comments";
}
print "$time: $poster$icon$subject $comments
\n";
}
}
For text-only (no images), just replace the URLs in the above code with your text.
• Tags Page: •
Q: How do I get a Tags Cloud on my Tags Page?
forresto's code for the Tags Cloud works in Opal. Copy from '### forresto's tag cloud' down.
• Body: •
Q: I'm a Basic/Plus user, how do I add a header image? *
Add this to your stylesheet:
body {
background-image: url(url of your image);
background-repeat: no-repeat;
background-position: top;
background-attachment: scroll;
margin-top: heightofimagepx;
}
Q: How do I add shadows like in Quite Lickable?
A couple people asked me how I did this for a previous layout. I simply added 2 extra columns to the main table in Print::print. Example code below:
""";
# $this->lay_print_username();
$this->lay_print_header();
"""
""";
# $this->lay_print_userpic();
$this->lay_print_sidebar();
"""
""";
$this->print_body();
$this->lay_print_subnav();
"""
Then add .shadowleft and .shadowright to your stylesheet (include background image urls, repeat y, and width (or max-width so IE recognizes it) for each.
• General S2: •
(1) Changing Userinfo, Community, Syndicated, etc. Images by ephi *
(2) Or Paid/Perm users can use this:
Change info icons via CSS by kunzite1 in s2layers