mintyapple: Flexible Squares: I Saw Eternity the Other Night

The Steadfast Tin Soldier (

adventures) wrote in

mintyapple,
@ 2008-07-18 12:23:00

Entry tags:

style: flexible squares

Flexible Squares: I Saw Eternity the Other Night
Flexible Squares
Best view: 1024x768, but a small screen should be okay
Works with ads + navbar
Works in Firefox + IE (IE doesn't show the opacity changes)
Crediting adventures or peterpansflight? Please do!

screenshot | live preview

Instructions:
1. Go to lj customize and put "Flexible Squares" in the search bar.
2. Select one of the themes.
3. Go to Customize your theme and to "Sidebar."
4. Set only the blurb and link list to "yes." Set everything else to "No." However, If you have a really long link list you might want to set it to "No." You can add the links in the blurb with html.
5. Go to "Custom CSS" Set all drop-down menus to No.
5. Copy and paste the codes below into the box labeled "custom stylesheet."
6. Press "Save" and everything should be fine! I tried a few new things with this, so if you have any problems, please let me know!

Codes:

/* 
This layout is made by adventures.livejournal.com.
*/

BODY{
		background-color:#102544;
                background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/stars-1.jpg);
                background-repeat: repeat-all;
		text-align: center;
		color: #fff;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		margin-left:0; margin-right:0; margin-top:20px; margin-bottom:5px
		}

b, strong { 
color: #28446E; 
}

i, s, u {
color: #446596;
}
	a, a:link, a:visited {
		color:#006ED6;
		text-decoration: none;
		}
	
	a:hover {
		color: #FFF;
		text-decoration: none;
		}
	
	blockquote {
	    	font-size: 11px;
                font-color: #000;
                border: 1px solid #B5BAC1;
                background-color: #D8DCE2;
                padding: 7px 7px 7px 7px;
		}

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

#content
	{  	
		width: 670px;
		margin-left: auto; margin-right: auto;				
		background-color: transparent;
		border-width: 0px;
		border-style: solid;
		border-color:  #fff;
		padding: 10px;
	}

#maincontent {	 	
		margin-top: 5px;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		background-color: transparent;
		color: #8D8D8D;
		border-style: solid;
		border-color: #fff;
		border-width: 0px;
		margin-left: 0px;
                width: 100%;
		text-align: left;
		}
	
	#sidebar {
		padding-top: 15px;
		margin-top: 0px;
		background-color: #1D375F;
                opacity: .8;
	  	font-size: 11px;
		font-family: "Verdana", sans-serif;
                line-height: 15px;
	  	color: #fff;
		width: 100%;
		float: center;
		text-align: left;
		}

#header {		
		width: 100%;
		padding: 10px 0px 10px 0px;
                opacity: .8;
		margin-left: 0px;
		text-align: left;
		font-size: 11px;
                font-family: courier new;
		font-weight: bold;
		letter-spacing: 2px;	
		background-color: transparent;
		color: #fff;	
		}

#footer {			
		width: 100%;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 1px;
		background-color:  transparent;
                padding: 15px;
		color: #fff;
		border-color: #fff;
		border-width: 0px;
		border-style: dotted;
		z-index: 100;
		clear: both;
		}
		
	/* header -- links to views; title of journal; subtitle of journal */	
	
	div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
		color: #586F92;
                font-size: 11px;
                background-color: #1D375F;
		padding: 10px;
	}
	
	div#header a:hover, div#footer a:hover {
                color: #FFF;
  	        padding: 10px;
		text-decoration: none;
	}	
	
	ul.navheader 
		{	
		padding: 0px;	
		margin: 0px;
		}
	
	ul.navheader li  {
		display: inline;			
		padding: 0 3px 0 3px;
		}

.title	{
                display: none;
		font-family: "Verdana", sans-serif;
		font-size: 15px;
		color: #FFF5F4;		
		font-weight: normal;
		letter-spacing: 4px;
		line-height: 200%;
		top: 10px;
		}
	
	.subtitle{
                display: none;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		color: #FFF5F4;
		font-weight: bold;
		letter-spacing: 4px;		
		top: 10px;
		}

