InsaneJournal

Tweak says, "Cargo cults are cool."

welcome to the chestnut gallery -- (chestnutgallery) wrote,
@ 2012-06-25 07:09:00

Entry tags:

mouse over effects, sidebar

generator layout: oculus (the window series)

Live Preview:

oculuswindow

FRIENDS_OPT_ITEMS=>25

FRIENDS_WEBSITE<=

<div id="sidebar">
<img src="http://i.imgur.com/Tyixn.gif">
</div>

<div id="sidebar2"><center>
<span style="background-color: #FFFFFF; display: block; padding: 5px; width: 240px;"><font color="#00000"><small><center>JOURNAL TITLE GOES HERE</center></small></span>
<br><span class="navlist">
<a href="http://journalname.insanejournal.com/"><br>WHAT'S NEW<br><br></a>
<a href="http://journalname.insanejournal.com/profile"><br>SELF PORTRAIT<br><br></a>
<a href="http://journalname.insanejournal.com/friends"><br>SOCIAL CIRCLE<br><br></a>
<a href="http://journalname.insanejournal.com/calendar"><br>INTO THE PAST<br><br></a>
</span>
</div>

<div> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<tr><td class="comments" colspan="2"><br><div id="footer">
<font size="4">{ <a href="%%urlread%%">%%messagecount%%</a> </font> comments %%mc-plural-s%%... read them inside or <a href="%%urlpost%%">add one</a> <font size="4">}</font>
</div>
</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div id="sidebar">
<img src="http://i.imgur.com/Tyixn.gif">
</div>

LASTN_TALK_LINKS<=
<table>
<tr><td width="50%" bgcolor="" class="lowerleft"></td>
<td class="comments" colspan="2">
<br><div id="footer">
<font size="4">{ <a href="%%urlread%%">%%messagecount%%</a> </font> comments %%mc-plural-s%%... read them inside or <a href="%%urlpost%%">add one</a> <font size="4">}</font>
</div>
</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>JOURNAL TITLE</title>
<style>
<!--
body {
background-color: #E9E9E9;
font-family: tahoma;
font-size: 8pt;
color: #C4B5AA;
line-height: 15pt;
margin:0; overflow-x:hidden; }

BODY, TD {
text-align: justify;}

table, tr, xmp, div, td, p {
text-align: justify;}

.shadowed img{display:none; }

table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}

table table .index
{background-color: transparent;
line-height: 80%;
font-size: 6pt;
letter-spacing:1px;
font-family: georgia, serif;
color: #FFFFFF;
text-align: left;
padding: 0px;
width: auto;
text-transform:uppercase;
}

table table table td.meta
{padding: 1px;
 line-height: 4pt;
 font-size: 7pt;}

.entrybox .meta
{background-color: transparent;
text-align:center;
}

tr.caption{display:none }

.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px }

/*YOUR SIDEBAR*/
#sidebar{
position:fixed !important;
_position:absolute;
background-color:transparent;
top: 80px !important;
left: 108px !important;
visibility: visible;
z-index:2;
background: #FFF;
text-align: center;
height: 130px;
width:130px;
padding: 8px;
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
transition: all 0.6s linear;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;}

html>body #sidebar{
position:fixed !important;
_position:absolute;
background-color:transparent;
top: 80px !important;
left: 108px !important;
visibility: visible;
z-index:2;
background: #FFF;
text-align: center;
height: 130px;
width:130px;
padding: 8px;
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
transition: all 0.6s linear;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;}

#sidebar img{display:inline; 
    width: 130px;
    height: 130px;
    opacity: 0.6;
    margin-bottom: -3px;
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    transition: all 0.6s linear;
    -moz-border-radius: 65px;
    -webkit-border-radius: 65px;
    border-radius: 65px;}

#sidebar:hover img{display:inline; 
opacity: 0.9;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
transition: all 0.6s linear;}

#sidebar:hover {-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
transition: all 0.6s linear;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;}

/*YOUR SIDEBAR*/
#sidebar2{
position:fixed !important;
_position:absolute;
top: 240px !important;
left: 0px !important;
width: 360px !important;
height: 100%;
visibility: visible;
z-index:1;
background-color: transparent;
font-family: times new roman;
font-size: 8pt;
letter-spacing: 1px;
line-height: 9pt; }

