Layout #25 → [Flexi] Back In Time

Holy cow...a layout update? You better believe it! I've been really inspired by "blogs" lately and I think it shows.

TITLE :: Back In Time
STYLE :: S2 Flexible Squares
ACCOUNT TYPES :: Paid, Plus, and Free

LIVE VIEW

Details & Notes:
The layout is best viewed in Mozilla Firefox. I recommend that your ad placement be set for 'between entries' -- when the ads are placed on the sidebar, they extend the layout which can cause visual impairment. I also included the CSS for custom tiny icons. Instead of LJ's default 'locked' icon or the golden friends group icon, you can substitute your own tiny icons. Just remember that the first two paddings -- padding: 16px 16px 0px 0px; -- are the HEIGHT and WIDTH of the icon. Looking for a great place to find tiny icons? Definitely check out DeviantArt!

INSTALLATION INSTRUCTIONS. PLEASE READ THEM.

/*  	 Title: 'Back in Time' 			*/
/*	 Created/Modified: June 2012            */
/*	 S2 Layout: Flexible Squares	        */
/*	 Account Types: Paid or Free	        */
/*	 Made by barubaron.livejournal.com	*/
/*	 DO NOT CLAIM AS YOUR OWN !!     	*/

/* SPONSORED ACCOUNTS, IT IS RECOMMENDED 
TO HAVE YOUR AD PLACEMENT SET FOR BETWEEN ENTRIES. */

/* CONTENT, BACKGROUND STUFF */

body {
        background-color: #FFFFFF;
        text-align: justify;
        color: #969696;
	letter-spacing: 0px;
        font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 12px;
	padding: 0px;
        margin: 0px 0 40px 0;
	line-height: 150%;
	border-top: 10px #abe743 solid;
        }

a, a:link, a:visited {
        color: #87d205;
	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        text-decoration: none;
        }

a:hover {
	cursor: help;
        color: #D3D3D3;
        text-decoration: none;
        }

blockquote {
        font-size: 12px;
	background-color: #f8f8f8;
	padding: 16px 16px 16px 16px;
        }

code, kbd, pre, tt, {
        font-family: Arial;
	font-color: #969696;
        }

i, b {
	font-color: #969696;
	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
	}

#content {
        width: 60%;
        margin-left: auto; 
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
        background-color: #FFFFFF;
        padding: 20px 20px 0px 20px;
        }

#maincontent {
        padding: 10px 10px 10px 10px;
        margin: 0px 280px 0px 20px;
	border-top: 0px #ececec dashed;
        }

#sidebar {
        padding: 10px 10px 10px 5px;
        margin: 10px 0px 0px 0px;
        background-color: #transparent;
        font-size: 12px;
	font-family:  Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        color: #969696;
        width: 240px;
        float: right;
        text-align: left;
        }

#header {
	height 100px;
        padding: 10px 10px 30px 5px;
        margin: 0px 0px 0px 0px;
        text-align: left;
        font-style: none;
	font-family:  Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 12px;
	text-transform: lowercase;
        letter-spacing: 0px;
        background-color: #FFFFFF;
	border-bottom: #e3e3e3 0px dashed;
        color: #FFFFFF;
        }

#footer {
        padding: 20px 15px 15px 15px;
        text-align: center;
	font-style: none;
	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 12px;
    text-transform: lowercase;
        font-weight: light;
	margin: 2px 0px 0px 0px;
        letter-spacing: 0px;
        background-color: #transparent;
        color: #888888;
        z-index: 100;
        clear: both;
	width: auto;
        }

/* HEADER STUFF - TITLE, SUBTITLE */

div#header a, div#header a:link, div#header a:visited {
        padding: 10px 20px 10px 20px;
	margin: 0px;
	background-color: #FFFFFF;
	color: #a2a2a2;
	text-transform: uppercase;
	font-family: Georgia, serif;
	font-weight: bold;
	border-right: 0px #FFFFFF solid;
        }

