layoutlounge | 34. Torn Page Scrapbook

Entry tags:

34. Torn Page Scrapbook

Layout Style: S2 Flexible Squares
Features: Sidebar, Scrolling Tags, Custom Page Summary
Layout Width: 800px
Requested By:

Click to see larger image

/*------------------------------------------------------------------
S2 Flexible Squares
Layout by sireesanwar @ http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
--------------------------------------------------------------------*/

body{
	background-color: #513a3a;
        background-image: url(BACKGROUND IMAGE);
        background-repeat: repeat;
	color: #513a3a;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
        margin: 10px 0 20px 0;
	}

a, a:link, a:visited {
	color: #008797;
	text-decoration: none;
	}

a:hover {
	color: #A5A5A5;
	text-decoration: none;
	}

blockquote {
		padding: 18px; 
		border: 1px solid #CECECE; 
		color: #4e4e4e;
		font-size: 12px;
		line-height: 13px;
		font-family: "Trebuchet ms", arial, verdana, sans-serif;
		background: #f7f6f0;
		text-align: justify;
		}
b, i, s, u, em, strong
{
color: #006772;
}

p, td{
	}
	
code, kbd, pre, tt {
		font-family: "monospace";
	}
	
ul.ljtaglist {
	text-align: left;
	padding-left: 5px;
}

/*-----------------------
SECTION: In General
-------------------------*/
	
#content {  	
	width: 800px;	
	margin-left: auto; 
        margin-right: auto;  
	text-align: justify;
        padding: 0px;
        background-color: #f7f6f0;
	border-color: #cccccc;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
}

#maincontent {
	width: 565px;
	float: right;
	margin: 0px 0px 0px 10px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	color: #888888;
	text-align: center;
	}

.subcontent {
        background-color: #f7f6f0;
        width: 547px;
	border-top: 0px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-left: 0px solid #cccccc;
	border-right: 0px solid #cccccc;
}

/*-----------------------
SECTION: Header
-----------------------*/

#header {		
	position: relative;
	line-height: 25px;
	text-align: center;
        color: #f7f6f0;
	font-family: "trebuchet ms";
	font-size: 15px;
	width: 800px;
	padding: 0px 0px 10px 0px;
	margin-bottom: 15px;
	text-align: center;
	letter-spacing: 1px;
        text-transform: normal;
	background-color: #008797;
	background-image: url(NAVBAR IMAGE);
	 background-position: center;         
         background-repeat: no-repeat;
	border-left: 0px solid #008797;
	border-right: 0px solid #008797;
}

div#header a, div#header a:link, div#header a:visited, div#footer a,

div#header a, div#header a:link, div#header a:visited, div#header a:active {
	padding: 5px;
	font-family: "trebuchet ms";
	font-size: 15px;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	color: #f7f6f0;
	text-align: center;
}

div#header a:hover {
	padding: 5px;
	color: #008797;
	background-color: #D7D3CD;
	border-bottom: 0px solid;
}

ul.navheader 
	{	
	padding: 10px 0px 0px 0px;
        background-color: transparent !important;	
	margin: 0px;
	}

ul.navheader li  {
	display: inline;
	padding: 10px 0px 0px 0px;
        background-color: transparent !important;
	margin: 0 2px;
	}
	
.title, .subtitle {
		display: none;
		}

/*-----------------------
SECTION: Footer
-----------------------*/

#footer {			
	width: 100%;
	margin: 0px;
	text-align: center;
	font-family: "georgia";
	font-size: 10px;
	color: #888888;
	z-index: 100;
	}

div#footer a {
	padding: 5px;
	font-family: "trebuchet ms";
	font-size: 15px;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	color: #008797;
	text-align: center;
}

div#footer a:hover {
	padding: 5px;
	color: #D7D3CD;
	background-color: #008797;
	border-bottom: 0px solid;
}

ul.navfooter{
	padding: 0px;	
	margin: 0px;
	}

ul.navfooter li  {
	display: inline;	
	margin: 0 5px 0 5px;
	}

.clearfoot {		
	clear: both;
	}

/*-----------------------
SECTION: Sidebar
-------------------------*/

