layoutlounge | 63. Translucent Bliss (Layout Lounge Revamp)

Layout Style: S2 Flexible Squares
Features: Sidebar, Scrolling Tags
Layout Width: 1000px

[ Preview ] [ Live ]

Font(s) Used: Lobster

Layout:

graffitigraphic

Sidebar: Using Layouts, Layout Changes for Beginners, Font Tutorial, or Tiny Icon Help see How To Guides.

/*----------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
-----------------*/
body{
 background-color: #ECE9E6;
 background-image: url(PUT BACKGROUND LINK HERE BETWEEN PARENTHESIS);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #888888;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #4BA2B8; }
a:hover { color: #444444; }

blockquote {
 width: 70%;
 background-color: #FFFFFF;
 margin-left: 75px;
 padding: 0px 10px 10px 10px; 
 border: 3px dashed #cccccc; 
 color: #333333;
 font-size: 15px;
 line-height: 16px;
 font-family: "trebuchet ms", arial, sans-serif;
 text-align: left;
 }

img.special { border: 10px solid #eeeeee;   -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -khtml-border-radius: 4px; }

i img { border: 10px solid #eeeeee;   -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -khtml-border-radius: 4px; }

b, strong { color: #e64a6b; }
i, em { color: #9363C6; }
u { color: #596E1C; }
s, strike { color: #AD5C00; }

.b-repost-item { display:none }

p, td{  }
	
code, kbd, pre, tt {font-family: "monospace";	}
	
ul.ljtaglist { text-align: left; padding-left: 5px; }

/*-------General------*/
#content {  	
 background-color: #ffffff;
 width: 1000px;	
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 background-color: transparent !important;
 }

#maincontent {
 background-color: #ffffff;
 width: 750px;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 color: #333333;
 text-align: center;
 }

.subcontent {
 background-color: #ffffff;
 min-height: 200px;
 margin: auto;
 padding-top: 10px;
 }

/*--------Header-------*/
#header {		
 position: inherit;
 width: 990px;
 height: 50px;
 text-align: center;
 color: #282828;
 padding: 10px 5px;
font-family: open sans condensed, georgia, arial;
  font-size: 14px !important; line-height: 130%;  line-height: 130%; 
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: none;
    background-image: url(http://i39.tinypic.com/jgqu0y.jpg);
    background-origin: padding-box;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: auto auto;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 display: inline-block;
 padding: 5px 10px 12px 10px;
 letter-spacing: 1px;
 color: #ffffff;
 text-align: left;
 border:1px solid #E0E0E0;
-moz-border-radius: 46px; -webkit-border-radius: 46px; border-radius: 46px; -khtml-border-radius: 46px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-khtml-transition: all 0.8s ease-out;
}

div#header a:hover, div#header li.view { 
 display: inline-block;
 padding: 5px 9px 12px 9px;
 color: #000000;
-moz-border-radius: 46px; -webkit-border-radius: 46px; border-radius: 46px; -khtml-border-radius: 46px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-khtml-transition: all 0.8s ease-out;
transform:rotate(720deg)!important;
-khtml-transform:rotate(720deg)!important;
-ms-transform:rotate(720deg)!important;
-moz-transform:rotate(720deg)!important;
-webkit-transform:rotate(720deg)!important;
-o-transform:rotate(720deg)!important;
 }

div#header a[href*=".livejournal.com/"], body.lj-view-recent div#header li.view {
background-color: #BDE0ED; }

div#header a[href*="/calendar"], body.lj-view-archive div#header li.view {
background-color: #6DA9C1;}

div#header a[href*="/friends"], body.lj-view-friends div#header li.view { 
background-color:#7FAFAB; }

div#header a[href*="/profile"] {
background-color: #823772; }

div#header a,div#header a[href*="http://graffitigrapic.livejournal.com"] {
background-color: #F88D87;}

div#header a:hover[href*=".livejournal.com/"], body.lj-view-recent div#header li.view {
background-color: #EEF9FC; }

div#header a:hover[href*="/calendar"], body.lj-view-archive div#header li.view {
background-color: #d4dce8;}

div#header a:hover[href*="/friends"], body.lj-view-friends div#header li.view { 
background-color: #BDE0ED; }

div#header a:hover[href*="/profile"] {
background-color: #9363C6; }

div#header a:hover, div#header a:hover[href*="http://graffitigraphic.livejournal.com"] {
background-color: #FCD9D7;}

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0;
 padding: 0;
 }

ul.navheader li  {
 display: inline;
 list-style: none;
 }
	
.title, .subtitle { display: none; }

/*-------- footer --------*/

#footer {
bottom: 10px;
padding:5px 0;
position:fixed;
right:0;
text-align:left;
text-transform:lowercase;
width:100%;
z-index:0;
}

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

ul.navfooter a {
-moz-border-radius:0 10px 10px 0;
 -webkit-border-radius:0 10px 10px 0;
 border-radius:0 10px 10px 0;
 -khtml-border-radius:0 10px 10px 0; }

ul.navfooter li   li a {
float:right;
-moz-border-radius:10px 0 0 10px;
 -webkit-border-radius:10px 0 0 10px;
 border-radius:10px 0 0 10px;
 -khtml-border-radius:10px 0 0 10px;
background-color: #272727; }

ul.navfooter li   li a:hover { background-color:#702D62!important; }

div#footer a, div#footer a:link {
background-color: #999999;
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 10px;
}

div#footer a:hover {
color:#FFFFFF;
background-color: #D65981;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-khtml-transition: all 0.5s ease;
padding-right: 5px;
border-left: 4px solid #823772;
letter-spacing: 3px;
}

ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }

ul.navfooter li   li {
list-style:none outside none;
margin:0;
padding:0;
display:inline;  }

#footer .viewing { display:none; }

/*-------- sidebar --------*/

#sidebar {
background-color: rgba(255, 255, 255, 0.6) ;
color: #999999;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
float: right;
text-transform: lowercase;
width: 250px;
-moz-border-radius: 0 0 10px 10px;
 -webkit-border-radius: 0 0 10px 10px;
 border-radius: 0 0 10px 10px;
 -khtml-border-radius: 0 0 10px 10px;
border-bottom: 2px dotted #ECE9E6;
right: 5px;
}

.sbarbody2 { 
padding: 10px; 
background-color: #F3F3F3; 
margin-top: 0px; 
margin: 0 10px 0 10px; 
line-height: 12px; 
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 9pt !important; 
text-transform: lowercase; 
text-align: left;
 border: 5px solid #E0E0E0; }

.sbarbody {
margin:0;
padding: 2px;}

ul.sbarlist{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: right;
}

li.sbaritem {
list-style-type:none;
margin-top:2px;
text-align:left;
}

li.sbaritem:hover{}

li.sbaritem a {
color: #81B3C9;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-style:italic;
font-weight:lighter;
margin-right:2px;
padding:2px 5px;
text-align: left;}

li.sbaritem a:hover {
color:#FFFFFF; 
background-color:#444444;
-moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -khtml-border-radius: 10px;
text-align: center;
letter-spacing: 2px;}

li.sbartitle {
 list-style: none;
 color:#444444; 
-moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -khtml-border-radius: 10px;
text-align: right;
letter-spacing: 2px;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 font-style: italic;
 font-weight: bold;
 text-transform: lowercase;
 margin: 1px 5px 1px 5px;
 }

#sidebar_linklist  {
list-style-type:none;
padding-top:2px;
text-align: left !important;
text-transform:lowercase;}

#sidebar_linklist li.sbaritem a {
color: #81B3C9;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-style:italic;
font-weight:lighter;
margin-right:2px;
padding:2px 5px;
text-align: left;}