div#header a:hover {
        padding: 10px 20px 10px 20px;
	margin: 0px;
	background-color: #transparent;
	color: #a2a2a2;
	text-transform: uppercase;
	font-family: Georgia, serif;
	font-weight: bold;
	border: 1px #eaeaea dashed;
        }

div#header li.view { 
	margin: 0px;
        padding: 10px 20px 10px 20px;
	background-color: #FFFFFF;
	color: #a2a2a2;
	text-transform: uppercase;
	font-family: Georgia, serif;
	font-weight: bold;
	border-right: 0px #FFFFFF solid;
	}

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

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

.title {
	font-family: Georgia, serif;
	font-weight: bold;
	font-style: italic;
	font-size: 40px;
	color: #abe743;
	padding: 40px 0px 40px 20px;
	}

.subtitle{
	display: none;
        }

/* SIDEBAR STUFF */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
        color: #87d205;
	text-transform: lowercase;
	padding: 5px 5px 0px 5px;
        }

div#sidebar a:hover {
        color: #585858;
	text-transform: lowercase;
        text-decoration: none;
	padding: 5px 5px 0px 5px;
        }

.defaultuserpic {
        text-align: center;
    padding: 10px;
        }

.defaultuserpic img {
	width: 80px;
	height: 80px;
        text-align: center;
    padding: 5px;
	border: 1px solid #efefef;
        }
    .sbarheader {
        padding: 0px 5px 0px 5px;
        }

.sbarbody {
	display: block;
        padding: 0px 0px 0px 0px;
        }

.sbarbody2 {
        padding: 0 0px 0 0px;
 }

#sidebar_summary li.sbaritem {
        margin: 0 10px;
        padding: 3px 0;
        border-bottom: 1px #FFFFFF dashed;
	border-top: 1px #FFFFFF dashed;
	border-left: 0px;
	border-right: 0px;
        }

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

.sbarcalendar {
        border: #efefef 1px solid;
        text-align: center;
	font-family:  Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 10px;
	padding: 5px;
        }

.sbarcalendarposts {
        background-color: #e3e3e3;
        text-align: center;
	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 10px;
	padding-top: 6px;
        }

ul.sbarlist {
	display: block;
        padding-left: 0px;
        margin-left: 0px;
        list-style: none;
        }

li.sbaritem {
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 5px;
	list-style: none;
	border-bottom: 1px dashed #e3e3e3;
	background: url('http://i.imgur.com/sHxRC.gif') no-repeat left center;
	}

li.sbaritem:hover {
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 5px;
	list-style: none;
	border-bottom: 1px dashed #e3e3e3;
	background: url('http://i.imgur.com/sHxRC.gif') no-repeat left center;
        }

li.sbartitle {  
color: #838383;
    text-align: left;
        margin: 0px 0px 0px 0px;
        padding: 10px 10px 5px 5px;
	font-family: Georgia, serif;
	font-weight: bold;
	font-size: 20px;
    text-transform: capitalize;
        letter-spacing: 0px;
    border-bottom: 0px solid #e3e3e3;
        background-color: #transparent;
        }

/* MAINCONTENT STUFF */

.subcontent {
        padding: 5px 10px 5px 0px;
        margin: 0px 0px 0px 0px;
        font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        background-color: #transparent;
        color: #969696;
	margin-left: auto;
        text-align: justify;
	border-left: 0px #FFFFFF solid;
	border-bottom: 0px #EFEFEF solid;
        }

.entry    {
        margin: 0px 5px 5px 0px;
        padding: 20px 10px 20px 0px;
        background-color: #transparent;
        color: #969696;
        font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        text-align: justify;
        border-bottom: 0px;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
        border-color: #3ABBC0;
        border-style: dashed;
        }

.entry ul li {
        padding-left: 5px;
        margin-left: 16px;
        }

.entry ol li {
        padding-left: 5px;
        margin-left: 16px;
        }

.userpic {
        position: relative;
        float: left;
       background-color: #transparent;
	border: 1px #eaeaea dashed;
        padding: 10px;
        margin: 10px 10px 20px -100px;
        z-index: 15;
        }

