layoutlounge | 66. Transparent Darkness

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

[ Preview ] [ Live ]
Font(s) Used: Yelly
Credit:

layout_lounge
For help with layout please consult the How To Guides, otherwise please comment.

/*--------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #ECE9E6;
 background-image: url(http://i52.tinypic.com/2yn3ww9.jpg);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #ffffff;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #2AB5D2; }
a:hover { color: #eeeeee; }

blockquote {
 width: 70%;
 background-color: transparent !important;
 background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/072270-grunge-icon-alphanumeric-quote-open1.png);
 background-repeat: no-repeat;
 margin-left: 50px;
 padding: 0px 10px 10px 100px; 
 color: #eeeeee;
 font-size: 15px;
 line-height: 16px;
 font-family: "trebuchet ms", arial, sans-serif;
 text-align: left;
 }

img.special { background-color: rgba(41, 41, 41, 0.6) !important; padding: 10px; border: 1px solid #333333; }

i img { background-color: rgba(41, 41, 41, 0.6) !important; padding: 10px; border: 1px solid #333333; }

b, strong { color: #8BD8EB; }
i, em { color: #e64a6b; }
u { color: #B8B3AA; }
s, strike { color: #934545; }

.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: transparent !important;
 width: 1000px; 
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 background-color: transparent !important;
 }

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

.subcontent {
 background-color: transparent !important;
 min-height: 200px;
 margin: auto;
 padding-top: 10px;
 }

/*---------------Header--------------*/
#header {  
 position: inherit;
 width: 990px;
 height: 40px;
 text-align: center;
 color: #282828;
 padding: 15px 0px 14px 0px;
 margin-top: -7px;
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();
    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 {
 padding: 12px 15px 12px 15px;
 margin: 0px -7px 0px -7px;
 letter-spacing: 1px;
 color: #ffffff;
 background-color: #222222;
 text-align: left;
 border:0px solid #E0E0E0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-khtml-transition: all 0.5s ease-out;
-moz-border-radius:0 0px 5px 5px;
-webkit-border-radius:0 0px 5px 5px;
border-radius: 0 0px 5px 5px;
-khtml-border-radius: 0 0px 5px 5px;
}

div#header li.view { 
 padding: 12px 15px 22px 15px;
 margin: 0px -7px 0px -7px;
 color: #ffffff;
 background-color: #444444;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-khtml-transition: all 0.5s ease-out;
-moz-border-radius:0 0px 5px 5px;
-webkit-border-radius:0 0px 5px 5px;
border-radius: 0 0px 5px 5px;
-khtml-border-radius: 0 0px 5px 5px;
 }

div#header a:hover { 
 padding: 12px 15px 32px 15px;
 margin: 0px -7px 0px -7px;
 color: #ffffff;
 background-color: #444444;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-khtml-transition: all 0.5s ease-out;
-moz-border-radius:0 0px 5px 5px;
-webkit-border-radius:0 0px 5px 5px;
border-radius: 0 0px 5px 5px;
-khtml-border-radius: 0 0px 5px 5px;
 }

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: #444444;
-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 #333333;
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: transparent !important;
color: #cccccc;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
float: right;
text-transform: lowercase;
width: 230px;
-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;
right: 5px;
}

.defaultuserpic {
 text-align: center;
 vertical-align: center;
 padding: 5px;
}