/* sidebar */ 	
			
	div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
		color:#FFF;
                letter-spacing: 2px;
                text-transform: uppercase;
                font-size: 12px;
                font-weight: bold;
                text-decoration: none;
	}
	
	div#sidebar a:hover {
		color: #436597;
                font-size: 12px;
		text-decoration: none;
                letter-spacing: 2px;
	}
	
	.defaultuserpic {
                display: none;
		text-align: center;
		}
	
	.sbarheader {
		padding: 0px 5px 0px 5px;
		background-color: #fff;
               
		}
	
	.sbarbody {
		padding: 0px 5px 0px 5px;	
		}
	
	.sbarbody2 {
		padding: 0 15px 0 15px;
	}
			
	table.calendar {
		margin-right: auto;
		margin-left: auto;
		}
		
	.sbarcalendar {
                display: none;
		border-color: #D5DCE1;
		background-color:#F6F7F8;
		color: #A7A7A7;
		border-width: 1px;
		border-style: solid;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 12px;
                padding: 5px;
		}
	
	.sbarcalendarposts {
                display: none;
		border-color:  #EFEFEF;
		color: #A40C0C;
		border-width: 1px;
		border-style: solid;
		background-color:#FFF;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 12px;
                padding: 5px;
		}
		
	ul.sbarlist
	{
		padding-left: 0px;
		margin-left: 0px;
		list-style: none;
	}

li.sbaritem
	{       
                margin-top:3px;
                margin-left: 30px;
                margin-right: 30px;
		padding-left: 0px;
                padding-top: 7px;
                padding-bottom: 7px;
                font-size: 12px;
                line-height: 10px;
                background-color: #0A1F3E;
		list-style: none;
                line-height: 10px;
                text-align: center;
	}

li.sbartitle
	{
		padding-left: 15px;
		list-style: none;		
                font-family: century gothic;
                font-weight: bold;
                font-size: 15px;
                letter-spacing: 6px;
                color: #000; 
		padding-bottom: 7px;
		padding-top: 7px;
	}

/* maincontent */	
	
	.subcontent {		
	}
		
	.entry	{
		margin: 0px 0px 0px 0px;
		padding: 20px;
                line-height: 20px;
                opacity: .9;
		background-color: #FFF;
		color: #8D8D8D;
		font: arial, tahoma, arial, sans-serif;
		font-size: 11px;
		text-align: left;
                border-left: 0px solid #FBAA01;
		}
		
	.entry ul li
		{
		padding-left: 5px;
		margin-left: 15px;
		}
		
    .entry ol li
		{
		padding-left: 5px;
		margin-left: 15px;
		}

.userpic {
		position: relative;
		float: right;
		background-color: #fff;
		padding: 0px;
		margin-right: 0px;
                margin-left: 5px;
                margin-top: 5px;
		z-index: 15;
		border-width: 5px;
		border-color: #FFF;
		border-style: solid;
		}
		
	.userpicfriends {
		position: relative;
		float: right;
		background-color: #fff;
		padding: 0px;
		margin-right: 0px;
                margin-left: 5px;
                margin-top: 5px;
		z-index: 15;
		border-width: 5px;
		border-color: #FFF;
		border-style: solid;
                text-align: center;
                font-size: 9px;
		}
		
	.date {		
		line-height: 16px;		
		top: 5px;
		color: #485A74;
		font-family: "Georgia", serif;
		font-size: 10px;
                text-align: right;
		}
	
	.subject {	
                text-align: center;		
		padding: 3px;
		color: #436597;
		font-family: century gothic;
		font-size: 16px;
                font-weight: bold;
                letter-spacing: 4px;
               }
		
	.subject a, .subject a:link, .subject a:visited {
		color: #000;
		}
	
	.subject a:hover {
		color: #004875;
		}

.datesubject {				
		background-color: transparent;
                padding: 3px;
		}
		
	.currents, .currentmood, .current music {
		font-family: "Verdana", sans-serif;
                padding-bottom: 5px;
		font-size: 11px;
                width: 98%;	
		}

.comments {
                border-top: 1px dashed #808080;
		font-family: century gothic;
		font-size: 15px;
		text-align: right;
		background-color: #fff;
		padding: 5px;
		position: justify;
                padding-top: 15px;
		
		}
		
	div.comments a, div.comments a:link, div.comments a:visited{
		color:#485A74;
		text-decoration: none;;
	}
	
	div.comments a:hover {
		color: #FFF;
                text-decoration: none;
                
	}

/* maincontent --  entry, reply pages */	
	
	.datesubjectcomment {				
			background-color: #FFF;
		padding: 5px;
			margin-top: 20px;
			}	
		
	.userpiccomment {
		position: relative;
		top: -30px;
		left: 0px;
		padding: 0px;
		margin: 10px 10px -20px 10px;
		z-index: 15;
		float: left;
		border-width: 5px;
		border-color: #FFF;
		border-style: solid;
		}
		
	.box {
		border: none;
		margin: 0px 0px 0px 0px;
		padding: 10px;
		clear: left;
		}

