f i l t h y g o r g e o u s (filthygorgeous) wrote in component_help,
f i l t h y g o r g e o u s
filthygorgeous
component_help

Adding An Extra Component

I used pamelajoy's component tutorials to get my journal looking exactly how I want it to, especially with the scrolling boxes on the left hand side of my layout. The tutorial was really easy to follow and my journal looks exactly how I want it to.

However what I want to do is add another box underneath the component entitled "m u s i c" where I can put in the code for a last.fm playlist. I don't care whether the box scrolls like the "m u s i c" and "f a v o u r i t e s", I just want another component to put the playlist in, above the calender. (I hope that makes sense.)

The name of the theme is electricbluestars and its number is 5377108. If that doesn't work, the code is here:

layerinfo "type" = "theme";

layerinfo "name" = "electricbluestars";



function page_layout(Page p) {

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

"""

<html>

<head>



<link rel="stylesheet" href="$p.stylesheet_url" type="text/css" />

$p.head_content

<title>$title</title>



<style>

.entryHeader {

text-transform: uppercase;

}

</style>



<STYLE TYPE="text/css">p {align=justify}

BODY{cursor: url(http://www.gotcursors.com/disney/cinderella4.cur);}

a {cursor: url(http://www.gotcursors.com/disney/cinderella4.cur);}

</STYLE><b style=position:absolute;left:137;top:15;font-family:verdana;font-size:8pt;></i></b>





<style>

html {

scrollbar-3dlight-color: #0000FF;

scrollbar-arrow-color: #FFFFFF;

scrollbar-base-color: #0000FF;

scrollbar-darkshadow-color: #0000FF;

scrollbar-face-color: #0000FF;

scrollbar-highlight-color: #0000FF;

scrollbar-shadow-color: #0000FF;

}

</style>



<style>

.calendarInactive {

border: 1px solid #FFFFFF;

}



.calendarActive {

border: 1px solid #FFFFFF;

}

</style>



</head>

<body>



<table width="80%" cellspacing="0" cellpadding="0" valign="top" align="center">

<tr valign="top" width="100%">

<td width="3">

<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">

</td>

""";



if ($*comp_state == "left") {

print_my_components($p);

"""

<td width="3">

<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">

</td>

""";

}



print_my_entries($p, $title);

if ($*comp_state == "right") {

"""

<td width="3">

<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">

</td>

""";



print_my_components($p);

}

"""

<td width="3">

<img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">

</td>

</tr>

</table>

</body>

</html>

""";

}



function print_profile(Page p) {

print_comp_header("p r o f i l e");

"""

<table cellspacing="0" cellpadding="0" border="0">

<tr>

<td width="50%" align="center">

</td>

<td align="center"><br /><a href="http://www.livejournal.com/allpics.bml?user=acinderellatale" alt="icons">$p.journal.default_pic</a></td>

<td width="50%" align="center">

</td>

</tr>



<tr>

<td colspan="3" class="compContent">

<div><b></b><center> <span class="ljuser" style="white-space:nowrap;"><a href="http://www.livejournal.com/users/acinderellatale/info"><img src="http://stat.livejournal.com/img/userinfo.gif" alt="" width="17" height="17" style="vertical-align:bottom; border:0;" /></a><a href="http://www.livejournal.com/users/acinderellatale"><b>acinderellatale</b></a></span></center></div>

</div>

</td>

</tr>

</table>

""";



print_comp_footer();

}