.userpicfriends {
        position: relative;
       background-color: #transparent !important;
        float: left;
	border: 1px #eaeaea dashed;
        padding: 10px;
        margin: 10px 10px 20px -100px;
        text-align: center;
        font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
	color: #87d205;
        font-size: 9px;
        z-index: 15;
        }

div.userpicfriends a, div.userpicfriends a:link, div.userpicfriends a:visited{
	color: #AEC6C9 !important;
        font-size: 9px;
	padding: 0px;
	}

.userpic img, .userpicfriends img {
	height: 60px;
	width: 60px;
	}

.date {
        margin: 0px 5px 5px 5px;
	padding: 8px 5px 0px 0px;
	text-align: left;
	text-transform: uppercase;
	line-height: 110%;
	top: 5px;
        color: #DFDFDF;
	font-style: none;
        font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 10px;
        }

.subject {        
	margin: -10px 0px 10px 0px;
	padding: 5px;
	text-align: left;
        color: #838383;
        font-family: Georgia, serif;
	font-weight: bold;
	font-size: 20px;
	text-transform: capitalize;
	font-style: none;
        }

.subject a, .subject a:link, .subject a:visited {
        color: #838383;
        font-family: Georgia, serif;
	font-weight: bold;
	}

.subject a:hover {
        color: #838383;
        font-family: Georgia, serif;
	font-weight: bold;
        }

.datesubject {
        background-color: #FFFFFF;
        padding: 10px 0px 0px 0px;
	margin: -10px -10px -10px -5px;
	border-bottom: 1px #eaeaea solid;
        }

.currents {
	display: none;
	text-align: left;
	text-transform: lowercase;
        font-family: "Arial", sans-serif;
        font-size: 9px;
	border-top: 0px #ECECEC solid;
	border-bottom: 0px #ECECEC solid;
	padding: 10px 0px 10px 0px;
	}

.currents strong, .currentmood strong, .currentmusic strong,

.ljtags strong {
	font-weight: lighter;
	text-transform: lowercase;
        font-family: "Arial", sans-serif;
        font-size: 9px;
	}

.currentmood img {
	float: right;
	margin: -40px 0px 0px 0px;
	padding: 5px;
	}

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

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

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

.ljtags {
	display: none;
	text-align: lef;
	font-weight: none;
	text-transform: lowercase;
        	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 9px;
	margin: 10px 0px -43px 0px;
	padding: 20px 0px 0px 0px;
	background:#transparent;
	background: url() no-repeat left center;
	}

ul.ljtaglist{
	background-color: #FFFFFF;
	list-style: none;
	padding: 10px 10px 10px 10px;
	width: auto;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	}

.comments {
        font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 16px;
	color: #eaeaea;
        letter-spacing: 1px;
        text-align: right;
	text-transform: lowercase;
        background-color: #transparent !important;
        padding: 10px 10px 10px 10px;
	margin: 0px 0px -25px 0px;
	top: 0px;
        position: relative;
        border-bottom: 0px;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-style: solid;
        border-color: #eaeaea;
        }

div.comments a, div.comments a:link, div.comments a:visited{
        color: #838383;
        background-color: #transparent;
        padding: 10px 10px 10px 10px;
	margin: 0px -10px 0px -10px;
        }

div.comments a:hover {
        color: #585858;
        background-color: #transparent;
        padding: 10px 10px 10px 10px;
	margin: 0px -10px 0px -10px;
        }

/* REPLY, ENTRY STUFF */

.datesubjectcomment {
        background-color: #FFFFFF;
        padding: 5px;
	margin: 0px;
	color: #969696;
	border-bottom: 1px #E9E9E9 dashed;
        }

.userpiccomment {
        position: relative;
        background-color: #FFFFFF;
        top: auto;
        left: auto;
        padding: 10px;
        margin: -15px 5px 0px -15px;
        z-index: 15;
        float: left;
        }

.box {
        margin: 5px 0px 5px 0px;
	background-color: #FFFFFF;
        padding: 10px;
        clear: right !important;
        }