#sidebar {
	padding: 0px 0 10px 0; 
        background-color: #f7f6f0;
	margin-left: 5px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 11px;
	color: #513a3a;
	width: 215px;
	float: left;
	text-align: left;
        text-transform: normal;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	}

#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link,

.sbarcalendarposts

a:visited{
	padding: 0px;
	text-align: center;
	}

#sidebar .sbarcalendarposts a:hover {
	padding: 0px;
	text-align: center;
	}
		
#sidebar_tags .sbarcontent {
         height: 300px;
         overflow:auto;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
	color: #68635f;
	display: block;
	padding: 1px 1px 1px 0px;
	text-decoration: none;
		}

div#sidebar a:hover {
	padding: 1px 1px 1px 0px;
	color: #A5A5A5;
}

.defaultuserpic {
	text-align: center;
	}

.sbarheader {
	padding: 0px 5px 0px 5px;
	}

.sbarbody {
	padding: 0px 5px 0px 5px;
	}

.sbarbody2 {
	padding: 0 15px 0 15px;
	}
		
table.calendar {
	margin-right: auto;
	margin-left: auto;
	}
	
.sbarcalendar {
	padding: 1px;
	border: 1px solid #cccccc;
	text-align: center;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 9px;
	}

.sbarcalendarposts {
	padding: 1px;
        border: 1px solid #cccccc;
	background-color: #f7f6f0;
	text-align: center;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 9px;
	}
	
ul.sbarlist {
	padding-left: 0px;
	margin-left: 0px;		
        list-style: none;
	}

li.sbaritem {
	padding-left: 0px;
        border-bottom: 0px solid #cccccc;
	list-style: none;
        }

li.sbartitle {
	padding: 3px 5px 3px 5px;
	margin: 10px 0 10px 0;
        background-color: #57524e;
	list-style: none;
	text-align: center;
	color: #f7f6f0;
        border-top: 0px solid #cccccc;
        text-transform: normal;
	font-family: "Pea Alesa";
	font-size: 12px;
		}

ul.tagList {width: 100%;}
    .tagBox {
      height: 300px;
      overflow-x: hidden;
      overflow-y: scroll; 
      scrollbar-arrow-color: #008797;
      scrollbar-base-color: #f7f6f0;
      scrollbar-face-color: #f7f6f0;
      scrollbar-highlight-color: #008797;
      scrollbar-darkshadow-color: #cccccc;
      scrollbar-shadow-color: #cccccc;
}

#sidebar_summary li.sbaritem {
	color: #cccccc;
	border: 1px solid #cccccc;
	background-color: #f7f6f0;
	padding: 3px;
	text-transform: normal;
	margin: 3px 0px;
	}

#sidebar_summary li.sbaritem a {
	text-decoration: none;
	display: inline !important;
	color: #68635f;
	border: 0px solid #008797 !important;
	background-color: transparent !important;
	}

#sidebar_summary li.sbaritem a: hover{
	text-decoration: none;
	color: #007ba7;
	border: 0px solid #cccccc;
	background-color: transparent !important;
	}

/*-----------------------
SECTION: Entries
-------------------------*/

.entry	{
        padding: 10px;
	margin: 0px;
	color: #513a3a;
	font-family: "arial";
	font-size: 12px;
	text-align: justify;
	}
	
hr {
	color: transparent;
	height: 1px;
	border-style : none; 
	border-bottom: 2px solid #cccccc;
	}

.entry ul li, ol li, li {
	padding-left: 5px;
	margin-left: 5px;
	list-style: normal;
	list-style-position: outside;
	}

.userpic {
	background-color: #f7f6f0 !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	z-index: 15;
        color: #cccccc !important;
	border: 1px #e6d6b7 solid;
	}

.userpicfriends {
	background-color: #f7f6f0 !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 10px;
	text-align: center;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	z-index: 15;
	border: 1px #e6d6b7 solid;
	}

.userpicfriends a font {
	color: #513a3a;
}

.date {
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
        color: #513a3a;
	top: 5px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	}

.subject {
        background-color: #f7f6f0;
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 5px;
        padding-left: 10px;
	color: #006772;
	font-family: "CAC Shishoni Brush", arial;
	font-size: 30px;
	line-height: 35px;
	text-transform: normal;
        text-decoration: underline;
	border-bottom: 0px solid #cccccc;
	border-right: 0px solid #cccccc;
	}
	
