life, love, and laughter

Previous | Memories | | Next

15 November 2010 @ 05:19 pm

Nature Layout

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 — Leave a comment )

raachel2008 on November 16th, 2010 02:40 am (UTC)

It's okay. I come sinc cycles. I'm on the four hours of sleep phase. Sucks tons, but I get to at least do something productive, like working a little and then procrastinating all the real work. :D

(Reply) (Parent) (Thread) (Link)

shli1117 on November 16th, 2010 02:52 am (UTC)

I love procrastinating. As evidenced by my latest spree of picture, layout, and video editing spree. O:-)

(Reply) (Parent) (Thread) (Link)

( Read 10 comments — Leave a comment )