InsaneJournal

Tweak says, "Wrong lever!"

Alex, the one who has no off switch (ex_pansexual773) wrote in rp_tutorials,
@ 2010-03-21 20:16:00

Entry tags:

layouts: journals

Image is of the Flexible Squares version of the layout

Type: Clean and Simple and Flexible Squares (LJ only

Clean and Simple

FRIENDS_OPT_ITEMS=>25

GLOBAL_HEAD<=

<!--

body {

background-color:#FF00FF;

font-family:sans-serif;

margin-top:300px;

margin-bottom:10px;

text-align:center;
background-image:url(http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/Taylor%20Momsen/taylorheader1.png);
background-repeat:no-repeat;
background-position:top;

}

table {

width: 500px;

border:none;

margin-left:auto;

margin-right:auto;

margin-top:5px;

}

#topbar {

background: #FFCCFF;

padding-right:10px;

color: #000000;

height: ;

width: ;
margin-top:10px;

}

#topbar h1 {

margin-top: 15px;

margin-bottom: 0;

text-align: right;

font-size: 1.5em;

font-family: georgia;

line-height: .8em;

}

#topbar h2 {

margin-top: 0;

margin-bottom: 5px;

text-align: center;

font-size: 1.25em;

display:none;

}

#navbar {

background: #FFCCFF;

width: 20%;

border-right:2px solid #FF00FF;

}

#navbar ul {

list-style: none;

padding:0;

margin: 5px;

}

#navbar ul li {

margin: 2px;

font-size:11px;

background-color:#FFCCFF;

text-align:justify;

}

#navbar a{

background: #FFCCFF;

color: #000000;

text-decoration: bold;

font-size:12px;

}

#navbar a:hover {

text-decoration: underline;

color:#FFFFFF;

}

#mainstuff {

width: 80%;

background-color: #FFFFFF;

font-size:12px;

line-height:14px;

}

#mainstuff a{

background: none;

color: #FF00FF;

text-decoration: none;

font-size:12px;

}

#userpic {

text-align: center;

margin: 10px;

}

#userpic img {

border: 2px solid white ;

background: none;

position: relative;

top: 6px;

}

#entries {

margin: 5px;

}

#range {

padding:6px;

text-align:center;

color:#000000;

display:none;

}

.day {

border-top:1px solid #FF00FF;

clear: both;

background-color:#FFCCFF;

}

.day h3 {

border-bottom: 1px solid #FFCCFF;

padding: 1px;

margin: 0;

font-size: 1.1em;

text-align: right;

color:#FF00FF;

}

address {

text-align: center;

font-style: normal;

font-size: 0.95em;

display:none;

}

.entrytext {

padding: 0px;

text-align: justify;

}

.entry {

background-color:#FFFFFF;

}

.entrytext p, .entrytext ul, .entrytext ol, .entrytext table {

margin-top: 0.5em;

margin-bottom: 0.5em;

}

.entryheading {

display:block;

margin:0;

text-align:left;

color:#FFCCFF;

background:#FFFFFF;

}

.timestamp, .altposter, .subject{

font-size:1.1em;

}

.altposter a {

text-decoration: underline;

background-color:#FF00FF;

}

.altposter img {

border: 2px solid;

background-color:#FFFFFF;

}

.talklinks {

font-size: .8em;

text-transform: lowercase;

text-align: center;

margin-bottom: 15px;

clear: right;

padding:0px;

background:#FFCCFF;

margin-top:5px;

border-top:1px solid white;

border-bottom:1px solid #FF00FF;

}

.talklinks a{

text-decoration:bold;

color: #000000;

}

.currents{

font-size:.8em;

color:#FFCCFF;

}

.header{

position:absolute;

top:16px;

left:50%;

margin-left:-300px;

width:500px;

height:10px ;

}

table table{

border:0;

width:75%;

background:#FFCCFF;

}

table table td{

border-right:1px solid #FFCCFF;

border-bottom:1px solid #FFCCFF;

border-top:1px solid #fff;

border-left:1px solid #fff;

}

-->

</style>

<=GLOBAL_HEAD

FRIENDS_OPT_ITEMS=>25

FRIENDS_WEBSITE<=

<li><a href="URL">Link</a></li>
<li><a href="URL">Link</a></li>
<li><a href="URL">Link</a> </li>
<li><a href=URL>Link</a></i>
<li><a href=http://www.insanejournal.com/update.bml>Update</a></li>
<=FRIENDS_WEBSITE

LASTN_OPT_ITEMS=>25

CALENDAR_WEBSITE<=
<li><a href="URL">Link</a></li>
<li><a href="URL">Link</a></li>
<li><a href="URL">Link</a> </li>
<li><a href=URL>Link</a></i>
<li><a href=http://www.insanejournal.com/update.bml>Update</a></li>

<=CALENDAR_WEBSITE

LASTN_OPT_ITEMS=>25