#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF; 
background-color:#444444;
-moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -khtml-border-radius: 10px;
text-align: right;
letter-spacing: 2px;}

td.sbarcalendar {background-color:#F3F2EE;
padding: 3px;}

td.sbarcalendarposts {background-color:transparent;
padding: 3px;}

table.calendar {padding-top: 5px;}

#sidebar_summary, #sidebar_calendar, h2 { display:none!important; }

#sidebar_tags .sbarcontent { height: 300px;         overflow-x: hidden; overflow-y: auto; }

/*------Entries------*/
.entry	{
 padding: 10px 20px 10px 20px;
 margin-bottom: 10px;
 color: #767676;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 13px;
 text-align: left;
 }
	
hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

.entry ul li, ol li, li {
 padding-left: 5px;
 margin-left: 5px;
 list-style: normal;
 list-style-position: outside;
 }

.userpic {
 position: relative;
background-color:#eeeeee !important;
 border:1px solid #E0E0E0;
 float: left;
padding: 10px; 
margin-left:-130px; margin-top:-11px;
 text-align: center;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 11px;
 z-index: 15;
 }

.userpicfriends {
 position: relative;
background-color:#eeeeee !important;
 border:1px solid #E0E0E0;
 float: left;
padding: 10px; 
margin-left:-130px; margin-top:-11px;
 text-align: center;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 11px;
 z-index: 15;
 }

