InsaneJournal

Tweak says, "Coming to theatres soon."

welcome to the chestnut gallery -- (chestnutgallery) wrote,
@ 2012-08-23 03:35:00

Entry tags:

mouse over effects, sidebar

generator layout: overhand shuffle

Live Preview:

overhandshuffle

FRIENDS_OPT_ITEMS=>25

FRIENDS_WEBSITE<=

<div id="sidebar">
<font class="title">journal title</font><br>
<font class="subtitle">journal subtitle goes here</font>
</div>

<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> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
<span style="background-color:#000000; padding: 4px; padding-left:10px; padding-right:10px;"><a href="%%urlread%%"><font color="#FFFFFF">%%messagecount%%</font></a></span>  <span style="background-color:#000000; padding: 4px; padding-left:10px; padding-right:10px;"><a href="%%urlpost%%"><font color="#FFFFFF"> + </font></a></span>
</div><br><br>
</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div id="sidebar">
<font class="title">journal title</font><br>
<font class="subtitle">journal subtitle goes here</font>
</div>

<div> </div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
<span style="background-color:#000000; padding: 4px; padding-left:10px; padding-right:10px;"><a href="%%urlread%%"><font color="#FFFFFF">%%messagecount%%</font></a></span>  <span style="background-color:#000000; padding: 4px; padding-left:10px; padding-right:10px;"><a href="%%urlpost%%"><font color="#FFFFFF"> + </font></a></span>
</div><br><br>
</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>JOURNAL TITLE</title>
<style>
<!--
body {
background-color: #EFEFEF;
background-image:url(http://i.imgur.com/VXms8.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:right bottom;
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: 5pt;
text-transform: uppercase;
letter-spacing: 0px;
font-family: arial;
}

table table .index
{background-color: transparent;
 line-height: 4pt;
 font-size: 5pt;
 font-family: arial;
 color: #000000;
 text-align: center;
 padding: 0px;
 width: auto;
 font-weight:bold;
 text-transform:uppercase;
}

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:absolute;
top: 25px !important;
left: 100px !important;
width: 220px !important;
height: auto;
padding: 0px;
visibility: visible;
z-index:1;
background-color: transparent; }

html>body #sidebar{
position:absolute;
top: 25px !important;
left: 100px !important;
width: 500px !important;
height: auto;
padding: 0px;
visibility: visible;
z-index:1;
background-color: transparent; }

#sidebar img{display:inline; }

/*YOUR SIDEBAR*/
#sidebar2{
position:fixed !important;
_position:absolute;
top: 70px !important;
left: 80px !important;
width: 290px !important;
height: auto;
padding: 20px;
visibility: visible;
z-index:1;
background-color: transparent;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt; }

html>body #sidebar2{
position:fixed !important;
_position:absolute;
top: 70px !important;
left: 80px !important;
width: 290px !important;
height: auto;
padding: 20px;
visibility: visible;
z-index:1;
background-color: transparent;
font-family: times new roman;
font-size: 6pt;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 9pt;; }

#sidebar2 img{display:inline; }

#footer{
float: right;
text-align:center;
width: 20%;
padding: 4px;
font-size: 8pt;
line-height: 10px;
font-family: helvetica;
letter-spacing: 1px; 
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:40px !important; margin-top:40px; }

.content {background-color: transparent; }

