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.

Flat | Top-Level Comments Only

From:

sireesanwar.livejournal.com

You did switch to a Flexible Squares layout, right? If so you might have to hit the Reset to Default button before trying to change the layout. I've had an issue with this in the past.

sapphirewings15.livejournal.com

I tried it, and it looks better now but still not exactly like the preview. how come my userpic won't show up beside my entries?

and there was supposed to be "background: url(TAGS IMAGE URL) no-repeat center left" under SECTION: Currents, tags, comment links right? it's not there...

and if you look on my journal, there's that weird border around the layout and the blue bar behind "tags, blurb, links list" on the sidebar as well as where the top part "user profile etc." is.

thank you!

Edited Date: 2012-05-09 08:28 pm (UTC)

Something is up. I'm thinking that maybe the questions before the coding might not be right. I don't understand this because you did tell me you answered no to all of the questions.

Maybe it is the actual Flexible Squares theme. When I test these I use the Autumn version. I have had people need to change to the exact say Flexi theme to get things to work. Try changing the them to Autumn and then answering all the questions in Custom CSS to NO and then add the coding in.

got it! thank you :)

one last question, what size does the header have to be? ^^

Header should be 1000px wide and whatever you want for the height. You can see at my personal journal.

Layout Lounge

Layouts, Tutorials, Help, and more

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

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025