input, textarea {
        background-color: #FFFFFF;
        color: #969696;
	border: 1px #DFDFDF solid;
        }

textarea.textbox  {
        width: 100% !important;
        }

.reply  {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        font-size: 10px;
        line-height: 115%;
        background-color: #FFFFFF;
        color: #969696;
        }

.replytosubject {
        font-weight: bold;

margin: 10px;	
	padding: 10px;
        }

.commentreply {
	padding: 10px;

position: relative;
        margin: 5px;
        font-size: 10px;
        	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
        color: #969696;
        }

.commentbox {
	border: 1px #E9E9E9 solid !important;
        padding: 10px;
        margin: 5px 0px 5px 0px;
        background-color: #FFFFFF;
	background-image: url('');
	background-repeat: repeat-y;
        }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #87d205;
        }

.datesubjectcomment a:hover {
        color: #87d205;
        }

.commentboxpartial {
        border-color: #E9E9E9 !important;
	border-top: 1px; 
	border-left: 1px;
	border-right: 1px;
	border-bottom: 1px;
        border-style: solid;
        padding: 5px;
        margin: 5px;
        background-color: #242424;
        }

.commentinfo {
        background-color: #242424;
        margin-top: 5px;
        width: 100%;
        }

.skiplinks {
        background-color: #FFFFFF;
        text-align: center;
	text-transform: lowercase;
	padding: 5px;
        }

/* YEAR & ARCHIVE STUFF */

ul.year {
        text-align: center;
        padding-bottom: 40px;
        }

ul.year li {
        display: inline;
        }

table.yeartable {
        margin-left: auto;
        margin-right: auto;
        background-color: #FFFFFF;
        }

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

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

td.yearmonth {
        border-style: none;
        }

/* FOOTER STUFF */

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

ul.navfooter li  {
        display: inline;
        margin: 0 0px 0 0px;
        }
   
    div#footer a, div#footer a:link, div#footer a:visited {
	padding: 0px 5px 0px 5px;
	margin: 0px;        
        background-color: #transparent;
	color: #888888;
	text-transform: uppercase;
	font-family: Georgia, serif;
	font-weight: bold;
    	}

div#footer a:hover {
        padding: 0px 5px 0px 5px;
	margin: 0px;
        background-color: #transparent;
	color: #969696;
	text-transform: uppercase;
	font-family: Georgia, serif;
	font-weight: bold;
    	}

.clearfoot {
	display: none;
        clear: both;
        }

#footer .viewing { 
        color: #969696;
        font-size: 12px;
	text-transform: uppercase;
	font-family: Georgia, serif;
	font-weight: bold;
	}

/* MISC STUFF, OUT OF PLACE  */

H2{
	color: #AEC6C9;
	background-color: #transparent;
	text-align: left;
        padding: 10px;
	margin: 0px 0px -10px 0px;
	text-transform: lowercase;
	font-style: none;
        font-weight: light;
        	font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
	font-size: 25px;
	}

.clear {
        height: 16px;
        }

.separator{
        height: 2px;
    	}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
	width: 0;
	height: 0;
	padding: 13px 11px 0px 0px !important;
	margin: 5px 5px 0 0;
	background: url("URL HERE");
	}

.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
	width: 0;
	height: 0;
	margin: 5px 5px 0 0;
	padding: 13px 11px 0px 0px !important;
	background: url("URL HERE");
	}

Frequently Asked Questions
F.A.Q. OFFICIAL POST

How do I add a header?
Take the following code:

.headerimage {
position: relative;
width: 500px;
height: 220px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
background-image: url("LINK TO YOUR PICTURE HERE");
background-repeat: no-repeat;
}

Modify the width and height to that of your image. Paste the modified code in the layout css. You'll need to upload your image to the Internet. I recommend using imgur.com or imageshack.us.

Can I edit the CSS (colors, images, ect)?
Yes, of course. Just make sure you still credit

barubaron.

Follow us:

Applications

COMPANY

PRODUCTS

COMMUNITY

CHOOSE LANGUAGE