View Full Version : Rollovers, Music/Mood and Overflow.


kittish
09-11-2005, 05:03 AM
Hello!

Okay, my test journal is here (http://www.livejournal.com/users/kittytest/).

I was wondering if anyone knew the override for free accounts for rollovers?
Also, my Music and Mood.. Things are stretched over the entry table in Firefox, and in Firefox I have a vertical scrollbar overflow, it's strange. I think it's because for some reason, as the page loads, it thinks that the height of the image is 631px, I'm not sure though.

Anywho, here are my overrides:
GLOBAL_HEAD<=
<style type="text/css">
<!--

/*NO PADDING*/
table.entrybox td{
padding:0;
margin:0;
}

/*GETS RID OF ICON*/
.shadowed img{
display:none;
}


/*JUSTIFIES TEXT*/
.entrybox td{
text-align: justify;
}
.entrybox td.index, .entrybox td.comments{
text-align: right;
}

/*HIDES YOUR NAVIGATION*/
table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}



/*ENTRIES ON TOP OF HEADER IMAGE*/
*html body .shadowed img.x{
z-index: -1;
}
table, .shadowed div{
z-index: 80;
}
html>body table{
position: relative;
}

/*POSITION YOUR HEADER*/
.x{
position:absolute;
top:0px;
width: 631px;
left:0%;
margin-left:0px !important;
margin-left:-0px;}

/*YOUR SIDEBAR*/
#sidebar{
position:absolute;
top:392px;
left:463px;
width:144px;
height:100%;
visibility:visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebar img{
display:inline;
}

/*SCROLLBAR*/
body {
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
}

/*BACKGROUND IMAGE*/
body {
background-color:#ffffff;
background-image: url(http://img.photobucket.com/albums/0903/kitteh/livejournal/soubibg.gif);
background-attachment:fixed;
background-repeat: repeat-y;
background-position: top left;
}

/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background: transparent;
}

body{
margin-top:342px !important;
margin-top:346px;
}

table{
width:386px !important;
width:394px;
margin-left:8px !important;
margin-left:14px;
margin-right:100%;
}

table table {
width: 100%;
margin:0;
}

table table table {
width: auto;
}

.entrybox td.meta{
color:#FFE2F6;
}



/*SUBJECT AND TIMEDATE*/
.entrybox td.caption{
color:#AA4392; font-weight:bold;
}

.entrybox td.index, .index3{
display: none;
}



/*FONT*/
p,tr,td,table,body{
font-size:8pt; font-family:verdana; color:#3B1253;
}
b{
font-family:verdana; color:#2D0B40;
}
A{
COLOR:#BA4294; font-size:8pt; font-family:verdana; text-decoration:none;
}
A:HOVER{
COLOR:#FFE9F8; font-size:8pt; font-family:verdana; text-decoration:none;
}

-->
</style>
<=GLOBAL_HEAD

LASTN_TALK_READLINK=><br><a href="%%urlread%%"><b>%%messagecount%%</b> Battle System%%mc-plural-s%%</a>/

LASTN_DATE_FORMAT=></td></tr><tr><td class="index2"><font color="#FFEFFA" size="0.5">%%daylong%%&nbsp;%%dth%%&nbsp;%%monlong%%,&nbsp;%%yyyy%%</font><font size="0.5">&nbsp;<b>%%12h%%:%%min%%%%ampm%%</b></font></td></tr><tr><td class="index3">

LASTN_WEBSITE<=

<!--YOUR SIDEBAR STUFF HERE-->
<div id="sidebar">
The text, links, and pictures you want in your sidebar.<br />
--------------------
<br />
I am going to put an image in this sidebar. Usually when you hide
your icon, you have to put a visibility code in every image you use.
That is not necessary with this layout. We have not hidden our icon,
we have DESTROYED it! It's gone. Not hiding. I just put a simple
code in the HEAD overrides that will allow all of the sidebar pictures
to show without extra code. <a href="www">fakelink</a> Look:<br /><br />
<center>
</center>
</div>

<!--This fixes a bug in Internet Explorer-->
<div>&nbsp;</div>

<!--HEADER IMAGE-->
<img src="http://img.photobucket.com/albums/0903/kitteh/livejournal/soubiheader.gif" class="x" style="display:inline;">


<style type="text/css">
<!--
table table table table .meta {visibility: hidden}
table table table table table .meta {visibility: visible}
.x {
position:absolute; left:0; top:0; z-index: -10; }

.shadowed td div {
position: absolute;
top: 1px
}
-->
</style>

<=LASTN_WEBSITE

LASTN_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%%<a href="%%urlpost%%">Expand</a><center><br><br><img src="http://img.photobucket.com/albums/0903/kitteh/livejournal/soubidiv.gif"></center>
</td>
</tr>
<=LASTN_TALK_LINKS

Faytnoa
09-25-2005, 03:41 AM
What kind of rollovers are you looking for? Rollovers for text links or rollovers for images?

If you're looking for images, there's a very good tutorial here: http://ljlayouts.org/tutorials.php

If not, just let me know and I'll be glad to help in any way I can.

Faytnoa
09-25-2005, 03:49 AM
Augh, I apologize for the double post, but I can't seem to find an edit function. ^^;

Anyways, as for your music/mood stretching, you might try editing the "table table table" section of your Global Head - that's the table that contains the music/mood. I haven't messed with it myself, but you might try specifying a certain value and see if that helps any.