InsaneJournal

Tweak says, "You're a cool cart."

welcome to the chestnut gallery -- (chestnutgallery) wrote,
@ 2012-06-01 05:36:00

Entry tags:

header, sidebar

generator layout: the hanging garden

Live Preview:

hanginggarden

FRIENDS_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:fixed;
_position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:230px;
top:70px;
visibility:visible;
padding:6px;
opacity:0.7;
border-radius: 0px 0px 200px 200px;
background-color:#E9E9E9;
}
#sidebar img{
max-width:220px;
border-radius: 0px 0px 200px 200px;
opacity:1.0;
display: block;
}

.shadowed span#header img {
display: inline;
visibility: visible;
position: absolute;
}
-->
</style>

<div id="navheader">
<span class="titlebar"><center>JOURNAL TITLE HERE</span>
<span class="navlist"><center>
<a href="http://journalname.insanejournal.com/">NOUVEAU</a> |  
<a href="http://journalname.insanejournal.com/profile">ET MOI</a> |  
<a href="http://journalname.insanejournal.com/friends">DE AMIS</a>
</div>

<div id="sidebar">
<img src="http://25.media.tumblr.com/tumblr_m4t6pqLOgG1qcqhdjo1_250.gif">
</div>
<div></div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<div class="foot"><a href="%%urlread%%">%%messagecount%%</a> <a href="%%urlpost%%"> + </a></div>
</div></td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:fixed;
_position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:230px;
top:70px;
visibility:visible;
padding:6px;
opacity:0.7;
border-radius: 0px 0px 200px 200px;
background-color:#E9E9E9;
}
#sidebar img{
max-width:220px;
border-radius: 0px 0px 200px 200px;
opacity:1.0;
display: block;
}

.shadowed span#header img {
display: inline;
visibility: visible;
position: absolute;
}
-->
</style>

<div id="sidebar">
<img src="http://25.media.tumblr.com/tumblr_m4t6pqLOgG1qcqhdjo1_250.gif">
</div>
<div></div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<div class="foot"><a href="%%urlread%%">%%messagecount%%</a> <a href="%%urlpost%%"> + </a></div>
</div></td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>JOURNAL TITLE HERE</title>
<style type="text/css">

/*made by ~chestnutgallery with base code by carriep63@freelayouts*/

<!--
@import url(http://fonts.googleapis.com/css?family=Lustria|Poiret+One);

.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}

.meta {
font-size: 5pt;
text-transform: uppercase;
letter-spacing: 1px;
font-family: arial;
}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}
.comments{
padding-bottom:20px;
}

p{
padding:0;
margin:0;
}

body{
background:#F8F8F8;
background-image: url('http://static.tumblr.com/jtqlgf2/2Snm35ppc/light_wool.png'); 
background-attachment:fixed; 
margin-top:80px;
}

table { 
width: 934px; 
background:transparent;  
}

table table { 
width: 590px;
margin:0px;
border:0; 
} 
table table table { 
width: auto; 
}

body, td, font, div, p { 
font-family: tahoma;
font-size: 8pt;

letter-spacing: 0px;
}

table table .index
{background-color: transparent;
 line-height: 4pt;
 font-size: 9pt;
 font-family: georgia, serif;
 color: #F8F8F8;
 text-align: center;
 padding: 0px;
 width: auto;
}

.entrybox	
{background-color:transparent;
 visibility: visible;}

.entrybox table{background:#FFF;
padding-right:8px;
padding-left:5px;
margin-left: 10px;}

.entrybox td{
text-align: justify;
color: #151515;}

.entrybox td.index, .entrybox td.comments{
text-align: right;}

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

a {
color:#98BE8A;
text-decoration:none;
}
 
a:hover {
color:black;
text-decoration:none;
}

table.entrybox td.caption{
color:#9A9DA5; font-family:georgia; font-size:18pt; letter-spacing:-.1em;
}

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

.ljuser img[src*="community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/0RMgE.png) !important;
padding: 15px 17px 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;
}

#navheader{
position:fixed;
_position:absolute;
top:0px;
left:50%;
margin-left:-467px;
width:936px;
visibility:visible;
z-index: 1;
}

.foot a:link, .foot a:visited, .foot a:active {background-color:#000000; color:#FFFFFF; padding-top: 6px; padding-bottom: 6px; padding-left:10px; padding-right:10px; transition: all 0.6s ease-out; -o-transition-transition:  all 0.6s ease-out; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; text-decoration:none}
.foot a:hover {background-color: #000000; color: #98BE8A;}

.navlist {display:block;
width: 575px;
height: 40px;
margin-left: 0px;
top: 50px;
border-radius: 10px;
background-color: #151515;
text-align:center;}

.navlist a{
display:inline-block;
font-family: georgia;
text-transform:uppercase;
font-size:12px;
padding-top:13px;

letter-spacing:2px;
margin-right:8px;
text-decoration:none;
padding-bottom:10px;
color:#696969;
border-bottom:0px dotted ;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}

.navlist a:hover{
color:#98BE8A;
border-bottom:1px dotted;
padding-bottom:2px;}

.titlebar {display: inline-block; background-color: #151515; color: #FFFFFF; text-decoration: none; width: 924px; padding-top: 12px; padding-bottom: 10px; padding-left: 11px; font-family:georgia; font-size:18px; letter-spacing:0px;}

.navlist1 a:link, .navlist1 a:visited, .navlist1 a:active {display: inline-block; float: left; background-color: #151515; color: #F8F8F8; text-decoration: none; width: 219px; padding: 7px; border-right: 1px solid #EFEFEF; transition: all 0.4s ease-out; -o-transition-transition:  all 2s ease-out; -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out;}
.navlist1 a:hover {background-color: #FFFFFF; color: #000000; text-decoration: none;}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<div class="foot"><a href="%%urlread%%">%%messagecount%%</a> <a href="%%urlpost%%"> + </a></div>
</div></td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>8

CALENDAR_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:fixed;
_position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:230px;
top:70px;
visibility:visible;
padding:6px;
opacity:0.7;
border-radius: 0px 0px 200px 200px;
background-color:#E9E9E9;
}
#sidebar img{
max-width:220px;
border-radius: 0px 0px 200px 200px;
opacity:1.0;
display: block;
}

.shadowed span#header img {
display: inline;
visibility: visible;
position: absolute;
}
-->
</style>

<div id="sidebar">
<img src="http://25.media.tumblr.com/tumblr_m4t6pqLOgG1qcqhdjo1_250.gif">
</div>
<div></div>
<=CALENDAR_WEBSITE

LASTN_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:fixed;
_position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:230px;
top:70px;
visibility:visible;
padding:6px;
opacity:0.7;
border-radius: 0px 0px 200px 200px;
background-color:#E9E9E9;
}
#sidebar img{
max-width:220px;
border-radius: 0px 0px 200px 200px;
opacity:1.0;
display: block;
}

.shadowed span#header img {
display: inline;
visibility: visible;
position: absolute;
}
-->
</style>

<div id="sidebar">
<img src="http://25.media.tumblr.com/tumblr_m4t6pqLOgG1qcqhdjo1_250.gif">
</div>
<div></div>
<=LASTN_WEBSITE

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. In the Theme section under the Look and Feel tag select custom colors. Leave ALL FIELDS BLANK. Your Custom Colors fields should look like this.
4. Go to the Custom Options tag and copy & paste the code into the overrides box
5. In the code change "journalname" to the name of your journal
6. Replace the gif and journal title with your own
7. Save

Notes
• For this layout to work you MUST HAVE a web page in your userinfo.

(Post a new comment)

	tetris 2012-06-01 12:41 pm UTC (link)
	that is so hotttttt. (Reply to this) (Thread)

	chestnutgallery 2012-06-03 11:26 pm UTC (link)
	YOU'RE SO HOT LOVEY ♥ (Reply to this) (Parent)

	emptily 2012-06-03 01:31 pm UTC (link)
	quick question: does this work on community pages the same way it does on user pages? i put it on a community but the usericons are showing up next to the posts. (Reply to this) (Thread)

chestnutgallery
2012-06-03 11:35 pm UTC (link)

Everything works the same except for the display of the usericons and username. When used for a community Generator layouts automatically display the usericon and username of the poster on their entry, just like it does on the friends page of a user journal.

If you'd like to hide the usericons you can add img {
display:none;
} to the code somewhere between the GLOBAL_HEAD tags.

(Reply to this) (Parent) (Thread)

	emptily 2012-06-04 12:01 am UTC (link)
	oh, got it. thanks! (Reply to this) (Parent)

	subjugation 2012-07-09 04:00 pm UTC (link)
	Is it possible to use this layout, but tweak a journal's style so that it only displays a single entry per page? (Reply to this) (Thread)

	chestnutgallery 2012-07-09 04:59 pm UTC (link)
	Absolutely. Just find the section of the code that says LASTN_OPT_ITEMS=>8 and change 8 to 1 (Reply to this) (Parent) (Thread)

	subjugation 2012-07-09 05:00 pm UTC (link)
	Thank you so much! (Reply to this) (Parent)