LASTN_WEBSITE<=

<li><a href="URL">Link</a></li>
<li><a href="URL">Link</a></li>
<li><a href="URL">Link</a> </li>
<li><a href=URL>Link</a></li>
<li><a href=http://www.insanejournal.com/update.bml>Update</a></li>
<=LASTN_WEBSITE

Flexible Squares

/* Cleaned CSS: */

/*---------------------------------------------------
This is the original stylesheet for the S2 style Flexible Squares with the elements
arranged in a hopefully clearer order.

You can find a full guide on the single css definitions, including exlanations and illustrations
at http://cartonage.livejournal.com.

Hope this helps! =)
-----------------------------------------------------*/

/*This layout was made by Alex aka pansexual on Insanejournal and moonsdreaming on LJ. It is posted at http://layouts-for-you.insanejournal.com and
this credit must be kept*/

body	{
		background-color: #FFCCFF;
		text-align: center;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		margin: 20px 0 20px 0;
		}

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

a:hover {
		color: #CC3366
		text-decoration: underline;
		}

p, td, blockquote {
	    	font-size: 11px;
		}

code, kbd, pre, tt {
	    	font-family: monospace;
		}

/*---------------------------------------------------------------------
   General page alignment and width
------------------------------------------------------------------------*/

#content
	{
		width: 470px;
		margin-left: auto; margin-right: auto;
		background-color: #FFCCFF;
		border-width: 1px;
		border-style: solid;
		border-color: #999999;
		padding: 15px;
	}

#maincontent {
		margin-top: 15px;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		background-color: #FFCCFF;
		color: #000000;
		border-style: solid;
		border-color: #999999;
		border-width: 1px;
		margin-right: 180px;
		text-align: left;
		}

#sidebar {

padding-top: 15px;
		margin-top: 15px;
		background-color:#FFCCFF;
		border-color: #999999;
		border-width: 1px;
		border-style: solid;
	  	font-size: 11px;
		font-family: "Verdana", sans-serif;
	  	color: #000000;
		width: 160px;
		float: right;
		text-align: left;
		}

/*-----------------------------------------------------------------------------
   Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
		width: 100%;
		padding: 10px 0px 20px 0px;
		margin: 0px;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 2px;
		border-style: solid;
		border-color: #999999;
		border-width: 1px;
		background-color: #FFCCFF;
		color: #000000;
		}

.headerimage {
    position: relative;
    width:  500px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto;
    margin-bottom: 0px; 
    background-image: url("http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/Taylor%20Momsen/taylorheader1.png"); /* Header image URL */
    background-repeat: no-repeat;
}

/*look  and color of links (also partly for footer)*/
	div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
		color: #FF00FF;
	}

div#header a:hover, div#footer a:hover {
		color: #CC3366;
		text-decoration: none;
	}

/*title and subtitle*/
	.title	{
		font-family: "Verdana", sans-serif;
		font-size: 14px;
		font-weight: normal;
		line-height: 200%;
		top: 10px;
		}

.subtitle{
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		font-weight: normal;
		top: 10px;
		}

/*-----------------------------------------------------------------------------
   Header - top navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

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

ul.navheader li  {
		display: inline;
		padding: 0 3px 0 3px;
		}

/*-----------------------------------------------------------------------------
   Entry stuff
------------------------------------------------------------------------*/

.subcontent {
	}

.entry	{
		margin: 0px 10px 10px 30px;
		padding: 10px;
		background-color: #FFCCFF;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		text-align: left;
		border-width: 1px;
		border-color: #919bad;
		border-style: solid;
		}

.userpic {
		position: relative;
		float: left;
		background-color: #FFCCFF;
		padding: 5px;
		margin: 10px;
		z-index: 15;
		border-width: 1px;
		border-color: #919bad;
		border-style: solid;
		}

.date {
		line-height: 200%;
		top: 5px;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		}

Live Example:

sweethonesty

princessclara

princessroyal (Clean and Simple)
Headers: version one version two

1. Click on customize journal
2. select s1
3. Choose Clean and Simple
4. Click customer colours
5. Click Custom Options
6. Copy the above code into the box
7 PLEASE CREDIT either

pansexual or

layouts_for_you
8. DO NOT HOTLINK THE IMAGES PLEASE
9. Comments are necessary but appreciated. I would love to know people are using my layouts

1. Go to customzie journal
2. In the search box type in Flexible Squares
3. Apply one of the Flexible Squares layouts
4. Click Customize
5. Scroll down the page until you see Custom CSS in the side bar and click that
6. Chose No where it says Use layout's stylesheet(s)
7. Place the above code in the Custom Stylesheet text box and press save changes (button to the right)
8. Please credit

pansexual or

layouts_for_you @ insanejournal or

moonsdreaming @ livejournal please!

	ex_pansexual773 2010-03-21 11:15 pm UTC (link)
	Thanks <3 :) (Reply to this) (Parent)