life, love, and laughter - Post a comment

Previous | Memories | | Next

15 November 2010 @ 05:19 pm

Was bored at work and made a layout. It's a tad busy, but at least you can edit it by taking out the background, re-positioning it, or switching it for the header (and resize it).

Here's a preview:

*Note: After I posted, with the help of

athebeach_13, I got the background image to stretch. So, please check the live preview link for the most up-to-date version. I think it looks better now! (CSS coding is up-to-date as well.)

CSS code

/*-- 058: Make The Time (flexible squares) --*/
/*-- stylesheet by ravenclawbest @ visualwit for LJ --*/
/*-- customizations by crazyflirtca for LJ --*/
/*-- blockquote by nerak_rose for LJ --*/
/*-- please don't remove this header --*/

/*-- main --*/

BODY { 
		background-image: url('http://i107.photobucket.com/albums/m307/shli1117/My%20Artwork/WheatgrassResized-2.png') no-repeat fixed;
background-position: top center; 
		background-color: #301100;
		color: #46171e; 
		text-align: left;
		font-size: 11px;
		margin: auto; 
		font-family: tahoma, arial, sans-serif;
		}

#content {
		background-color: transparent;
		width: 650px;
		margin: auto;
		margin-top: 15px;
position: relative;
z-index: 1;
		}

.subcontent {
		background-color: #FFFFFF;
		-moz-border-radius-bottomleft: 20px;
		-webkit-border-radius-bottomleft: 20px;
		-moz-border-radius-bottomright: 20px;
		-webkit-border-radius-bottomright: 20px;
		}

.headerimage {
		width: 650px;
		height: 436px;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		background-image: url("http://i107.photobucket.com/albums/m307/shli1117/My%20Artwork/PaintedTreeHeader.png"); 
		background-repeat: repeat;
		}

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

a:hover {
		color: #ac896d;
		}

b, strong, u {
		color: #C0A878;
		}

.ljuser a b {
		color: #C09060;
		}

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

::-moz-selection { 
		background-color: #ac896d;
		color: #FFFFFF; 
		}

/*-- navigation --*/

#header {
		padding: 1px;
		text-align: right; 
		}

#footer {
		float: center;
		text-align: center; 
		clear: both;
		}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited  { 
		color: #ac896d;
		text-transform: lowercase;
		}

div#header a:hover, div#footer a:hover, div#header li.view { 
		color: #D9AB82;
		padding-top: 28px;
		text-transform: lowercase;
		}

div#footer li.viewing { 
		display: none;
		}

ul.navheader li, ul.navfooter li { 
		background-color: #FFFFFF;
		padding: 15px 25px 14px 25px;
		display: inline; 
		list-style: none; 
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius-bottomleft: 0px;
		-webkit-border-radius-bottomleft: 0px;
		-moz-border-radius-bottomright: 0px;
		-webkit-border-radius-bottomright: 0px;
		}

.clearfoot {
		clear: both;
		}

/*-- title --*/

.title {
		display: none;
		}

/*-- subtitle --*/

.subtitle {
		display: none;
		}

/*-- entries --*/

.entry {
		min-height: 150px;
		text-align: justify;
		padding: 15px;
		-moz-border-radius-bottomleft: 20px;
		-webkit-border-radius-bottomleft: 20px;
		-moz-border-radius-bottomright: 20px;
		-webkit-border-radius-bottomright: 20px;
		}

.entry img{
		max-width: 450px;
		}

.entry ul li {
		margin: 10px;
		padding: 0px;
		list-style: square;
		list-style-position: inside;
		}

.entry ol li {
		margin: 0px;
		padding: 0px;
		list-style-position: outside;
		list-style: decimal;
		}

.entry img{
		max-width: 480px;
		}

.datesubject {
		background-color: #FFFFFF;
		text-align: left;
		padding: 10px 10px 5px 10px;
		text-transform: lowercase;
		font-family: garamond, tahoma, arial, sans-serif;
		}

.date {
		color: #ac896d;
		font-size: 10px;
		}

.subject {
		font-size: 20px;
		color: #ac896d;
		}

div.subject a, div.subject a:link, div.subject a:visited {
		color: #C0A878;
		letter-spacing: 1px;
		}

blockquote {
	    	font-size: 11px;
		background-image:url('http://i58.photobucket.com/albums/g247/nerakrose/LJ/blockquotebg.png');
		max-width: 425px;
		padding: 15px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		}

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

/*-- currents --*/

.currents {
		background-color: transparent;
		text-transform: lowercase;
		}