.userpicfriends a font {color: #84A0A4;}
.userpicfriends a font:hover {color: #ED577C;  text-shadow: 2px 2px 6px #bbbbbb; }

.date  {
 margin: 10px 10px -15px 10px;
 text-align: center; 
 padding-right: auto;
 padding-left: auto;
 color: #F3F3F3;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 25px;
 text-transform: uppercase;
-moz-border-radius: 6px 6x 0 0;
 -webkit-border-radius: 6px 6x 0 0;
 border-radius: 6px 6x 0 0;
 -khtml-border-radius: 6px 6x 0 0;
 }

.subject {
 padding: 0px 0px 5px 5px;
 margin: -15px 10px 0px 10px;
 color: #84A0A4;
font-family: "Lobster 1.4", open sans condensed, georgia, arial;
 font-size: 26px;
 font-weight: normal; 
 text-align: left;
 text-transform: normal;
-moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -khtml-border-radius: 4px;
 }
	
.subject a, .subject a:link, .subject a:visited {color: #84A0A4;}

.subject a:hover {color: #565656;}

.datesubject {
 background-color: transparent;
 padding: 0px;
 text-align: left;
 }

span.ljuser a b {
 padding: 2px 0 2px 0;
 color: #84A0A4;
 font-weight: normal;
 }

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #84A0A4;
 font-weight: normal;
 }

.skiplinks {
 text-align: center;
 margin-top: 5px;
 margin-bottom: 3px;
 font-family: "trebuchet ms", arial, sans-serif;
 padding: 10px;
 font-size: 10px;
 letter-spacing: 1px;
 color: #999999;
 background-color: #ffffff;
 }

/*------  Currents-------*/

.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
border: 0px solid #e5e5e5;
background-color: #FFFFFF;
margin: 5px 0 0 0;
font-size: 7pt !important;
font-family: tahoma !important;
color: #7F7F7F;
text-align: left; 
}

.currentlocation, .currentmusic {
display:none;
}

.currents strong, .currentmood strong, .currentmusic .currentlocation {
font-weight: normal;
}

/*---Currents, tags, comment links---*/

.ljtags {
margin-top: 20px;
text-align: left;
color: #808080;
 font-family:verdana; 
font-weight:bold; 
font-size: 9px; 
text-transform:uppercase;
}

.comments {
-moz-border-radius: 0 10px 10px 0px;
 -webkit-border-radius: 0 10px 10px 0px;
 border-radius: 0 10px 10px 0px;
 -khtml-border-radius: 0 10px 10px 0px;
background-color: #f7f7f7;
color: #444444;
 font-size: 12px; line-height: 130%; 
letter-spacing:-0.1em;
padding:5px 10px;
margin-top: 8px; 
margin-left: -20px;
position:absolute;
text-align:center;
width:auto;}

div.comments a, div.comments a:link, div.comments a:visited {
color:#999999;
font-family: open sans condensed, arial !important;
 font-size: 14px !important; line-height: 130%; 
line-height:1;
margin:0;
padding:4px 6px;
letter-spacing: 1px; 
text-align: center; }

div.comments a:hover {
color:#FFFFFF;
background-color: #D65981;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-khtml-transition: all 0.5s ease;
transition: all 0.5s ease;
border-left: 4px solid #823772;
letter-spacing: 3px;
-moz-border-radius: 0 10px 10px 0px;
 -webkit-border-radius: 0 10px 10px 0px;
 border-radius: 0 10px 10px 0px;
 -khtml-border-radius: 0 10px 10px 0px; }

/*------Comments Page----*/
.box {
 padding: 5px 5px 5px 10px;
 margin: 0px;
 text-align: left;
 clear: left;
 background-color: #ffffff;
 color: #000000;
 }

form div.box {
 text-align: left;
 background-color: #ffffff;
 color: #000000;
  }

.reply	{
 position: relative;
 font-family: "trebuchet ms", arial, sans-serif;
 margin: 20px 30px 10px 30px;
 padding: 25px 10px 10px 10px;
 text-align: left;
 font-family: "arial";
 font-size: 12px;
 line-height: 125%;
 background-color: #f1f1f1;
 color: #000000;
 }
		
.replytosubject {
 font-weight: none;
 }
		
.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 12px;
 font-family: "arial;
 color: #000000;
 }
		
.commentbox {
 align: left; 
 padding: 2px; 
 margin: 2px; 
 font-size: 12px;
 }

.userpiccomment {
 position: relative;
 background-color: #eeeeee;
 top: -30px;
 left: 0px;
 padding: 10px;
 margin: 10px 10px -20px 10px;
 z-index: 15;
 float: left;
-moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -khtml-border-radius: 4px;
 }
		
.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #666666; cursor: crosshair; text-decoration:none; font-weight:none;}
		
.datesubjectcomment a:hover {
 color: #666666; cursor: crosshair; text-decoration:none; font-weight:none;}
	
.commentboxpartial {
 border-color: #000000; 
 border-width: 1px; 
 border-style: solid; 
 padding: 10px; 
 margin: 10px; 
 background-color: #f1f1f1;
 }

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

/*------Year/Archive Page-----*/

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

ul.year li {display: inline;}

table.yeartable { margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; background-color: #ffffff; }

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

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

td.yearmonth { color: #888888; border-style: none; }

/*------Tags Page-----*/

ul.ljtaglist {
 color: #888888;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 13px;
 padding: 8px 8px 8px 20px;
 background-color: #ffffff;
 }

ul.ljtaglist li  {list-style: normal;}

/*-----SECTION: Tiny Icons-----*/

.currentlocation {
 background: url(http://i54.tinypic.com/msm1c0.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmood  {
 background: url(http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmusic {
 background: url(http://i26.tinypic.com/2nv6qtf.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentgroups {
 background: url(http://i52.tinypic.com/25p3j2t.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i53.tinypic.com/24ne4i9.jpg) no-repeat !important; 
 }

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i56.tinypic.com/11h8kqw.jpg) no-repeat !important; }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i52.tinypic.com/2hh3fnn.jpg) no-repeat !important; 
 }

/* USER */
html body .ljuser img {
 width: 0 !important;
 height: 0 !important;
 background-repeat: no-repeat;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/Blue-Flower-16x16.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

html body .ljuser img[src*="userinfo.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/Blue-Flower-16x16.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
html body .ljuser img[src*="community.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/coffee.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*------Mics------*/
.clear { height: 0px; font-size: 0.01px; }
	
#lj_controlstrip_statustext {
 color: #999999;
 font-size: 12px;
 font-weight: bold;
 }

#lj_controlstrip td {
 font-family: "georgia" !important;
 font-size: 12px;
 background-color: #000000 !important;
 border: 0px solid #999999;
 }

#lj_controlstrip a, #lj_controlstrip a:visited {
 font-family: "georgia" !important;
 font-size: 11px;
 color: #999999 !important;
 text-transform: lowercase;
 }

#lj_controlstrip a:hover { color: #6DA9C1 !important; }

.headerimage {
 position: relative;
 width: 800px;
 height: 100px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0px;
 padding: 0px;
 background-color: transparent !important;
 background-image: url(HEADER IMAGE HERE);
 }

.separator { height: 20px; }

Besides changing the Header Image and Background Image, you will want to find the WEBSITE LINK FROM PROFILE in the header coding. Replace the words with the exact website link you provided on your Profile to make your Website like color and hover work. There will be two places to change this, one for the link color and one for the hover link color.

Background Images:

PLEASE NO HOTLINKING IMAGES

Under Header Link Images (Header Code):

Headers:

graffitigraphic
Background Images: Layout Lounge Site

RULES:
No Hotlinking Images
Header can be changed
Background image can be changed or removed.

Layout Lounge

Layouts, Tutorials, Help, and more

63. Translucent Bliss (Layout Lounge Revamp) - coding updated

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025