input, textarea {
		background-color:#fff;
		color: #999595;
		}
		
	textarea.textbox  {
      	width: 100% !important;
   		}
	
	.reply	{
		position: relative;
		margin: 20px 30px 10px 30px;
		padding: 25px 10px 10px 10px;
		text-align: left;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		line-height: 125%;
		background-color:#fff;
		color:#999595;
		}
		
	.replytosubject {
		font-weight: bold;
		}
			
		
	.commentreply {
		position: relative;
		margin: 10px;
		font-size: 11px;
		font-family: "Verdana", sans-serif;
		color: #5E5E5E;
		}
		
	.commentbox {
		opacity: .9;
		border-color: #fff; 
		border-width: 1px; 
		border-style: solid; 
		padding: 10px; 
		margin: 10px; 
		background-color: #fff;
		}
		
	.datesubjectcomment a:link, .datesubjectcomment a:visited {
		color: #000;
		}
		
	.datesubjectcomment a:hover {
		color: #000;
		}
	
	.commentboxpartial {
                opacity: .9;
		border-color: #fff; 
		border-width: 1px; 
		border-style: solid; 
		padding: 10px; 
		margin: 10px; 
		background-color: #fff;
		}

.commentinfo {
		background-color:#FFF; 
		margin-top: 10px; 
		width: 100%;
		}
			
		
	/* maincontent -- year/achive pages */
		
	ul.year {
		text-align: center;
		padding-bottom: 40px;
		}
	
	ul.year li {
		display: inline;		
		}
	
	table.yeartable {
		margin-left: auto;
		margin-right: auto;
		}
	
	table.yeartable td.yeardate, table.yeartable td.yearday {
		border-width: 1px;
		border-style: solid;
		border-color: #fff;
		}
	
	table.yeartable td.yearday {
		background-color: #fff;
		text-align: center;
		}
	
	td.yearmonth {
		border-style: none;
		}
	
		
	/* footer */
		
	ul.navfooter{
		padding: 0px;	
		margin: 0px;
		}
	
	ul.navfooter li  {
		display: inline;	
		margin: 0 5px 0 5px;
		}

.clearfoot {		
		clear: both;
		}
		
		
	/* misc  */
				
	.clear {		
		height: 5px;
		}
		
	.skiplinks {
		text-align: center;
		}

.separator{
		/* for formatting separators between entries */
		height: 5px;
	}

.ljtags {
color: #28446E;
font-weight: bold;
margin-top: 15px;
}

img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://i32.photobucket.com/albums/d14/dustfingerlove/locked.png);
}

img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://i32.photobucket.com/albums/d14/dustfingerlove/locked.png);
}

img[src="http://p-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://i32.photobucket.com/albums/d14/dustfingerlove/locked.png);
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/useri.png);
padding: 14px 7px 2px 2px !important;
}

Want to add a header?:

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 0px;
height: 0px;
background-image: url('imageurlhere');
background-repeat: no-repeat;

Paste this to the bottom of the codes. Make sure to put the width and height in.

(14 comments) - (Post a new comment)

	yourhighness 2008-07-18 04:30 pm UTC (link)
	This is gorgeous! (Reply to this)

	scintillula 2008-07-18 04:37 pm UTC (link)
	this is sooo sweet! (Reply to this)

	slamcity 2008-07-18 04:39 pm UTC (link)
	this is so cute (Reply to this)

	amourningrain 2008-07-18 04:51 pm UTC (link)
	Wow! This is really cute!!! If I ever stop loving smooth sailing so much, I might give this one a try. :) You do really great work by the way! (Reply to this)

	oh_mcgee 2008-07-18 06:23 pm UTC (link)
	This? Is so pretty. mems (Reply to this)

	iznightowl 2008-07-18 07:23 pm UTC (link)
	AHH I LUV THIS. Memming! :) (Reply to this)

	laerwen 2008-07-18 07:46 pm UTC (link)
	Ohhhh my goodness, that is adorable. EEEEEE-VUH! (Reply to this)

	meliossa 2008-07-19 01:46 am UTC (link)
	this is so pretty :) (Reply to this)

	hypergrafia 2008-07-19 02:18 am UTC (link)
	beautiful. i might use, will definitely credit when i do so. :) keep up the great work!!! ^_^ (Reply to this)

	teh_haley 2008-07-19 09:04 am UTC (link)
	ohhh, starry layout! ♥ (Reply to this)

	merae 2008-07-21 11:45 pm UTC (link)
	Sweet and simple. Added to memories for future use, thank you. :) (Reply to this)

	not_yourstar 2008-07-27 08:40 am UTC (link)
	Using. :) (Reply to this)

	moderns 2008-08-09 10:42 pm UTC (link)
	using, thanks :) (Reply to this)

	layourscene 2008-10-05 08:15 am UTC (link)
	Most definitely using, thank you =D (Reply to this)

(14 comments) - (Post a new comment)

Username:		Create an Account Forgot your login or password? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

About

Help

Get Involved

Legal

Store

LJ Labs