.subject a, .subject a:link, .subject a:visited {
	color: #57524e;
	}

.subject a:hover {
	color: #A5A5A5;
	}

.datesubject {
	background-color: transparent;
	padding: 0px;
	text-align: left;
	border-left: 0px solid #cccccc;
	border-right: 0px solid #cccccc;
	border-top: 0px solid #cccccc;
        }

span.ljuser a b {
	padding: 2px 0 2px 0;
	color: #008797;
	font-weight: bold;
	}

span.ljuser a:hover b {
	padding-top: 2px;

padding-bottom: 2px;
	color: #A5A5A5;
	font-weight: lighter;
	}

/*-----------------------
SECTION: Currents, tags, comment links
-------------------------*/

.ljtags {
	margin-top: 5px;
	color: #7a7071;
	font-weight: lighter;
	text-transform: lowercase;
        margin: 15px 0px 0px 0px;
        padding: 5px 0px 0px 17px;
        background: url() no-repeat center left;
	}
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong

{
	font-family: "Trebuchet ms", arial;
	font-size: 12px;
	color: #cccccc;
	font-weight: lighter;
	text-transform: lowercase;
	}

.currents, .currentmood, .currentmusic, .currentlocation {
	font-family: "Trebuchet ms", arial;
	font-size: 12px;
	color: #cccccc;
	font-weight: lighter;
	text-transform: lowercase;
	}

.ljtags a, .ljtags a:link, .ljtags a:visited {
	font-family: "Trebuchet ms", arial;
	font-size: 12px;
	color: #008797;
	text-transform: lowercase;
	font-weight: lighter;
	}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
	font-family: "Trebuchet ms", arial;
	font-size: 12px;
	color: #008797;
	text-transform: lowercase;
	font-weight: lighter;
	}
	
.currentlocation a:hover, .ljtags a:hover {
	font-family: "Trebuchet ms", arial;
	font-size: 12px;
	color: #A5A5A5;
	font-weight: lighter;
	text-transform: lowercase;
	}

.comments {
	font-family: "Trebuchet ms";
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 5px 5px 5px 5px;
	position: relative;
	clear: center;
	margin-top: 5px;
	text-transform: lowercase;
	border-bottom: 0px #e6d6b7 solid;
	}
	
div.comments a, div.comments a:link, div.comments a:visited{
	color: #008797;
}

div.comments a:hover {
	color: #A5A5A5;
	text-decoration: none;
}

/*-----------------------
SECTION: Comments Page
-------------------------*/

.box {
	padding: 10px;
	margin-top: 0px;
	text-align: left;
        clear:right;
	}

form div.box {
	text-align:center;
}

.skiplinks {
	text-transform: normal;
	text-align: center;
	padding: 10px 0 10px 0;
	}

.datesubjectcomment {
	margin-top: 20px;
	text-align: right;
	padding: 5px;
        background-color: #f7f6f0;
        color: #513a3a;
	}	
	
.userpiccomment {
	background-color: #f7f6f0 !important;
	position: relative;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 20px 10px -20px 10px;
	z-index: 15;
	float: right;
	border: 1px #e6d6b7 solid;
	color: #513a3a;
	}

div#content input,
div#content textarea,
div#content select {
	color: #513a3a;
	border: 1px solid #cccccc;
	background-color:#f7f6f0;
	}
	
textarea.textbox  {
	width: 100% !important;
	}

.reply	{
	position: relative;
	margin: 20px 30px 10px 30px;
	padding: 25px 10px 10px 10px;
	text-align: left;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	line-height: 125%;
	color: #513a3a;
	}
	
.replytosubject {
	color: #513a3a;
	font-weight: bold;
	text-transform: normal;
        padding: 5px;
        background-color: #f7f6f0;
	}

.replytoposter {
        background-color: #f7f6f0;
	color: #008797;
	text-transform: normal;
        padding: 5px;
}

.commentreply {
        text-align: justify;
	position: relative;
	margin: 10px;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 12px;
	color: #513a3a;
	}
	
.commentbox {
	padding: 5px;
	margin: 10px;
	text-align: left;
        background-color: #f7f6f0;
	border: 1px solid #cccccc;
	}
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {
	color: #008797;
	}
	