html>body #sidebar2{
position:fixed !important;
_position:absolute;
top: 240px !important;
left: 0px !important;
width: 360px !important;
height: 100%;
visibility: visible;
z-index:1;
background-color: transparent;
font-family: times new roman;
font-size: 8pt;
letter-spacing: 1px;
line-height: 9pt; }

#sidebar2 img{display:inline; }

#footer{
text-align:right;}

A:link{color:#10AFB5;text-decoration:none;font-weight: none;font-family: century gothic;}
A:visited{color:#10AFB5;text-decoration:none;font-weight:none;font-family: century gothic;}
A:hover{color:#161616;}
A:active{color:#10AFB5;text-decoration:none;font-weight:none;font-family: century gothic;}

/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background-color: transparent;  
font-family: sans-serif;
font-size: 8pt;
color: #444444; 
line-height: 10pt;}

body {margin-top: 0px !important; margin-top: 0px; }

.content {background-color: transparent; }

table { 
width: 680px; 
margin-left:410px !important;
margin-right:100%;
font-family: tahoma;
font-size: 8pt;
color: #C4B5AA;
line-height: 15pt; 
border: 0px;
 border-collapse: collapse;
 border-spacing: 0px;
 padding: 0px;}

table table {width:100% !important; margin:0 !important; background-color: transparent;} 
table table table {width:auto !important; background-color: transparent;}

.caption
{color: #000000; font-family: georgia, serif; font-size: 22px; line-height: 18px; text-align: left!important; font-weight: normal; text-transform: 
lowercase; letter-spacing: 2px;}

table table table table td.meta {
font-size:5pt;
font-family:"georgia";
text-transform:uppercase;
letter-spacing:2px;
line-height: 11pt;
 text-align:justify;
}

table td
{border: 0px;
 border-collapse: collapse;
 border-spacing: 0px;
 padding: 0px;
}

.entrybox	
{background-color: #FFFFFF;
 margin-top: 20px;
 visibility: visible;}

.entrybox table{background:#FFFFFF}

/* upper left */
.entrybox td.caption{background:#FFFFFF url(http://i.imgur.com/ApPMW.png) no-repeat top left;}

/* upper right */
.entrybox td.index{background:#FFFFFF url(http://i.imgur.com/y9Fef.png) no-repeat top right;}

/* lower left */
.entrybox td.lowerleft{background:#FFFFFF url(http://i.imgur.com/ZQ2yE.png) no-repeat bottom

left;}

/* lower right */
.entrybox td.comments{background:#FFFFFF url(http://i.imgur.com/XyIHy.png) no-repeat bottom

right;}

-->

/*Entry Padding*/
.entrybox table td
{padding: 6px;}

.ljuser img[src*="userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/KJ8iY.png) !important;
padding: 16px 16px 0 0 !important;
}

.ljuser img[src*="community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/L0KDw.png) !important;
padding: 16px 16px 0 0 !important;
}

.caption img[src="http://www.insanejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 10px 10px 0;
background: url(http://i.imgur.com/A0wsZ.png);
background-repeat: no-repeat;
}
.caption img[src="http://www.insanejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 10px 10px 0;
background: url(http://i.imgur.com/Hc4G4.png);
background-repeat: no-repeat;
}

.navlist a:link, .navlist a:visited, .navlist a:active {display:block; background-color: #FFFFFF; color: #1E1C1C; text-decoration: none; width: 250px; margin: 0 0 .2em 0;}
.navlist a:hover {background-color: #10AFB5; color: #E5E5E5; width: 250px;}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td width="50%" bgcolor="" class="lowerleft"></td>
<td class="comments" colspan="2"><br><div id="footer">
<font size="4">{ <a href="%%urlread%%">%%messagecount%%</a> </font> comments %%mc-plural-s%%... read them inside or <a href="%%urlpost%%">add one</a> <font size="4">}</font>
</div>
</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>8

CALENDAR_WEBSITE<=

<div id="sidebar">
<img src="http://i.imgur.com/Tyixn.gif">
</div>

LASTN_WEBSITE<=

<div id="sidebar">
<img src="http://i.imgur.com/Tyixn.gif">
</div>

INSTRUCTIONS
1. Under Customize Journal select S1 as your Style System
2. In the Look and Feel tab set all your layouts to Generator
3. Go to the Custom Options tag and copy & paste the code into the overrides box
4. In the code change "journalname" to the name of your journal
5. Replace the journal title with your own
6. Replace the gif with your own gif or image
7. Save

Notes
• For this layout to work you MUST HAVE a web page in your userinfo.
• Works best with a square shaped gif or image

(Post a new comment)

	courtjesster 2012-06-25 02:01 pm UTC (link)
	OH WHATEVER. NBD. I'M JADIS AND MY LAYOUTS ARE SEXY AS FUCK. (Reply to this) (Thread)

	chestnutgallery 2012-06-26 01:09 am UTC (link)
	ADASDJASLDJASDADSKD XD IM WAITING FOR SOMEONE TO CALL ME OUT LIKE "JADIS THESE THREE LAYOUTS ARE ALL THE SAME >=\|" AND THEN I HAVE TO BE LIKE .....=( YEAH. (Reply to this) (Parent)

	courtjesster 2012-06-25 02:02 pm UTC (link)
	I was going to be completely obnoxious and comment something similar on all versions of this, but I'll refrain and just gush about them all here. Just shut your stupid mouth. So gorgeous. (Reply to this) (Thread)

	chestnutgallery 2012-06-26 01:18 am UTC (link)
	LMAO ILU SO MUCH! It's the sky gif and the circles!! CIRCLES MAKE EVERYTHING PRETTY! (Reply to this) (Parent)

	carismasensei 2012-06-25 02:29 pm UTC (link)
	This set of layouts is so beautiful! So calm and pretty, I love them all ♥ (Reply to this) (Thread)

	chestnutgallery 2012-06-26 01:43 am UTC (link)
	THANK YOU SO MUCH BBDOLL! :D (Reply to this) (Parent)

	sansastark 2012-06-25 08:04 pm UTC (link)
	JADIS! THIS SERIES OF LAYOUTS IS GORGEOUS! I will definitely be using one of these soon! ♥ (Reply to this) (Thread)

	chestnutgallery 2012-06-26 01:51 am UTC (link)
	LIKE A BOSS ♥♥♥ (Reply to this) (Parent)

	Oh, well, hello there, you sexy thing. dangerdaysmod 2012-11-01 06:50 pm UTC (link)
	Using for my RPG <3 Let's hope I can make this layout look shiny, if you catch my drift. Is there possibly a way I could get a list of tags showing on it? I would love you forever if I could get a list of tags on this layout, so it's easier for people to navigate. (Reply to this) (Thread)

	Re: Oh, well, hello there, you sexy thing. dangerdaysmod 2012-11-01 07:09 pm UTC (link)
	If it can be done, then here's this. (Reply to this) (Parent)

chestnutgallery
2012-11-07 02:09 am UTC (link)

Unfortunately S1 style layouts don't allow for a tags list. That's only an option for certain S2 style layouts (like bloggish). You could manually create a links list by adding some html links to the tags pages to the sidebar navigation. But to have it automatically you'd have to use an S2 layout. If you'd prefer that

lobelia has some absolutely gorgeous S2 layouts.

(Reply to this) (Parent) (Thread)

	dangerdaysmod 2012-11-07 06:06 pm UTC (link)
	Meep. XD I guess I can do that. How would I do this? I have a version of your code I edited for my journal if you want to go to that page and grab it. Otherwise I'll find some way around this vast site and find the tags page. XD (Reply to this) (Parent)

	dangerdaysmod 2012-11-08 05:26 pm UTC (link)
	JUST KNOW THAT EVEN IF I DON'T USE IT HERE, I USE A LOT OF YOUR JOURNALS FOR MY CHARACTER JOURNALS AND I LUFF YOU AND YOUR AWESOMESAUCE CODING SKILLS <3 (Reply to this) (Parent)

	toshas 2013-06-26 04:14 pm UTC (link)
	Using it for this journal. Will credit in User info. Thanks! (Reply to this)