InsaneJournal

Tweak says, "You so care about me."

Ads by Project Wonderful! Your ad here, right now: $0

welcome to the chestnut gallery -- (chestnutgallery) wrote,
@ 2012-11-03 19:48:00

Entry tags:

header, sidebar

generator layout: pearl box

Live Preview:

pearlbox |

blackpearlbox

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

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

<!--
@import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext);
@import url(http://fonts.googleapis.com/css?family=Dosis);

.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 {
text-transform: uppercase;
letter-spacing: 0px;
font-weight: bold;
line-height: 5pt;
font-size: 5pt;
font-family: helvetica, arial;
color:#000;
}

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

.comments {
font-family: 'Dosis', sans-serif;
font-size: 6pt;
letter-spacing: 2px;
text-transform:uppercase;
padding-bottom:6px;
padding-right:10px;
color:#000;
}

p{
padding:0;
margin:0;
}

body{
background:#EAEAEA;
background-image: url(http://i.imgur.com/JfGpL.png);
background-attachment:fixed;
margin-top:80px;
}

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

table table { 
width: 670px; 
border:0;
margin-left:0px; 
}

table table table { 
width: auto; 
}

body, td, font, div, p {

}

table table .index
{background-color: transparent;
 line-height: 4pt;
 letter-spacing: 1pt;
 font-size: 0pt;
 font-weight: bold;
 font-family: arial;
 color: #000;
 padding: 0px;
 width: auto;
 text-transform: uppercase;
}

table, tr, td, .shadowed{
font-family: "Trebuchet MS",Geneva, sans-serif;
font-size: 8pt;
font-weight: normal;
letter-spacing: 0px;
color: #000000;
}

.entrybox	
{background:transparent;
margin-left: -230px;
 visibility: visible;}

.entrybox table{background:#FFF;padding-left:20px;padding-right:20px}

.entrybox td{}

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

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

.entrybox a.index font {
color: #000000;
line-height: 80%;
font-size: 5pt;
font-family: arial;
font-weight: bold;
text-transform: uppercase;
}

.entrybox a.index img{float:right;padding:8px;border: 1px solid #EEE;}

a {
color:#F99100;
text-decoration:none;
}
 
a:hover {
color:#7CD1D2;
text-decoration:none;
}

blockquote { padding:15px; text-align:justify; border: 1px solid #eeeeee; background-color:  #f7f7f7; color:#444444;margin:10px}

table.entrybox td.caption{
color:#433837; 
font-family: 'Lobster', arial, serif;
font-size: 14pt;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: lowercase; 
letter-spacing:-.1em;
}

#footer{
text-align:center;
width:15%;
float:right;
padding:4px;
font-family: 'Dosis', sans-serif;
font-size: 16pt;
letter-spacing: 2px;
background-color: #FFF;
color: #000;
margin-top:-10px;}

#header{
position:absolute;
background-image:url(http://i44.tinypic.com/30k94rn.png);
top:60px;
height:50px;
left: 50%;
margin-left:-450px;
width: 900px;
visibility:visible;
z-index: 2;
text-align:center;
}

#titleheader{
position:absolute;
background:transparent;
font-family: 'Lobster', arial, serif;
font-size: 24pt;
top:30px;
height:50px;
left: 50%;
margin-left:-445px;
width: 890px;
visibility:visible;
z-index: 2;
text-align:left;
text-transform:lowercase;
}

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

.sideheader {display:block;float:right;font-family: 'Lobster', arial, serif;font-size:10pt;color:#433837;text-transform:lowercase}

.blurb {display:block;width:180;text-align:justify;color:#000000;font-family: calibri;font-size: 8px;letter-spacing: 0px;text-transform:uppercase}

.navlist a:link, .navlist a:visited, .navlist a:active {font-family: arial;font-size:6pt; letter-spacing:1px; word-spacing: 3px;display: block; width:180px; 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;padding-top:2px;padding-bottom:2px;color: #F99100;background-image: url(http://i165.photobucket.com/albums/u49/silhuett/2jephzd.png);}
.navlist a:hover {color:#000000}

.navtablist a:link, .navtablist a:visited, .navtablist a:active {display:inline-block;float:right;width:80px;padding:6px;background:#FAD194;color:#000000;font-family: calibri;font-size: 8px;letter-spacing: 1px;float:right;text-align:center}
.navtablist a:hover {background:#7CD1D2;color:#433837;padding-top:10px}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-button:start:decrement
::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
::-webkit-scrollbar-track-piece{background-color:#fff;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#000000;-webkit-border-radius:px;}
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#000000;-webkit-border-radius:px;}
-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table><tr><td class="comments" colspan="2">
<div id="footer"><span class="foot"><a href="%%urlread%%">%%messagecount%% </a> | <a href="%%urlpost%%"> ❤ </a></span></div>
</td></tr>
<=FRIENDS_TALK_LINKS

FRIENDS_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background:#FFFFFF;
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div id="header"><center><span class="navtablist">
<a href="http://journalname.insanejournal.com/calendar">ARCHIVE</a>
<a href="http://journalname.insanejournal.com/friends">FRIENDS</a>
<a href="http://journalname.insanejournal.com/profile">PROFILE</a>
<a href="http://journalname.insanejournal.com/">RECENT</a>
</span></div>

<span class="sideheader">Blurb</span><br><br><span class="blurb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</span><br>

<span class="sideheader">Navigation</span><br><br><span class="navlist">
<a href="http://www.insanejournal.com/update.bml">UPDATE JOURNAL</a>
<a href="http://www.insanejournal.com/friends/add.bml?user=journalname">ADD JOURNAL</a>
<a href="http://journalname.insanejournal.com/tag">TAGS PAGE</a>
<a href="http://www.insanejournal.com/tools/memories.bml">MEMORIES</a>
</span><br><br>

<span class="sideheader">Links List</span><br><br><span class="navlist">
<a href="link url">YOUR LINK HERE</a>
<a href="link url">YOUR LINK HERE</a>
<a href="link url">YOUR LINK HERE</a>
<a href="link url">YOUR LINK HERE</a>
<a href="link url">YOUR LINK HERE</a>
</span></div>

<div></div>
<=FRIENDS_WEBSITE

LASTN_OPT_ITEMS=>10

CALENDAR_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background:#FFFFFF;
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div></div>
<=CALENDAR_WEBSITE

DAY_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background:#FFFFFF;
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div></div>
<=DAY_WEBSITE

LASTN_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background:#FFFFFF;
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div></div>
<=LASTN_WEBSITE

LASTN_TALK_LINKS<=
<table><tr><td class="comments" colspan="2">
<div id="footer"><span class="foot"><a href="%%urlread%%">%%messagecount%% </a> | <a href="%%urlpost%%"> ❤ </a></span></div>
</td></tr>
<=LASTN_TALK_LINKS

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 icon and gif with your own
7. Replace the journal title and blurb with your own
7. Save

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

DARK

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

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

<!--
@import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext);
@import url(http://fonts.googleapis.com/css?family=Dosis);

.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 {
text-transform: uppercase;
letter-spacing: 0px;
font-weight: bold;
line-height: 5pt;
font-size: 5pt;
font-family: helvetica, arial;
color:#000;
}

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

.comments {
font-family: 'Dosis', sans-serif;
font-size: 6pt;
letter-spacing: 2px;
text-transform:uppercase;
padding-bottom:6px;
padding-right:10px;
color:#000;
}

p{
padding:0;
margin:0;
}

body{
background:#EAEAEA;
background-image: url(http://i.imgur.com/vktR6.jpg);
background-attachment:fixed;
margin-top:80px;
}

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

table table { 
width: 670px; 
border:0;
margin-left:0px; 
}

table table table { 
width: auto; 
}

body, td, font, div, p {

}

table, tr, td, .shadowed{
font-family: "Trebuchet MS",Geneva, sans-serif;
font-size: 8pt;
font-weight: normal;
letter-spacing: 0px;
color: #C0C0C0;
}

.entrybox	
{background:transparent;
margin-left: -230px;
 visibility: visible;}

.entrybox table{background-color:#000000}
.entrybox table td {background-color:#000000;padding-left:20px;padding-right:20px}
.entrybox td{}

.entrybox a.index font {
color: #FFFFFF;
line-height: 80%;
font-size: 5pt;
font-family: arial;
font-weight: bold;
text-transform: uppercase;
}

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

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

.entrybox a.index img{
float:right;
}

a {
color:#A2876A;
text-decoration:none;
}
 
a:hover {
color:#7CD1D2;
text-decoration:none;
}

blockquote { padding:15px; text-align:justify; background-color: #000000; color:#aaaaaa;margin:10px}

table.entrybox td.caption{
color:#ffffff; 
background-color:#000000;
font-family: 'Lobster', arial, serif;
font-size: 14pt;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: lowercase; 
letter-spacing:-.1em;
}

#footer{
text-align:center;
width:15%;
float:right;
padding:4px;
font-family: 'Dosis', sans-serif;
font-size: 16pt;
letter-spacing: 2px;
background-color: transparent;
color: #AAAAAA;
margin-top:-10px;}

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

.sideheader {display:block;float:right;font-family: 'Lobster', arial, serif;font-size:10pt;color:#433837;text-transform:lowercase}

.blurb {display:block;width:180;text-align:justify;color:#AAAAAA;font-family: calibri;font-size: 8px;letter-spacing: 0px;text-transform:uppercase}

.navlist a:link, .navlist a:visited, .navlist a:active {font-family: arial;font-size:6pt; letter-spacing:1px; word-spacing: 3px;display: block; width:180px; border-bottom:1px dotted #AAAAAA; 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;padding-top:2px;padding-bottom:2px;color: #A2876A;background-color:#000000;}
.navlist a:hover {color:#000000}

.navtablist a:link, .navtablist a:visited, .navtablist a:active {display:inline-block;float:right;width:80px;padding:6px;background:#000000;color:#C0C0C0;font-family: calibri;font-size: 8px;letter-spacing: 1px;float:right;text-align:center}
.navtablist a:hover {background:#9E8366;color:#000000;padding-top:10px}

FRIENDS_TALK_LINKS<=
<table><tr><td class="comments" colspan="2">
<div id="footer"><span class="foot"><a href="%%urlread%%">%%messagecount%% </a> | <a href="%%urlpost%%"> ✖ </a></span></div>
</td></tr>
<=FRIENDS_TALK_LINKS

FRIENDS_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background-image:url(http://i.imgur.com/oAPlg.png);
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div></div>
<=FRIENDS_WEBSITE

LASTN_OPT_ITEMS=>10

CALENDAR_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background-image:url(http://i.imgur.com/oAPlg.png);
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div></div>
<=CALENDAR_WEBSITE

DAY_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background-image:url(http://i.imgur.com/oAPlg.png);
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div></div>
<=DAY_WEBSITE

LASTN_WEBSITE<=
<style type="text/css">
<!--
#sidebar{
position:absolute;
width:210px;
text-align:justify;
left:50%;
margin-left:232px;
top:110px;
visibility:visible;
color:#EAEAEA;
background-image:url(http://i.imgur.com/oAPlg.png);
padding-left: 4px;
padding-right: 4px;
padding-top:10px;
padding-bottom:10px;
}
#sidebar img{
margin:0;
padding:0;
background:none;
display: block;
}

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

<div id="titleheader">
your journal title goes here
</div>

<div></div>
<=LASTN_WEBSITE

(Post a new comment)

	ilikethequiet 2012-11-04 02:40 am UTC (link)
	These are gorgeous! Taking for a couple of my journals :D (Reply to this) (Thread)

	chestnutgallery 2012-11-07 02:39 am UTC (link)
	Thank you so much! I'm glad you like it! :D (Reply to this) (Parent)

	timefortacos 2012-11-06 10:19 am UTC (link)
	THIS IS AMAZING. AS ALWAYS! (Reply to this) (Thread)

	chestnutgallery 2012-11-07 02:36 am UTC (link)
	THANK YOU BBDOLL!! :D ♥♥♥ (Reply to this) (Parent)

	carriewheeler 2012-11-07 12:33 am UTC (link)
	Hi there, I'm wondering if you have any idea why this layout isn't working? I've got it set as s1 generator, no custom colours and have a website in my profile. I'm usually pretty decent at figuring stuff out but for the life of me just can't figure it out at the moment. If you have any ideas I'd appreciate it thanks :) (Reply to this) (Thread)

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

I took a peek at your source code and it looks like the code information for the header and side tables for the Most Recent Entries page is missing. I cross referenced it with your Friends Page, which looks fine and the code is there for the friends page but not for the recent entries page.

Double check your code and make sure that you have the LASTN_WEBSITE<= section of the code and that nothing in that section is broken. If it's all there you might want to try re-copying the code from the textbox again and starting over.

(Reply to this) (Parent) (Thread)

	carriewheeler 2012-11-07 02:40 am UTC (link)
	Thanks I ended up just c/p it all over and starting again. Seems to have worked now thanks though :) (Reply to this) (Parent)

	nativedove 2012-11-10 12:32 am UTC (link)
	What is the girl's name?? :D (Reply to this) (Thread)

	chestnutgallery 2012-11-11 02:51 am UTC (link)
	The girl in the gifs/icons is Elle Fanning! (Reply to this) (Parent)

	awatson 2012-11-13 06:53 pm UTC (link)
	I really love this, and I'm using it in this journal. On the friends page though, all the friends icons show up like this. Is there any way to change that so the icons appear either matching the icon in the sidebar with just a black border around them, or failing that just by themselves without any background color? (Reply to this)

	seregeturgun 2012-11-15 04:33 am UTC (link)
	This is gorgeous! Using it for this journal, thank you so much! (Reply to this)

	charmed_life 2013-02-16 08:47 pm UTC (link)
	Using at this journal! I haven't finished tweaking it yet though :) (Reply to this)

	darkenednight 2013-05-05 09:20 pm UTC (link)
	Taking the dark one for this journal, thank you =) (Reply to this)

	heartlikealion 2013-05-22 04:44 pm UTC (link)
	Just popping in to say that I'm various layouts (including this one) for my RP journals (including this one) and that you're amazing. Thank you so much for doing all of these. They're lovely and wonderful. (Reply to this)

	shining 2013-06-03 12:15 pm UTC (link)
	Thanks so much for this layout! I customized it at this journal and herbs and will be using it on many, many journals in the future! THANKS! (Reply to this)

	raquelita 2014-02-01 08:07 pm UTC (link)
	This is so beautiful! I customized it and used it on waltzing and may use it on more in the future because I like it so much! Thanks ♥ (Reply to this)

	lexie_ 2014-04-30 03:22 am UTC (link)
	<3 Using for this journal with a few tweaks. I can't seem to find how to change the purple behind the entries though? (Reply to this) (Thread)

	tiedtoanight 2014-10-22 12:49 pm UTC (link)
	/random - make sure on the Look & Feel bit, under custom colors, everything is BLANK like this - http://i.imgur.com/p8y8X.png I had this problem too, then realized I had some of the colors listed as #FFFFFF rather than deleting the color codes out completely. Once every color code was deleted, the purple bg went away. hope that helps. (Reply to this) (Parent)

Ads by Project Wonderful! Your ad here, right now: $0