.datesubjectcomment a:hover {
	color: #A5A5A5;
	}

.commentboxpartial {
	padding: 10px; 
	margin: 10px; 
        background-color: #f7f6f0;
	}

.commentinfo {
	margin-top: 10px; 
	width: 100%;
	}

/*-----------------------
SECTION: Year/Archive Page
-------------------------*/

ul.year {
	text-align: center;
	padding: 20px 0 20px 0;
	}

ul.year li {
	display: inline;		
	}

table.yeartable {
	margin-left: auto;
	margin-right: auto;
	}

table.yeartable td.yeardate, table.yeartable td.yearday {
	border: 1px solid #cccccc;
	color: #cccccc;
	}

table.yeartable td.yearday {
	text-align: center;
	color: #cccccc;
	}

td.yearmonth {
	color: #cccccc;
	border-style: none;
	}

/*-----------------------
SECTION: Tags Page
-------------------------*/

ul.ljtaglist {
	color: #cccccc;
	font-family: "Trebuchet ms", arial, verdana, sans-serif;
	font-size: 10pt;
	padding-left: 12px;
	padding: 8px;
	}

ul.ljtaglist li  {
	list-style: none;
	}

/*-----------------------
SECTION: Tiny Icons
-------------------------*/

.currentlocation
       {
       background: url() no-repeat left center;
       padding: 2px 0px 0px 17px;
       }

.currentmood 
       {
       background: url() no-repeat left center;
       padding: 2px 0px 0px 17px;
       }

.currentmusic 
       {
       background: url() no-repeat left center;
       padding: 2px 0px 0px 17px;
       }

/*-----------------------
SECTION: Mics
-------------------------*/

.clear {
	height: 1px;
	font-size: 0.01px;
	}
	
#lj_controlstrip td {
	font-family: "georgia" !important;
	font-size: 11px;
	background-color: #908e8e !important;
	border: 0px solid #008797;
	}

#lj_controlstrip a, .lj_controlstrip a:link, .lj_controlstrip a:visited, {
	font-family: "georgia" !important;
	font-size: 11px;
	color: #e6d6b7 !important;
	text-transform: lowercase;
	}

.headerimage {
          position: relative;
	border-color: #cccccc;
	border-style: solid;
	border-width: 0px;
	 width: 800px;
	 height: 178px;
         padding-left: 0px;
         padding-right: 0x;
         padding-bottom: 0px;
         padding-top: 0px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 1px;
         background-color: transparent!important;
	 background-image: url(HEADER IMAGE);
	 background-position: center;         
         background-repeat: no-repeat;
            }

.separator {
          height: 20px;
         }

Header: 800 x 178

Nav Bar (Header) Background: 800 x 46

Background Image:
Photobucket

Fonts Used:
CAC Shishoni Brush
Pea Alesa

See the Font Tutorial if you need help adding these fonts to your computer system.

Check out Using Layouts on the sidebar for any extra assistance.
Please direct people to

layout_lounge or

graffitigraphic.

Flat | Top-Level Comments Only

Pretty.

I'm glad you like it.

Love it and using. ;)

One question, though. Is it possible to set the tags and currents directly under each other, so there's no blank line between each?

I apologize for my crappy explanation skills.

Nope. I understand you perfectly! Here we go. The above coding should reflect those changes.

Awesome, thanks!

You are very welcome!

Love it! Using, with credit! x

Glad you like. Enjoy!

Using, have credited in my profile!

Thanks!

Hello =) I love this theme, and installed it on my journal, but my tags and the rest of the left sidebar aren't showing up =( Any idea as to what I did wrong?

I'm guessing but I would say you need to go into the sidebar setting and turn them on.

The below link can help
http://community.livejournal.com/layout_lounge/15965.html

