faded dreams and blue jeans -

Previous | Memories | Tell Someone | Next

15 February 2006 @ 10:00 am

Happy Birthday thirdgorchbro and jetpackmonkey!

Hope you both have fantastic days!

And sorry for this - for bellatemple who asked for advice on how to add images with links to the sidebar on the 3Column layout on LJ. This is not my coding, it's tweaked from this tutorial by geisha_doll

So here's one for the pictures on the left hand side of the page under the 'blurb' text:
Create a layout-specific 'theme' in the 'advanced customisation area, name it '3col center' and hit 'Edit'. Copy and paste the below coding into the box (overwriting what's in there already) and change the relevant parts (marked in blue). If you don't want it to open in a new window, just delete the target="_blank" from the link.:

layerinfo "type" = "theme";
layerinfo "name" = "3col center";

function Page::print_custom_head() {
"""
<style media="screen" type="text/css">
body
{text-align:center;
}
#shrink{
position:relative;
margin:0 auto 0 auto; padding:0;
text-align:left;
width:750px; /*Change this width to match the width of your banner*/
background:transparent;
}
</style>
""";
}

function Page::print () {

var string title = $this->title();

"""
<!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>
<title>$title</title>

""";

$this->print_head();

"""
<link rel="stylesheet" href="$.stylesheet_url" type="text/css" />
</head>
<body>
<a name="top"></a>
<div id="shrink">
<div id="header"></div>
<div id="container">

<div id="entries"><div>
""";
$this->lay_print_subnav();
$this->print_body();
$this->lay_print_subnav();
"""

</div></div>

<div class="sidebox">
<h2>$*nav_title</h2><ul class="links">
<li class="links"><a href="$*SITEROOT/userinfo.bml?user=$.journal.username">$*t_view_userinfo</a></li>
<li class="links"><a href="$*SITEROOT/users/$.journal.username">$*t_view_recent</a></li>
<li class="links"><a href="$*SITEROOT/users/$.journal.username/calendar">$*t_view_archive</a></li>
<li class="links"><a href="$*SITEROOT/users/$.journal.username/friends">$*t_view_friends</a></li>
</ul>
</div>

""";
$this->print_linklist();
"""

</div>

<div class="sidebox">
<h2>$*about_title</h2>
<div align="center">
""";
$this->lay_print_userpic();
"""
<br />
<span class='ljuser' style='white-space:nowrap;'><a href='$*SITEROOT/userinfo.bml?user=$.journal.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='$*SITEROOT/users/$.journal.username/'><b>$.journal.username</b></a></span>
<br />
<a href="$*SITEROOT/friends/add.bml?user=$.journal.username"><img src="http://stat.livejournal.com/img/btn_addfriend.gif" alt="Friend Me" title="Friend Me" width="22" height="20" style="border: 0;" /></a>
<a href="$*SITEROOT/todo/?user=$.journal.username"><img src="http://stat.livejournal.com/img/btn_todo.gif" alt="My To-do List" title="My To-do List" width="22" height="20" style="border: 0;" /></a>
<a href="$*SITEROOT/tools/memories.bml?user=$.journal.username"><img src="http://stat.livejournal.com/img/btn_memories.gif" alt="Memories" title="Memories" width="22" height="20" style="border: 0;" /></a>
</div></div>

<div class="sidebox">
<h2>$*blurb_title</h2>
<div class="blurb">
$*blurb_text
<br/>
<a href="http://www.link1.com" target="_blank"><img src="http://www.image1.com"></a><br/>
<a href="http://www.link2.com" target="_blank"><img src="http://www.image2.com"></a><br/>
</div>
</div>

""";
$this->lay_print_calendar();
"""

</div>

</div>
</div>
</body>
</html>
""";
}

And for the other side of the page with the images and links appearing under the userinfo etc section:

layerinfo "type" = "theme";
layerinfo "name" = "3col center";

function Page::print () {

var string title = $this->title();

""";

$this->print_head();

"""
<link rel="stylesheet" href="$.stylesheet_url" type="text/css" />
</head>
<body>
<a name="top"></a>
<div id="shrink">
<div id="header"></div>
<div id="container">

<div id="entries"><div>
""";
$this->lay_print_subnav();
$this->print_body();
$this->lay_print_subnav();
"""

</div></div>

""";
$this->print_linklist();
"""

</div>

<div class="sidebox">
<h2>$*blurb_title</h2>
<div class="blurb">
$*blurb_text
</div>
</div>

""";
$this->lay_print_calendar();
"""

</div>

</div>
</div>
</body>
</html>
""";
}

Obviously you could add as many images and links as you wanted - just make sure to add <br/> after each one. :)

I hope that helps!

Tags: flist love

Current Mood:

geeky

4 comments | Leave a comment

( Post a new comment )

bellatemple on February 15th, 2006 03:53 pm (UTC)

Thanks for posting this!

Though, for some odd reason, LJ is not obeying my commands. I get the feeling I might be missing a step. . . . the one where you say "Okay, I'm done, now affect the changes!"

'Cause when I hit 'save & compile', it tells me it has, and then nothing happens on the journal itself.

. . .

It's been one of those days know. Feel free to say "No, dummy, you have to do THIS first!" and point out something obvious I'm missing.

(Reply) (Thread) (Link)

whiskyinmind.livejournal.com on February 15th, 2006 10:20 pm (UTC)

I always forget to mention that last step (and when I was checking it out yesterday I kept forgetting to do it as well). Once you've hit Save & Compile, you need to go back into the 'Customize' (http://www.livejournal.com/customize/) page and from the "Themes" drop down menu you need to choose your 'custom layer'. It should be at the very bottom of the list of options.

(Reply) (Parent) (Thread) (Link)

bellatemple on February 16th, 2006 08:26 am (UTC)

ah! there we go!

You rock, ms. sho.

(Reply) (Parent) (Link)

jetpack-monkey.livejournal.com on February 16th, 2006 12:46 pm (UTC)

Thanks for the birthday kudos!

(Reply) (Link)

					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30