function print_free_text(Page p) {

  print_comp_header("f a v o u r i t e s");

  """

<div id="Layer1" style="border:0px solid #878787; position:relative; width:100%; height:180px; z-index:1; overflow: auto; overflow-x: hidden; scrollbar-3dlight-color: #0000FF; scrollbar-arrow-color: #ffffff; scrollbar-base-color: #0000FF; scrollbar-darkshadow-color: #0000FF; scrollbar-face-color: #0000FF; scrollbar-highlight-color: #0000FF; scrollbar-shadow-color: #0000FF;">

<table width="100%" cellpadding="3" cellspacing="0">



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/marcjacobs.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>marc jacobs</b><br><i>the prettiest dresses</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/80s.jpg"border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>the 80s</b><br><i>the best decade ever<i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/notesfrommytravelsajolie.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>notes from my travels</b><br><i>by angelina jolie</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/missdiorcherie.jpg"border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>miss dior cherie</b><br><i>my new favourite<i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/razr.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>razr</b><br><i>my new pink phone</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/polkadots.jpg"border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>polka dots</b><br><i>join the dots<i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/ljcinderella.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>cinderella</b><br><i>happily ever after</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/ljlonelyplanet.gif"border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>lonely planet</b><br><i>my travel bible<i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/ipod.png" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>ipod</b><br><i>music on the go</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/whitetulips.jpg"border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>white tulips</b><br><i>my favourites</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/ljmac.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>mac cosmetics</b><br><i>addictive</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/ljlasvegas.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>las vegas</b><br><i>favourite tv show</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/summer.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>summer</b><br><i>hot hot hot</i><br> </td>

</tr>



</tr>

</table>



</div>



""";

  print_comp_footer();





print_comp_header("m u s i c");

"""

<div id="Layer1" style="border:0px solid #878787; position:relative; width:100%; height:180px; z-index:1; overflow: auto; overflow-x: hidden; scrollbar-3dlight-color: #0000FF; scrollbar-arrow-color: #ffffff; scrollbar-base-color: #0000FF; scrollbar-darkshadow-color: #0000FF; scrollbar-face-color: #0000FF; scrollbar-highlight-color: #0000FF; scrollbar-shadow-color: #0000FF;">

<table width="100%" cellpadding="3" cellspacing="0">



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/muse-black_holes_and_revelations.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>muse</b><br><i>black holes & revelations</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/the_raconteurs-broken_boy_soldiers.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>the raconteurs</b><br><i>broken boy soldiers</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/robbie_williams-intensive_care.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>robbie williams</b><br><i>intensive care</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/keane-under_the_iron_sea.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>keane</b><br><i>under the iron sea</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/girls_aloud-chemistry.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>girls aloud</b><br><i>chemistry</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/darren_hayes-the_tension_and_the_sp.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>darren hayes</b><br><i>the tension & the spark</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/the_cloud_room-the_cloud_room.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>the cloud room</b><br><i>the cloud room</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/ljsugababes-taller_in_more_ways.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>sugababes</b><br><i>taller in more ways</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/roisin_murphy-ruby_blue.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>roisin murphy</b><br><i>ruby blue</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/kanye_west-late_registration.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>kanye west</b><br><i>late registration</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v474/killer_heels/other/madonnaconfessions.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>madonna</b><br><i>confessions on a dancefloor</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/tzu-smiling_at_strangers.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>tzu</b><br><i>smiling at strangers</i><br> </td>

</tr>



<tr bgcolor="#0099ff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/paulmac-panic_room.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>paulmac</b><br><i>panic room</i><br> </td>

</tr>



<tr bgcolor="#33ccff">

<td align="left">

<img src="http://img.photobucket.com/albums/v15/e_birrer/rihanna-a_girl_like_me.jpg" border="0" style="border: 1px solid #000" /></td>

<td align="left"><b>rihanna</b><br><i>a girl like me</i><br> </td>

</tr>



</tr>

</table>

</div>

""";

  print_comp_footer();



}











The Last.fm playlist is here:

<a href="http://www.last.fm/user/acinderellatale/?chartstyle=coffee"><img src="http://imagegen.last.fm/coffee/artists/acinderellatale.gif" border="0" /></a>



I'm pretty sure that the last.fm playlist isn't wider than the width of the components I've already got.

Any help is much appreciated in advance. :)

EDIT: Problem solved.
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic
  • 7 comments