.currents strong {
		color: #46171e;
		font-weight: normal;
		}

.currentlocation, .currentmood, .currentmusic, .currentgroup {
		text-align: left;
		color: #ad949b;
		}
						
		.ljtags { 
		color: #46171e;
		text-align: left;
		margin-top: 15px; 
		text-transform: lowercase;
		}

.ljtags a { 
		color: #ad949b;
		text-align: left;
		margin-top: 15px; 
		text-transform: lowercase;
		}

/*-- comments --*/

.comments {
		top: 5px;
		font-size: 17px;
		font-family: garamond, tahoma, arial, sans-serif;
		color: #cccccc;
		text-align: right;
		}

div.comments a, div.comments a:link, div.comments a:visited {
		text-align: left;
		color: #ac896d;
		text-transform: lowercase;
		}

div.comments a:hover {
		color: #ad949b;
		}

#qrform table { 
		border: 0px !important;
		}

/*-- sidebar --*/

#sidebar {
		display: none;
		background-color: #ad949b;
		margin-left: auto;
		float: right;
		width: 150px;
		color: #FFFFFF;
		text-align: justify;
		border: 0px #ac896d solid;
		padding: 10px;
		}

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

#sidebar a:hover {
		color: #ad949b;
		}

.defaultuserpic {
		display: none;
		text-align: center;
		border: 0px solid #FFEDB8;
		}

.defaultuserpic img{
		display: none;
		text-align: center;
		padding: 5px;
		border: 0px solid #FFEDB8;
		}

.sbarheader, .sbarbody{
		padding-top: 10px;
		}

.sbarbody2 {
		color: #FFFFFF;
		}

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

.sbarcalendar {
		padding: 2px;
		background-color: #FFFFFF;
		color: #ac896d;
		text-align: center;
		border: 0px solid #ac896d;
		}

.sbarcalendarposts {
		background-color: #ac896d;
		color: #FFFFFF;
		text-align: center;
		border: 0px solid #ac896d;
		}

.sbarcalendarposts:hover {
		background-color: #ac896d;
		color: #FFFFFF;
		}

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

li.sbaritem {
		background-color: #ac896d; 
		margin: 3px; 
		color: #FFFFFF;
		padding: 1px; 
		list-style: none; 
		list-style-position: inside;
		text-align: right;
		font-weight: normal;
		text-transform: none;
		}

li.sbartitle {
		display: none;
		color: #46171e;
		text-align: left;
		padding: 5px 0px 5px 0px;
		text-transform: lowercase;
		}

ul.ljtaglist li {
		margin: 0px;
		padding: 5px;
		list-style: none; 
		}

/*-- userpics --*/

.userpic, .userpicfriends {
		margin: 0px 0px 5px 0px; 
		text-align: center;
		position: relative;
		float: right;
		background-color: transparent 
!important;
		z-index: 15;
		color: #ac896d;
		padding: 5px;
		border: 0px #ac896d solid;
}

.userpicfriends font {
		color: #ac896d;
		text-transform: lowercase;
		text-align: center;
		}

.userpicfriends br {
		display: block;
		height: 0;
		}

.userpic img, .userpicfriends img {
		padding: 5px;
		max-width: 65px;
		max-height: 65px;
		background-color: #E0B48D;
		border: 0px #ac896d solid;
		}

/*-- tag page --*/

.ljtaglist { 
		list-style: square;
		margin: -1px 20px 0px 20px; 
		text-transform: lowercase;
		text-align: left; 
		background-color: #FFFFFF;
		-moz-border-radius-bottomleft: 20px;
		-webkit-border-radius-bottomleft: 20px;
		-moz-border-radius-bottomright: 20px;
		-webkit-border-radius-bottomright: 20px;
		}

.ljtaglist li {
		padding: 6px 3px 6px 20px; 
		color: #ac896d;
		}

H2 { 
		text-align: center;
		background-color: #FFFFFF;
		font-size: 11px; 
		font-weight: normal; 
		color: #ac896d;
		padding: 5px;
		text-transform: lowercase; 
		}

ul.ljtaglist {
		color: #46171e;
		padding: 8px 8px 8px 12px;
		text-align: left;
		margin-right: auto;
		margin-left: auto; 
		padding: 25px;
		}

ul.ljtaglist li{
		padding: 3px;
		margin: 2px;
		list-style: square;
		list-style-position: inside;
		}

/*-- archive --*/

ul.year {
		background-color: #FFFFFF;
		text-align: center;
		padding: 10px;
		}

