Opal Resources

[julzroguenine]

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.

Comments

[voressima]

Hi :)

Love your current layout! (and I'm not only saying that so you'd help me ;) )

Hope you don't mind if I bug you at your personal LJ, but this particular question relates to a problem you apparently managed to fix in your own lay-out, and you're the one answering all the questions over at opal_help anyway ;)

The thing I'd like to know is, how do you add a header picture above the calender in the sidebar? (and while we're at it: how do you get the calender to be displayed in a sidebar box that looks like all the other sideboxes?) This has been bugging me ever since I switched to Opal over a year ago, but I never bothered to ask anywhere, it was only a small problem. I am asking now however, since you apparently hold the answer to this Great Opal Mystery(tm) Would you mind sharing with young acolytes (a.k.a. n00bs), or is this knowledge reserved for Opal Masters? :)

Ehm, yes, I'll quit the priesthood comparison now, before you go "eek" and refuse to talk to me. Too much coding messes with a girl's mind :)

Btw, thanks for that random quote thingy! That's another thing I'd been wanting for ages, but I never managed to implement the code I found over at component_help. So, thanks! :D

[voressima]

Sweeeeet! That worked like a charm! :D Thank you!

I actually only wanted to know the second part of your answer (guess I didn't explain very well - I really shouldn't try to recode my whole LJ in just one day), the calendar thing. With "header above calendar" I just meant to have the word "calendar" above the calendar (it doesn't say that standard). So I just grabbed that code you offered and pasted the url for the little header image I made saying "calendar" over your red word in the code :)

Cool, my layout is finished! (until I get bored of it again of course :p)

This resources post is so useful I linked to it the layout credits in my sidebar :) Maybe it'll help some other people, you never know, someone might stumble over my LJ and wonder how it was done (I swear, I learned most of my coding skills trying to wrap my head around LJ...)

If you could explain that bit of code to link to the month, that'd be very welcome :) It's not a real necessity (I can always click on "archive" if I need anything), but I'm just curious how it works. It's the only way to learn :)

And because you're so helpful, here's a little thank you: your layout in IE6. I read in the comments above that you wondered how your layout looks in IE6, and since I never updated that piece of sh*t, I took a screencap of your LJ :)

[julzroguenine]

You're very welcome! Glad I could help. =)

Thanks for the link in your sidebar. The more people that stumble on this, the less I have to answer the same questions over and over in opal_help. =P

Linkifying the month isn't too bad. I just looked at how it was done in other styles. Just add
var string url = "$m.url";up where the other var strings are and then change $mon to
$monIt's that easy. =D

Thanks for the pic of my layout in IE6! I guess it doesn't look too bad. Not the greatest because that crappy browser doesn't support transparent .png files but... *shrugs* IE7 is infinitely better than IE6 but it still pales in comparison to Firefox.

[julzroguenine]

Note: I had to delete the comment above because it was royally messing up my new layout. So here it is again; with the code placed safely in a textbox to avoid future problems.

I don't mind answering. Although the calendar thing might take a bit of delving deep into my code to remember exactly what I did. =P

The sidebar next to the header image is relatively easy: I just added my image html to the column that contains the main body of your journal in the ginormous table in Page::print. I put it above this:

""";
$this->print_body();
$this->lay_print_subnav();
"""

It might take some tinkering to get it to look decent with the navbar (I'm not currently using one), which is printed using $this->lay_print_header(); (i.e., if you want your navbar below the header image, move that to just above $this->print_body(); in your code).

As for the calendar displaying like everything else in the sidebar, it's under Page::lay_print_calendar, which isn't overridden in either halffling's nor kunzite1's version of the template. I grabbed it from Opal's source code and modified it so it would print the calendar how I wanted it. Just paste this code into your layer, change the title of the box to whatever you want, and compile:

function Page::lay_print_calendar () {
var YearMonth m = $this->get_latest_month();
var string title = """calendar""";
var string mon = $m->month_format();
var string text;
$text = """

$mon
""";

foreach var YearWeek w ($m.weeks) {
$text = $text + """
""";
if($w.pre_empty > 0) {
foreach var int empty (1..$w.pre_empty) {
$text = $text + """
""";
}
}
foreach var YearDay d ($w.days) {
if($d.num_entries > 0) {
$text = $text + """
""";
} else {
$text = $text + """
""";
}
}
$text = $text + "\n";
}
$text = $text + "

$d.day

$d.day

";
print_box($title, $text);
}

I also added a small bit of code to that in order to make the month name into a link to that specific month page. If you want to know how to add that, I'd be happy to talk you through it. =)