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:

tracyj23.livejournal.com

Thanks, I'll give it a whirl on Monday and let you know if I need any help. :)

There's one thing though - on both my computer and the iPod, the text in the reply box comes out so light I can hardly read it once it's posted. Is it supposed to be that way?

Edited Date: 2012-03-31 12:32 pm (UTC)

sireesanwar.livejournal.com

I think I was able to fix that. For whatever reason I couldn't see that on my end but the coding allowed for a very light color.

It does seem much better now, thanks.

Great. Check out the friends page.

The layout looks awesome, thank you do much!

On my friends page the names and icons still aren't showing up. Strange. And the date and title of the entries appears to be in that really light text colour so I am having trouble reading them. The rest looks amazing though. You're so very talented! You say your brother got all the brains in your family but I don't believe it!!

I don't get it. Why isn't it showing up. I'm really going to have to start scouring everything to figure out why. I'm thinking it is part of your personal settings though that doesn't seem to make a lot of sense.

Thanks. That is sweet of you to say.

It's true, you are really talented with graphics.

I hope you can figure out why icons and names aren't showing up on my friends' page because I'm finding it really frustrating that I don't know who's posting what. I see the entries but I don't know who wrote them so I don't know if I should click to continue reading ('cause some people's stuff I don't always read) or what, or even if it's community stuff or personal journals. It's kind of annoying.

Okay. I think the issue is the device or it's browser. I tried to view my friends page on my Kindle and the Cloud browser doesn't show the userpics either and I think that is because they are outside of the general layout width. So what I can do is move them into the post or maybe the right of the post with room between the sidebar and post. That might do the trick. What do you think?

That sounds plausible. I say give it a go!

Give it a gander.

Hey, I see userpics again. Yay! Thanks so much for fixing this for me. *hugs*

You are very welcome!

What browsers are you using? I can't seem to figure out why the images aren't showing up and I have to wonder if moving the userpic that far out changed something with the browser.

I only use safari, that's all I have on my old mac and the only thing that runs on the iPad.

Hey check out my friends page and see if you are seeing the userpics there. I'm starting to think it is the browser but I don't know why that would be.

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)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025