table { 
width: 630px; 
margin-left: 440px !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: #000000; text-decoration:none}
a:hover{color:#FFFFFF; background-color: #000000}

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

p table table td.caption, .head{ 
line-height:25px; 
text-transform: uppercase; 
font-size: 14pt; 
letter-spacing: 1px;
font-family: georgia, serif; }

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

.entrybox	
{background-color: #FFFFFF;
box-shadow: 2px 3px 10px 0px #777777;
 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/2nsE7.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/2uEuI.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;
}

.title {color:#000000;font-family:georgia;text-transform: uppercase; font-size: 18pt; letter-spacing: 1px;border-bottom:1px dotted #000;}
.subtitle {color:#707070;font-weight:bold;font-family:Trebuchet MS;font-size: 6pt; text-transform: uppercase; letter-spacing: 2px; line-height:320%}

.navlist a:link, .navlist a:visited, .navlist a:active {font-family: courier new; display: block; width:250px; border-bottom:1px dotted #000000; 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; color: #000000;}
.navlist a:hover {color:#FFFFFF}

.userpic{
    width:110px;
    height:110px;
    padding:4px;
    display:block;
    box-shadow: 2px 3px 10px 0px #777777;
    background-color:#ffffff;
    align:right;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

.userpic:hover{margin-left:30px;}
-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
<span style="background-color:#000000; padding: 4px; padding-left:10px; padding-right:10px;"><a href="%%urlread%%"><font color="#FFFFFF">%%messagecount%%</font></a></span>  <span style="background-color:#000000; padding: 4px; padding-left:10px; padding-right:10px;"><a href="%%urlpost%%"><font color="#FFFFFF"> + </font></a></span>
</div><br><br>
</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>8

CALENDAR_WEBSITE<=

<div id="sidebar">
<font class="title">journal title</font><br>
<font class="subtitle">journal subtitle goes here</font>
</div>

<div> </div>
<=CALENDAR_WEBSITE

LASTN_WEBSITE<=

<div id="sidebar">
<font class="title">journal title</font><br>
<font class="subtitle">journal subtitle goes here</font>
</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 journal title and subtitle with your own
6. Replace the icons with your own
7. Save

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

(Post a new comment)

	galleon 2012-08-23 03:10 pm UTC (link)
	Holy crap this is amazing! (Reply to this) (Thread)

	chestnutgallery 2012-08-24 05:07 am UTC (link)
	Thank you lovey! :D (Reply to this) (Parent)

	injudgement 2012-08-31 08:29 am UTC (link)
	STOP IT RIGHT NOW THESE ARE TOO AMAZING (Reply to this)

	faeriedust 2012-09-03 04:16 pm UTC (link)
	Using over here. I love the moving boxes. (Reply to this) (Thread)

	faeriedust 2012-09-05 02:19 am UTC (link)
	Also changed up my CDJ. It's still a work in progress. But I really, really <3 it. (Reply to this) (Parent) (Thread)

	chestnutgallery 2012-09-05 03:06 am UTC (link)
	AKDHSAKDJKASLJDSD OMFG BB I LOVE HOW YOU TURNED IT INTO A CHARACTER LIST!! YOU MTHR FCKN GENIUS!!! (Reply to this) (Parent) (Thread)

	figmented 2012-09-05 03:09 am UTC (link)
	I'm trying to make it like High Definition and the masks that you did. I WILL FIGURE IT OUT. I WILL. (Reply to this) (Parent)

	godplaysdice 2012-09-28 01:29 am UTC (link)
	Gonna be using this layout on a different journal! It's gorgeous. Also using another layout of yours on this jouranl. You are amazing. Is it okay if I replace the french on this layout with english? Thought I'd ask before just doing. (Reply to this) (Thread)

	chestnutgallery 2012-09-28 01:54 am UTC (link)
	Thank you so much!! :D I'm glad you like them! And you can absolutely replace the text. I have absolutely no restrictions on customizing any of my layouts. Feel free to edit anything you like. (Reply to this) (Parent) (Thread)

	godplaysdice 2012-09-28 01:58 am UTC (link)
	Thanks! :D But seriously, your layouts are always so clean and just... really elegant. I'm probably going to snag another one for a new character I'm making soon, too! (Reply to this) (Parent)

	muthaucka 2012-10-20 10:24 am UTC (link)
	Love this so much! Using it for this journal! (Reply to this)

	woosh 2013-01-15 04:05 pm UTC (link)
	This is absolutely gorgeous! Using right away :3 (Reply to this)

	a_silvertongue 2013-03-17 02:34 am UTC (link)
	Using it here; but if I wanted to show the icons per entry, how do I go about it? (Reply to this)

	assectation 2013-05-16 07:13 pm UTC (link)
	Um. I LOVE THIS THING AND USE IT OVER AT scatterbrained, however, is there anyway to make a matching tags page? (Reply to this)

	exploited 2013-06-24 11:46 am UTC (link)
	using @ isleen with modifications xo (Reply to this)

	piano 2013-07-04 04:30 pm UTC (link)
	taking. your layouts are simply gorgeous. (Reply to this)

	laceandflora 2013-11-07 12:25 am UTC (link)
	Modified it quite a bit to use it over at dickens (though it's only here atm as I'm still fixing up a couple of things) <33 (Reply to this)

	airgiodslv 2013-11-28 10:37 am UTC (link)
	I just wanted to drop you a line and say that I absolutely adore your layouts, and am so grateful that someone with your artistic and coding talent is out there for those of us less gifted. Thank you so much for sharing the results of your labors. (Reply to this)

	higgsie 2013-12-22 12:35 am UTC (link)
	Snagged...beautiful layout, easy steps to input, it was great! (Reply to this)

	silvercrowns 2015-03-19 01:18 am UTC (link)
	Using it here (with a...idk flower design for the pictures) and at camereta with circles. NOT THAT I DIDN'T LOVE THE COOL BOXES, but I've got some obsessive love with rounded edges lately. THANK YOU SO MUCH (Reply to this)

	bloodknight 2016-01-29 04:45 am UTC (link)
	Hi, i don't know if you're still around, but I can't seem to get the bottom navigation (where you go back in your entries) to center under the entry boxes, do you have any idea how I can do that? I've tried adding text-align: center; to .meta, table table .index, and table table table td.meta but none of them seem to do it and I'm at a loss. Thank you in advance! (Reply to this)

	oddities1991 2016-05-24 06:33 am UTC (link)
	using this as my CDJ! Thank you! (Reply to this)

	packanimals 2016-07-14 08:48 pm UTC (link)
	Love it! Using it for this journal. Thanks! <3 (Reply to this)