.sbarbody2 { 
padding: 10px; 
background-color: #292929; 
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; 
 border: 5px solid #333333; }

.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 a {
color: #e1276b;
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:#2AB5D2; 
-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:#999999; 
-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: #2AB5D2;
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: #e1276b; 
-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: transparent !important;
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: 200px;         overflow-x: hidden; overflow-y: auto; }

/*-----------Entries-----------*/
.entry {
 padding: 10px 20px 10px 20px;
 margin-bottom: 10px;
 color: #FFFFFF;
 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: rgba(0, 0, 0, 0.3) !important;
 border: 0px 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;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -khtml-border-radius: 4px;
 }

.userpic a { color: #ffffff !important; }
.userpic a:hover { color: #E82416 !important; }

.userpicfriends {
 position: relative;
background-color: rgba(0, 0, 0, 0.3) !important;
 border: 0px 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;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -khtml-border-radius: 4px;
 }

.userpicfriends a font {color: #ffffff;}
.userpicfriends a font:hover {color: #E82416;  text-shadow: 2px 2px 6px #bbbbbb; }

.date  {
 margin: 10px 10px -15px 10px;
 text-align: center; 
 padding-right: auto;
 padding-left: auto;
 color: #444444;
 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: #2AB5D2;
font-family: "Yelly", open sans condensed, georgia, arial;
 font-size: 24px;
 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: #2AB5D2;}

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

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

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #565656;
 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: transparent !important;
 }

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

.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
border: 0px solid #e5e5e5;
background-color: transparent !important;
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: transparent !important;
color: #eeeeee;
 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: #555555;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 4px solid #444444;
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: transparent !important;
 color: #ffffff;
 }

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

.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: #ffffffff;
 }
  
.replytosubject {
 font-weight: none;
 }
  
.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 12px;
 font-family: "arial;
 color: #ffffff;
 }
  
.commentbox {
 align: left; 
 padding: 2px; 
 margin: 2px; 
 }

.userpiccomment {
background-color: rgba(0, 0, 0, 0.3) !important;
 border: 0px solid #E0E0E0;
 position: relative;
 top: -30px;
 left: 0px;
 padding: 10px;
 margin: 10px 10px -20px 10px;
 z-index: 15;
 float: left;
 }

div#content input,
div#content textarea,
div#content select {
 color: #ffffff;
 background-color: #222222;
 border: 0px solid #000000;
 padding: 5px;
 }
  
.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: 0px; 
 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: transparent !important; }

ul.year li {display: inline;}

table.yeartable { margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; background-color: transparent !important; }

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: transparent !important;
 }

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://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/coffee.png) 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://s77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock.png) no-repeat !important; 
 }

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://s77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock.png) no-repeat !important; }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://s77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/eye.png) no-repeat !important; 
 }

/* USER */
html body .ljuser img {
 width: 0 !important;
 height: 0 !important;
 background-repeat: no-repeat;
 background: transparent url(http://i55.tinypic.com/em5it.jpg) 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://i55.tinypic.com/em5it.jpg) 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/muffin.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: 000px;
 height: 00px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0px;
 padding: 0px;
 background-color: transparent !important;
 background-image: url();
 }

.separator { height: 20px; }

Background Image:

PLEASE NO HOTLINKING IMAGES

Headers:

graffitigraphic
More Background Images: Layout Lounge Site
More Tiny Icons: Layout Lounge Site

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

Threaded | Top-Level Comments Only

From:

caffeinified.livejournal.com

Hi! I looove this layout and am trying to use it on Dreamwidth. It's perfect except I can't seem to get the tags to show in the sidebar or a calendar to show. If it's impossible to do, that's just fine! I still love it. ♥!

sireesanwar.livejournal.com

I know it is possible:
http://sireesanwar.dreamwidth.org/

So what is up... did you make it so you can use Flexible Squares on Dreamwidth
http://sireesanwar.dreamwidth.org/589611.html

Check your sidebar settings
http://www.dreamwidth.org/customize/options?group=sidebar

If none of this stuff helps... send me the link and let me see.

lol I know I have all the right sidebar stuff ticked, and yet...

Here's the journal: http://charcoalgrey.dreamwidth.org/

If you need a text box of the coding I have in the CSS let me know. And thanks for the help!

Okay so the reason the calendar isn't showing up is in the sidebar coding area there is something that says

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

It is towards the bottom of the sidebar coding section. You can delete this line altogether or just remove the " #sidebar_calendar,". This is up to you.

As for the tags. Have you used any tags? Your userinfo says you haven't and if that is true... nothing will show until you tag a post.

yvonnereid.livejournal.com

I'm using this now, thanks so much!!

Thanks for the tutorials, I can even do it all myself now hahaha :)

Huge Hugs xx

(http://s776.photobucket.com/user/galefan101/media/cute-eccbc87e4b5ce2fe28308fd9f2a7baf3-2413_zpsfd5uzmzu.gif.html)

That is so awesome. Good for you!

Layout Lounge

Layouts, Tutorials, Help, and more

66. Transparent Darkness - coding updated

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

About

Links

Tags

Summary

April 2025