ul.year li {
		color: #46171e;
		display: inline;
		padding: 0px 5px 0px 5px;
		border: 0px solid #46171e;
		}

table.yeartable {
		text-transform: lowercase; 
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		}

td.yearmonth {
		padding: 5px;
		background-color: #FFFFFF;
		color: #ad949b;
		border: 0px solid #ac896d;
		}

td.yeardate {
		padding: 5px;
		color: #46171e;
		background-color: #FFFFFF;
		border: 0px solid #ac896d;
		text-align: center;
		}

td.yeardate a {
		color: #ad949b;
		font-size: 15px;
		}

table.yeartable td.yearday {
		padding: 5px;
		background-color: #FFFFFF;
		text-align: center;
		text-transform: lowercase;
		border: 0px solid #46171e;
		color: #46171e;
		}

/*-- comments --*/

.clear {
		display: none;
		}

.skiplinks {
		background-color: #FFFFFF;
		text-transform: lowercase;
		text-align: center;
		color: #ad949b;
		padding: 10px;
		margin-bottom: 5px;
		border: 0px #ac896d solid;
		}

.skiplinks a {
		text-transform: lowercase;
		text-align: center;
		padding: 10px;
		color: #ac896d;
		margin: 3px;
		}

.datesubjectcomment {
		color: #E0B48D;
		padding: 5px;
		border-bottom: 1px #ac896d dotted;
		margin-bottom: 5px;
		}

.userpiccomment {
		padding: 15px;
		color: #FFFFFF;
		max-width: 55px;
		max-height: 55px;
		background-color: #ac896d;
		border: 0px #ac896d solid;
		margin: -25px 10px 0px -5px;
		z-index: 15;
		float: left;
		}

.box {
		padding: 15px;
		background-color: #FFFFFF;
		-moz-border-radius-bottomleft: 20px;
		-webkit-border-radius-bottomleft: 20px;
		-moz-border-radius-bottomright: 20px;
		-webkit-border-radius-bottomright: 20px;
		width: auto;
		clear: left;
		}

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

input {
		padding: 0px 10px 0px 10px;
		}

textarea.textbox {
		font-size: 15px;
		width: 95% !important;
		}

.reply{
		position: relative;
		margin: 5px;
		padding: 5px;
		text-align: left;
		line-height: 125%;
		}

.replytosubject {
		font-weight: bold;
		text-transform: lowercase;
		}

.commentreply {
		position: relative;
		padding: 10px 10px 20px 90px;
		}

.commentbox {
		padding: 15px 0px 15px 0px;
		margin: 5px;
		border-top: 0px dotted #ac896d;
		}

.commentboxpartial {
		padding: 5px;
		margin: 12px;
		}

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