That did work-- Thanks a bunch =) Only, now the text links in my header are all wonky :( Could I possible ask for one more hint? XD

Sure what do you want them to look like?

Do you want them to be like this comms? Give me some ideas and I can change that bit of coding for you.

Yeah, I was hoping it would look like the comm's, please =)

replace the below sections of the coding (at beginning of Header section) with the below coding. You will have to put in the image for the navbar again.

Edited 2010-03-01 23:51 (UTC)

Hmm, well that made the text correct (thank you =) but now it's in a list and there's a gap in the header and argh, I'm so bad at this, I'm sorry :(((( I fail.

I noticed it did look like you were using the layout code from above. That might help.

It is a list because you removed the below from the coding. Add it after the stuff you've just added.

Edited 2010-03-02 00:07 (UTC)

Yay, there it goes! I'm really happy with it, I love teal/turquoise XD.

Thank you so much again!! Your patience is quite admirable! And I gave you credit =)

I'm glad you like it.

I used this layout as a template(?), not sure what you call it, to make my own layout.
I changed most of the colors, and the images too.
even though i changed most of the things, i still left the "Please do not remove this section" there . (:

Uwah, it was so much work, It was my first time doing something like this so i messed up all the time, it took me hours to do it, and i'm not even sure if it looks alright XD
(lol, "cmd(or ctrl)+F" comes in handy in these kinds of situations. i used it to find the color codes that needed to be changed ect. :D )

Thank you very much. <3

Love this layout! Using and crediting at [Bad username or site: @ livejournal.com]

Great! Thanks for commenting. Also, I love your icon!

thank you for this layout! using and crediting in my profile)
hope you don't mind for a little changes I did..

No problem. Enjoy!

I want to use this layout in my community but I want to have the userpic to show in the sidebar. is that possible?

Totally.

Check out this tutorial (http://layout-lounge.livejournal.com/15965.html) on how to make that happen.

Hello again.
I'm using this layout in my community.
Now that LJ is changing some things I think it has messed up the layout.
You can see how here: http://you-and-jin.livejournal.com/
I wonder if you could have any fix for that.
Thanks in advance. :)

Wow. Great question. Let me see what I can come up with.

Try this

Got to your coding and copy these sections over what you have:

This worked for me but let me know either way.

Tried but it didn't work for me.

Let me mess with some stuff.

Okay I'm actually stumped. I'm not having this problem at all when I copy the layout into

workshop_rees. I have to wonder if there is some bit of coding in the first post there (that is going astray) that is causing the issue.

Maybe an extra ?

Ok. I'll gotta take a look at the coding and maybe try with the original with those changes added.
Thanks for the help. :D

Well. I'm not giving up. I've asked someone for help and we'll see what they say.

I think it is the "[MOD] Merry Christmas" post doing it. Something about the coding. When I copied it to my journal things went haywire.

Try editing that post. Going to the HTML. Erase everything and replace it with the below.

<center><img src="http://image.blingee.com/images19/content/output/000/000/000/796/752696046_1027318.gif" /></center>
Wishing you all a very Merry <strike>Christmas</strike> Jinsmas! Hope you have a fab time and don't get sick with all the eating you'll be doing! ♥

Also wanted to point out that our <a href="http://twitter.com/Youand_jin" rel="nofollow">Youand_Jin</a> twitter account is much more active now, with us constantly tweeting news as we get it, some of which does not make it to the community. So give us a follow or do check it out from time to time in order to keep yourself up to date with news etc.

<lj-cut text="Jin JFC pic and xmas message">A new picture of Jin up on one of the boards in JFC. <strike>asdfghjkl love love love</strike>

<a href="http://pics.livejournal.com/rupsana/pic/000ptkwh/"><img alt="" height="417" src="http://pics.livejournal.com/rupsana/pic/000ptkwh" style="border-width: 0pt; border-style: solid;" width="600" /></a>
(c)ktpopcorn

And finally, a Christmas message from the man himself.

<a href="http://pics.livejournal.com/rupsana/pic/000ps1s9/"><img alt="" height="450" src="http://pics.livejournal.com/rupsana/pic/000ps1s9" style="border-width: 0pt; border-style: solid;" width="600" /></a>
(c)ktpopcorn

Please remember to credit when reposting the picture.

Happy Holidays ♥</lj-cut>

Then click save and see if that works.

Thank you~! I'll try that out and will let you know if it helps. :)

IT WORKED! The comm is all fine now!
Thank you so much for taking time help with this! :)

That is fantastic. Merry Christmas!

Merry Christmas to you, too!

Using for

romantiics. :)

Cool. Enjoy.

Flat | Top-Level Comments Only

34. Torn Page Scrapbook

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Thank you very much.

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject