InsaneJournal

Tweak says, "fear not the bunny"

welcome to the chestnut gallery -- (chestnutgallery) wrote,
@ 2012-07-27 16:43:00

Entry tags:

mouse over effects, sidebar

generator layout: face and ribbon

Live Preview:

faceandribbon

FRIENDS_OPT_ITEMS=>25

FRIENDS_WEBSITE<=

<div id="sidebar"><center><span class="box">
<img src="http://24.media.tumblr.com/tumblr_m6n57mHejp1r31o5go2_250.gif" width="160" style="border: 10px solid #000000;">
</span><br><br>
<span class="navlist">
<a href="http://journalname.insanejournal.com/">LE PLUS NOUVEAU</a>
<a href="http://journalname.insanejournal.com/profile">AU SUJET DE MOI</a>
<a href="http://journalname.insanejournal.com/friends">PAGE D'AMIS</a>
<a href="http://journalname.insanejournal.com/calendar">MON HISTORIE</a>
<a href="http://chestnutgallery.insanejournal.com/">© CHESTNUT GALLERY</a>
</span>
</div>

<div id="sidebar2">
<br><br>
</div>
<div id="sidebar3">
<br><br>
</div>

<div> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<div id="footer"><a href="%%urlread%%"><font color="#FFFFFF">%%messagecount%% NOTES</a> |</font> <a href="%%urlpost%%"> <font color="#FFFFFF">SEND ONE</font> </a></font></div>
</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div id="sidebar"><center><span class="box">
<img src="http://24.media.tumblr.com/tumblr_m6n57mHejp1r31o5go2_250.gif" width="160" style="border: 10px solid #000000;">
</span><br><br>
<span class="navlist">
<a href="http://journalname.insanejournal.com/">LE PLUS NOUVEAU</a>
<a href="http://journalname.insanejournal.com/profile">AU SUJET DE MOI</a>
<a href="http://journalname.insanejournal.com/friends">PAGE D'AMIS</a>
<a href="http://journalname.insanejournal.com/calendar">MON HISTORIE</a>
<a href="http://chestnutgallery.insanejournal.com/">© CHESTNUT GALLERY</a>
</span>
</div>

<div id="sidebar2">
<br><br>
</div>
<div id="sidebar3">
<br><br>
</div>

<div> </div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<div id="footer"><a href="%%urlread%%"><font color="#FFFFFF">%%messagecount%% NOTES</a> |</font> <a href="%%urlpost%%"> <font color="#FFFFFF">SEND ONE</font> </a></font></div>
</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>JOURNAL TITLE</title>
<style>
<!--
@font-face {
    font-family: franchise;
    src: url(http://static.tumblr.com/bc7znss/0X0m6olf9/franchise-bold-hinted.ttf) format("truetype");
}

body {
background-color: #EFEFEF;
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}

.meta {
font-size: 4pt;
text-transform: uppercase;
letter-spacing: 0px;
}

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

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

.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;
_position:absolute;
background:transparent;
top: 0px !important;
left: 0px !important;
width: 190px !important;
height:100%;
padding: 20px;
visibility: visible;
z-index:1;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt; 
-moz-transition: opacity .7s ease-in-out; 
-o-transition: opacity .7s ease-in-out; 
transition: opacity .7s ease-in-out; 
-webkit-transition: opacity .7s ease-in-out; 
opacity: 0;
}

html>body #sidebar{
position:fixed;
_position:absolute;
background:transparent;
top: 0px !important;
left: 0px !important;
width: 190px !important;
height:100%;
padding: 20px;
visibility: visible;
z-index:1;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt; 
-moz-transition: opacity .7s ease-in-out; 
-o-transition: opacity .7s ease-in-out; 
transition: opacity .7s ease-in-out; 
-webkit-transition: opacity .7s ease-in-out; 
opacity: 0;}

#sidebar img{display:inline; }
#sidebar:hover{opacity: 1.0}

/*YOUR SIDEBAR*/
#sidebar2{
position:fixed;
_position:absolute;
background-image: url(http://i.imgur.com/44zzw.png);
top: 0px !important;
left: 0px !important;
width: 230px !important;
height:100%;
padding: 20px;
visibility: visible;
z-index:-1;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt; }

html>body #sidebar2{
position:fixed;
_position:absolute;
background-image: url(http://i.imgur.com/44zzw.png);
top: 0px !important;
left: 0px !important;
width: 230px !important;
height:100%;
padding: 20px;
visibility: visible;
z-index:-1;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt; }

#sidebar2 img{display:inline; }

/*YOUR SIDEBAR*/
#sidebar3{
position:fixed;
_position:absolute;
background-image: url(http://i.imgur.com/7APE1.png);
top: 0px !important;
left: 230px !important;
width: 50px !important;
height:100%;
padding: 20px;
visibility: visible;
z-index:-1;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt; }

html>body #sidebar3{
position:fixed;
_position:absolute;
background-image: url(http://i.imgur.com/7APE1.png);
top: 0px !important;
left: 230px !important;
width: 50px !important;
height:100%;
padding: 20px;
visibility: visible;
z-index:-1;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt; }

#sidebar3 img{display:inline; }

#footer{
text-align:center;
width:20%;
float:right;
padding: 4px;
font-size: 7pt;
line-height: 10px;
font-family: franchise;
letter-spacing: 2px; 
background-color: #000000;
color: #FFFFFF;}

/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background-color: transparent;  
color:#1E1E1E;
font-family: arial;
font-size:11px;
line-height: 10pt;}

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

.content {background-color: transparent; }

table { 
width: 640px; 
margin-left: 430px !important;
margin-right:100%;
font-family: tahoma;
font-size: 8pt;
color: #C4B5AA;
line-height: 15pt; }

table table {width:100% !important; margin:0 !important; background-color:transparent;} 
table table table {width:auto !important; background-color:transparent;} 
table td {border:0px solid #444444;}
table, table table td {border:none; padding:1px; background-color: transparent;}

.shadowed img
/* icons */
{color:#E3DECB; border:none;}
.entrybox 
/* entry border */
{border:0px solid #3F2FB0;  }
.entrybox .index 
/* hiding bracket */
{color:#F6BF96; }

a:link, a:active, a:visited{color: #55859C; text-decoration:none}
a:hover{color:#C0C0C0;}

td.caption, .subject { 
font-family: franchise;
text-transform: uppercase;
color: #000000;
font-size: 15pt; 
letter-spacing: 1px;
border-bottom:0px solid #EEEEEE;
padding-bottom: 5px;}

p table table td.caption, .head{ 
line-height:25px; 
font-size: 15pt; 
letter-spacing: 1px;
font-family: franchise; }

.comments {
font-size:5pt;
font-family:"georgia";
text-transform:uppercase;
letter-spacing: 2px;
}

.entrybox	
{background-color: #FFFFFF;
 visibility: visible;}

.entrybox table{background:#FFFFFF}

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

.entrybox td.index2{
text-align:center;
}

.entrybox td.caption{
text-align:center;
}

.index2 {font-style:normal; text-align:center;}

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

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

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

.box {display:block; opacity:0.8;}
.box:hover {opacity:1;}
.navlist a:link, .navlist a:visited, .navlist a:active {font-family: courier new; display: block; width:180px; padding: 6px; transition: all 0.4s ease-out; -o-transition-transition:  all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; background-color: #000000; color: #FFFFFF; margin-bottom: 2px; opacity:0.8}
.navlist a:hover {opacity:1}

.foot a:link, .foot a:visited, .foot a:active {background-color:#000000; padding: 4px; 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}
.foot a:hover {background-color: #9C6F9C; color: #FFFFFF;}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<div id="footer"><a href="%%urlread%%"><font color="#FFFFFF">%%messagecount%% NOTES</a> |</font> <a href="%%urlpost%%"> <font color="#FFFFFF">SEND ONE</font> </a></font></div>
</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>8

CALENDAR_WEBSITE<=

<div id="sidebar"><center><span class="box">
<img src="http://24.media.tumblr.com/tumblr_m6n57mHejp1r31o5go2_250.gif" width="160" style="border: 10px solid #000000;">
</span><br><br>
<span class="navlist">
<a href="http://journalname.insanejournal.com/">LE PLUS NOUVEAU</a>
<a href="http://journalname.insanejournal.com/profile">AU SUJET DE MOI</a>
<a href="http://journalname.insanejournal.com/friends">PAGE D'AMIS</a>
<a href="http://journalname.insanejournal.com/calendar">MON HISTORIE</a>
<a href="http://chestnutgallery.insanejournal.com/">© CHESTNUT GALLERY</a>
</span>
</div>

<div id="sidebar2">
<br><br>
</div>
<div id="sidebar3">
<br><br>
</div>

<div> </div>
<=CALENDAR_WEBSITE

LASTN_WEBSITE<=

<div id="sidebar"><center><span class="box">
<img src="http://24.media.tumblr.com/tumblr_m6n57mHejp1r31o5go2_250.gif" width="160" style="border: 10px solid #000000;">
</span><br><br>
<span class="navlist">
<a href="http://journalname.insanejournal.com/">LE PLUS NOUVEAU</a>
<a href="http://journalname.insanejournal.com/profile">AU SUJET DE MOI</a>
<a href="http://journalname.insanejournal.com/friends">PAGE D'AMIS</a>
<a href="http://journalname.insanejournal.com/calendar">MON HISTORIE</a>
<a href="http://chestnutgallery.insanejournal.com/">© CHESTNUT GALLERY</a>
</span>
</div>

<div id="sidebar2">
<br><br>
</div>
<div id="sidebar3">
<br><br>
</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. 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 #sidebar2 background image 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.
• The image you use for the sidebar strip should be at least 230x800 in size.

(Post a new comment)

	sog_npc 2012-08-04 03:55 pm UTC (link)
	I love this! Using it for this journal with inverted color scheme and other slight changes! (Reply to this)

	masseffect 2012-08-06 01:07 am UTC (link)
	This is awesome! Will be using it in a character journal. Am I stupid, though, or does the friends page not show the usernames and communities anywhere? (Reply to this) (Thread)

	dvd 2012-08-13 03:58 am UTC (link)
	Hi there, I'm using this as well and have the same issue? The icon links to the community but nowhere does it show the usernames or community name. There are brackets instead. [] Any ideas? Thanks! (Reply to this) (Parent) (Thread)

	chestnutgallery 2012-08-19 07:39 am UTC (link)
	Answered! (Reply to this) (Parent) (Thread)

	dvd 2012-08-19 02:09 pm UTC (link)
	Thanks! (Reply to this) (Parent)

	chestnutgallery 2012-08-19 07:39 am UTC (link)
	Sorry this took a bit to get too, was on vacay. The friends page userinfo/comm looks that way because the font is currently set to zero. Just find the part of the code that begins with table table .index and change font-size: 0pt to whatever pt size you want. (Reply to this) (Parent)

	turpin_time 2012-08-06 01:20 am UTC (link)
	ugh love it/you. Stole for this journal <33 (Sarah again <333) (Reply to this)

	ex_msiff460 2012-09-13 09:07 pm UTC (link)
	Thanks! Using this now. (Reply to this)

	tumultus_mods 2013-01-17 06:47 pm UTC (link)
	this is utterly beautiful. i hope you don't mind if i use this for this journal and its asylums ♥ (Reply to this)

	trawls 2013-01-30 06:09 am UTC (link)
	Hi! I nabbed this layout and am currently using it for this journal (with slight changes) but I'm having a problem with the web font. I've fixed it in such a way that I can now view it okay in my own PC but here at work, the fonts aren't working. :/ I'm using Firefox both here and at home but I'm using a Mac at home and Windows at work. Is the problem with me? (Reply to this)

	heartonhisleeve 2013-03-17 03:11 am UTC (link)
	Sorry for the spam; using this one instead, here. (Reply to this)

	seekingclarity 2013-09-06 09:44 pm UTC (link)
	using here with a fair bit of editing. XD (Reply to this)