/*-- mini icons by icojoy --*/
	.ljuser img {  
		width: 0; 
		height: 0; 
		background: transparent url(http://i42.tinypic.com/4j9ok0.gif) no-repeat 0 0;  
		padding: 10px 10px 0px 2px !important; 
		vertical-align: baseline !important;
		}

.ljuser img[src*="userinfo.gif"] { 
		background: transparent url(http://i42.tinypic.com/4j9ok0.gif) no-repeat 0 0 !important;  
		padding: 10px 10px 0 2px !important; 
		}

.ljuser img[src*="community.gif"] { 
		width: 0;  
		height: 0; 
		background: transparent url(http://i41.tinypic.com/2vjy8zp.gif) no-repeat scroll 0 0 !important; 
		padding: 10px 10px 0 2px !important; 
		}

.subject img {
		vertical-align: middle !important;
		}

img[src*="icon_protected.gif"]{
		width: 0;
		height: 0; 
		padding: 16px 18px 0px 0px !important; 
		background: transparent url(http://i29.tinypic.com/o945zc.jpg) no-repeat scroll 0 0; 
		}

img[src*="icon_private.gif"]{ 
		width: 0;  
		height: 0; 
		padding: 16px 18px 0px 0px !important; 
		background: transparent url(http://i29.tinypic.com/o945zc.jpg) no-repeat scroll 0 0; 
		}

img[src*="icon_groups.gif"]{ 
		width: 0;  
		height: 0; 
		padding: 16px 18px 0px 0px !important; 
		background: transparent url(http://i29.tinypic.com/o945zc.jpg) no-repeat scroll 0 0; 
		}

img[src*="btn_del.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important;
		background: url(http://i39.tinypic.com/144739d.png) no-repeat scroll 0 0; 
		}

img[src*="btn_scr.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i43.tinypic.com/358rj2a.png) no-repeat scroll 0 0; 
		}

img[src*="btn_unscr.gif"] { 
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i39.tinypic.com/2drnh3.png) no-repeat scroll 0 0; 
		}

img[src*="btn_freeze.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important;
		background: url(http://i40.tinypic.com/17afb4.png) no-repeat scroll 0 0;
		}

img[src*="btn_unfreeze.gif"] {
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i44.tinypic.com/242zlet.png) no-repeat scroll 0 0;
		}

img[src*="btn_track.gif"] { 
		height: 0px;
		width: 0px; 
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i44.tinypic.com/5zmpvk.png) no-repeat scroll 0 0;
		}

img[src*="btn_tracking.gif"] { 
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i43.tinypic.com/aakt3q.png) no-repeat scroll 0 0; 
		}

img[src*="btn_tracking_thread.gif"] {
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i39.tinypic.com/71pcmf.png) no-repeat scroll 0 0; 
		}

img[src*="anonymous.gif"] { 
		height: 0px; 
		width: 0px; padding: 0px 0px 16px 16px !important; 
		background: url(http://i40.tinypic.com/2ngfymo.png) no-repeat scroll 0 0; 
		}

img[src*="openid-profile.gif"] { 
		height: 0px;
		width: 0px; 
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i44.tinypic.com/35b5evp.png) no-repeat scroll 0 0; 
		}

.box img[src*="userinfo.gif"] { 
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i40.tinypic.com/33c56o1.png) no-repeat scroll 0 0; 
		}

img[src*="talk/none.gif"] { 
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 10px 10px !important; 
		background: url(http://i39.tinypic.com/2ry4o4k.png) no-repeat scroll 0 0; 
		}

img[src*="help.gif"] { 
		height: 0px;
		width: 0px;
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i44.tinypic.com/zwkxvc.png) no-repeat scroll 0 0;
		}

img[src*="pencil.gif"] { 
		height: 0px; 
		width: 0px; 
		padding: 0px 0px 16px 16px !important; 
		background: url(http://i40.tinypic.com/2zibpg8.png) no-repeat scroll 0 0; 
		}

/*------- contextual pop-up -------*/

div.ContextualPopup {
		position: relative; 
		margin: auto;
 		text-align: left; 
		width: 270px;
		}

div.ContextualPopup div.Inner {
		background-color: #FFFFFF; 	
		color: #ac896d !important;
		border: 1px solid #ac896d;
		}

div.ContextualPopup .Userpic {
		padding: 5px;
		margin:  5px;
		background-color: #ac896d;
		border: 0px #ac896d solid;
		}

div.ContextualPopup .Content {
		background-color: #FFFFFF; 
		border: 1px solid #ac896d;
		margin: auto;
		}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:link {
		text-decoration: none !important;
		font-weight: bold; 
		color: #46171e !important;
		}

div.ContextualPopup .Relation {
		text-transform: lowercase;
		color: #ac896d;
		}

/*-- navigation bar --*/

table#lj_controlstrip td {
		background-color: #FFFFFF;
		border: solid 0px #ac896d;
		}

#lj_controlstrip input {
		background-color: #FFFFFF;
		padding: 0px 5px 0px 5px;
		color: #C0A878;
		border: 1px solid #C0A878;
		}

#lj_controlstrip a  {
		color: #ac896d;
		}

#lj_controlstrip_statustext {
		color: #ac896d; 
		}

#lj_controlstrip_userpic {
		display:none;
		}

/*-- paste additional codes below this point --*/

For a temporary live preview, go here:

Live Preview

Please credit

arobynsung @

visualwit for layout.
Please credit

nerak_rose for the blockquote.

Here's the customization artwork I made that you can use wherever:

Tags: layout

Current Mood:

creative

10 comments | Leave a comment

( Read 10 comments ) Post a comment in response:

From:	LiveJournal Facebook Twitter OpenID Google Mail.Ru VKontakte Anonymous LiveJournal Don't have an account? Create one now. Facebook You can easily comment on posts under your Facebook account Twitter You can easily comment on posts at LiveJournal under your Twitter account OpenID Identity URL: Google You can easily comment on posts at LiveJournal under your Google account Mail.Ru You can easily comment on posts under your Mail.ru account VKontakte You can easily comment on posts at LiveJournal under your VKontakte account Anonymous - this user has disabled anonymous posting.
Subject:	No HTML allowed in subject Don't auto-format:
Message:

	Check spelling during preview
	Notice! This user has turned on the option that logs your IP address when posting. (will be screened)