twenty six
XXVI | Careful
XXVI; CAREFUL
LIVE PREVIEWS
careful
style
S2; Flexible Squares
accounts
Basic & Paid
browsers
Firefox, Safari, Chrome, Opera (does not work well in IE)
Resolutions
best in 1280x1024
disabled features subtitle, sidebar calendar, sidebar tags, sidebar page summary, custom userheads, repost option
INSTALLATION
HOW TO INSTALL
if you need help installing your S2 layout, click the "how to install" link for a detailed guide on how to install any S2 layout.
install the code
/*-------------------------------------------
NAME: Careful (black and gold version)
STYLE: S2 | Flexible Squares
CREDIT: apologize @ jealouss
TINY ICONS: brsev @ deviantart
---------------------------------------------*/
/*---------page--------*/
body {
background: #ddd url(http://i56.tinypic.com/10gijh5.png) no-repeat;
text-align: center;
color: #ddd;
font-family: "arial", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
#lj_controlstrip{display: none;}
/*---------body--------*/
#content{
width: 80%;
margin-left: auto; margin-right: auto;
background-color: transparent!important;
border: none;
padding: 0px;
margin-top: 400px;}
#maincontent {
margin-top: 15px;
font-family: "arial", sans-serif;
font-size: 18px;
background-color: transparent!important;
color: #fff;
border: none;
margin-right: 0px;
text-align: left;}
/*---------header--------*/
#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: ;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
border: none;
background-color: transparent!important;
color: #000000;}
.headerimage {
}
div#header a, div#header a:link, div#header a:visited {color: #fff;}
div#header a:hover{
color: #222;
text-decoration: none;}
.title {
font-family: "helvetica", sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 200%;
color: #FFDF2D;
text-align: center;
letter-spacing: .8px;
position: absolute;
top: 120px;
right: 250px;
}
.subtitle{display: none;}
ul.navheader{
padding: 0px;
margin: 0px;
position: absolute;
top: 105px;
right: 305px;
color: #fff;
font-family: arial narrow;
font-weight: lighter;
letter-spacing: 0px;
font-size: 14px;
border-bottom: 1px solid #eee;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
li.view{color: #FFDF2D; font-weight: bold;}
/*---------entries--------*/
.subcontent {}
.entry {
margin: 0px;
padding: 15px;
background-color: #f6f6f6;
color: #000000;
font-family: arial, sans-serif;
font-size: 11px;
text-align: justify;
border: 1px solid #eee;
border-bottom: 40px solid #222;
}
.entry_text img{border: 10px solid #FFDF2D;}
.userpic, .date {display: none;}
.subject {
position: relative;
font-weight: normal;
padding: 10px;
color: #fff;
font-family: "helvetica", sans-serif;
font-size: 18px;
text-align: right;
letter-spacing: -1px;
text-transform: lowercase;
}
.subject a, .subject a:link, .subject a:visited {color:#FFDF2D;}
.subject a:hover {color: #fff; text-decoration: none;}
.datesubject {
background-color: #222;
padding: 0px;
}
.entry ul li{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li{
padding-left: 5px;
margin-left: 15px;
}
/*---------tags--------*/
.ljtags {margin: 0px 0px 0px 80px;}
/*---------currents--------*/
.currents{
font-family: "helvetica", sans-serif;
font-size: 11px;
margin: 0 0 0 0px;
border-top: 5px solid #222;
margin-top: 50px;
}
.currents strong{text-transform: lowercase; color: #222;}
/*---------comments--------*/
.comments {
font-family: "helvetica", sans-serif;
font-size: 18px;
text-align: right;
background-color: transparent!important;
padding: 0px 5px 0px 5px;
position: relative;
top: 45px;
text-transform: lowercase;
color: #fff;
letter-spacing: -1px;
}
div.comments a, div.comments a:link, div.comments a:visited{color: #FFDF2D}
div.comments a:hover {
color: #fff;
text-decoration: none;
}
/*---------separator--------*/
.separator{height: 35px;}
/*---------friends page--------*/
.userpicfriends {
position: relative;
top: -5px;
float: left;
padding: 5px;
margin: 0px;
text-align: center;
border: none;
font-family: "helvetica, sans-serif;
font-size: 0px;
z-index: 15;
background: transparent!important;
color: #222;
font-weight: normal;
line-height: 50%;
}
.userpicfriends a font{color: #ffdf2d; font-family: helvetica; font-size: 10px; padding: 0px; margin: 0px;}
.userpicfriends a font:hover{color: #fff;}
.userpicfriends img{display: none; background: transparent!important; color: #ffdf2d;}
/*---------sidebar--------*/
#sidebar {
padding-top: 0px;
margin-top: 0px;
background-color: transparent!important;
border: none;
font-size: 11px;
font-family: "helvetica", sans-serif;
color: #FFDF2D;
float: right;
text-align: left;
}
.defaultuserpic {
text-align: center;
display: none;
}
.sbarheader {}
.sbarbody {
padding: 0px;
}
.sbarbody2 {
padding: 0;
color: #fff;
background: #000;
text-align: justify;
font-family: arial;
position: absolute;
top: 150px;
right: 250px;
width: 285px;
height: 200px;
overflow: hidden;
font-size: 11px;
z-index: 20;
}
.sbarbody2:hover{height: 275px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #FFDF2D;}
div#sidebar a:hover {
color: #fff;
text-decoration: none;
}
table.calendar {
margin: auto;
padding-top: 15px;
}
.sbarcalendar {
border: none;
text-align: center;
font-family: "helvetica", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border: none;
background-color: transparent!important;
text-align: center;
font-family: "helvetica", sans-serif;
font-size: 11px;
font-weight: bold;
color: #fff;
}
.sbarcalendarposts a{color: #fff;}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem{
padding-left: 0px;
list-style: none;
width: auto;
display: inline;
}
li.sbartitle, #sidebar_summary{
display: none;
}
#sidebar_linklist{
position: absolute;
top: 375px;
left: 0px;
width: 100%;
background: #222;
border: none;
padding: 8px;}
#sidebar_tags, #sidebar_calendar{display: none;}
.sbaritem a {border: 0; display: inline; margin: 0 0 1px 1px; padding: 1px 5px 1px 5px; border-left: 1px solid #000; }
/*---------footer--------*/
#footer {
width: 100%;
text-align: left;
font-family: "helvetica", sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;
background-color: transparent!important;
color: #000000;
border-top: 15px solid #222;
z-index: 100;
clear: both;
}
div#footer a, div#footer a:link, div#footer a:visited{color: #fff;}
div#footer a:hover{color: #ffdf2d;}
#footer .viewing {}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {clear: both;}
/*---------archive page--------*/
ul.year {
text-align: center;
padding-bottom: 0px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: none;
background: #222;
color: #ffdf2d;
}
td.yeardate a{color: #fff;}
table.yeartable td.yearday {
background-color: transparent!important;
text-align: center;
color: #fff;
}
td.yearmonth {
border-style: none;
color: #222;
}
/*---------comment page--------*/
.datesubjectcomment {
background-color: #222;
padding: 5px;
margin-top: 0px;
}
.userpiccomment {
position: relative;
background-color: #ffdf2d;
top: -10px;
left: -10px;
padding: 5px;
margin: 0px;
z-index: 15;
float: left;
height: 75px;
width: 75px;
}
.box {
border: none;
padding: 0px;
clear: left;
}
input, textarea {
background-color: #f6f6f6;
color: #222;
font-family: helvetica;
font-size: 12px;
}
textarea.textbox {
width: 100% !important;
}
.reply{
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "helvetica", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #f6f6f6;
color: #000000;
}
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px 10px 10px 90px;
font-size: 11px;
font-family: helvetica, sans-serif;
color: #fff;
}
.commentbox {
border: none;
padding: 10px;
margin: 10px;
background-color: #222;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #fff;}
.datesubjectcomment a:hover {color: #ffdf2d;}
.commentboxpartial {
border: none;
padding: 10px;
margin: 10px;
background-color: #222;
}
.commentinfo {
background-color: #222;
margin-top: 10px;
width: 100%;
}
.skiplinks {text-align: center; background: #222; padding: 10px; font-family: helvetica; text-transform: lowercase;}
/*---------misc--------*/
.clear {height: 15px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: bold !important;
color: #ffdf2d !important;
}
div.ContextualPopup .Userpic {
padding:10px;
background:#ddd;
margin:4px;
border:1px solid #222;
}
div.ContextualPopup div.Inner {
position: relative;
top: -2px;
left: -2px;
background-color: #222 !important;
color: #000 !important;
border: 5px solid #ffdf2d;
padding: 0px;
width: 20em;
color: #fff;
}
div.ContextualPopup .Content {
padding: 10px;
margin: 4px 4px 4px 4px;
background:#fff;
}
div.ContextualPopup .Relation {
font-variant:lowercase;
font-family:helvetica;
font-size:12px;
color:#ffdf2d;
letter-spacing:1px;
border-bottom:5px solid #222;
padding:0px 0px 4px 0px;
margin:0px 0px 4px 0px;
}
/*----------links----------------*/
a, a:link, a:visited {
color: #ffdf2d;
text-decoration: none;
}
a:hover {
color: #222;
text-decoration: none;
}
blockquote {font-size: 11px; font-family: helvetica; color: #000; font-weight: light; border-left: 5px solid #222; border-right: 5px solid #222; padding: 10px;}
b, s, i, u, big, small {color: #ffdf2d;}
code, kbd, pre, tt {
font-family: monospace;
}
b, s, i, u {}
/*---------tiny icons--------*/
/* Generated by Malionette's Tiny Icon Generator */
img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i53.tinypic.com/iglx5z.jpg) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i56.tinypic.com/j15wr6.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i52.tinypic.com/2i9pmrb.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i52.tinypic.com/250l8w5.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i53.tinypic.com/21d3ih5.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_groups.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i55.tinypic.com/i1k9xs.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"], img[src*="userhead"] {
background:url("http://i53.tinypic.com/iglx5z.jpg") no-repeat !important;
height:0; padding: 16px 0 0 15px !important; width:0;}
Features
The layout features the "hovering sidebar" which means if you hover over the blurb text it will extend the box so the full text will be displayed. As explained in the blurb text in the layout, the height of the blurb is 200px, when hovered over it will extend to 275px. You may change that if you'd like, but it you extend it much further than 275px it will extend into your entries. If your text exceed 275px it will not display even when hovered. You can change the overflow option to make it appear or not appear, to learn about overflow see this tutorial.
Additional Customization
The metadata in the layout is not the typical metadata found on standard livejournal styles, to get your metadata like it is in the layout you must have a paid account, and use layers. To learn more about layers see this tutorial, to learn about how to cusotmize your metadata using your layers, see this tutorial.
The background image is actually a background image and not a header. The dimensions for the image are 1280x375. If you are wanting to use a header instead of a background image, the color of the background if #ddd. See my help policy below before you ask questions!
Credits
tiny icons by brsev
Questions
FAQ | HOW TO CREDIT
Notes
I have recently changed my policy on layout editing help, so please read the FAQ before asking a question, and any general questions about this layout can be redirected to the original post, otherwise follow directions in the FAQ about how to ask questions regarding layouts. Please DO NOT PM me!
like what you see?
watch | more layouts
XXVI; CAREFUL
LIVE PREVIEWS
careful
style
S2; Flexible Squares
accounts
Basic & Paid
browsers
Firefox, Safari, Chrome, Opera (does not work well in IE)
Resolutions
best in 1280x1024
disabled features subtitle, sidebar calendar, sidebar tags, sidebar page summary, custom userheads, repost option
INSTALLATION
HOW TO INSTALL
if you need help installing your S2 layout, click the "how to install" link for a detailed guide on how to install any S2 layout.
install the code
/*-------------------------------------------
NAME: Careful (black and gold version)
STYLE: S2 | Flexible Squares
CREDIT: apologize @ jealouss
TINY ICONS: brsev @ deviantart
---------------------------------------------*/
/*---------page--------*/
body {
background: #ddd url(http://i56.tinypic.com/10gijh5.png) no-repeat;
text-align: center;
color: #ddd;
font-family: "arial", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
#lj_controlstrip{display: none;}
/*---------body--------*/
#content{
width: 80%;
margin-left: auto; margin-right: auto;
background-color: transparent!important;
border: none;
padding: 0px;
margin-top: 400px;}
#maincontent {
margin-top: 15px;
font-family: "arial", sans-serif;
font-size: 18px;
background-color: transparent!important;
color: #fff;
border: none;
margin-right: 0px;
text-align: left;}
/*---------header--------*/
#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: ;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
border: none;
background-color: transparent!important;
color: #000000;}
.headerimage {
}
div#header a, div#header a:link, div#header a:visited {color: #fff;}
div#header a:hover{
color: #222;
text-decoration: none;}
.title {
font-family: "helvetica", sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 200%;
color: #FFDF2D;
text-align: center;
letter-spacing: .8px;
position: absolute;
top: 120px;
right: 250px;
}
.subtitle{display: none;}
ul.navheader{
padding: 0px;
margin: 0px;
position: absolute;
top: 105px;
right: 305px;
color: #fff;
font-family: arial narrow;
font-weight: lighter;
letter-spacing: 0px;
font-size: 14px;
border-bottom: 1px solid #eee;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
li.view{color: #FFDF2D; font-weight: bold;}
/*---------entries--------*/
.subcontent {}
.entry {
margin: 0px;
padding: 15px;
background-color: #f6f6f6;
color: #000000;
font-family: arial, sans-serif;
font-size: 11px;
text-align: justify;
border: 1px solid #eee;
border-bottom: 40px solid #222;
}
.entry_text img{border: 10px solid #FFDF2D;}
.userpic, .date {display: none;}
.subject {
position: relative;
font-weight: normal;
padding: 10px;
color: #fff;
font-family: "helvetica", sans-serif;
font-size: 18px;
text-align: right;
letter-spacing: -1px;
text-transform: lowercase;
}
.subject a, .subject a:link, .subject a:visited {color:#FFDF2D;}
.subject a:hover {color: #fff; text-decoration: none;}
.datesubject {
background-color: #222;
padding: 0px;
}
.entry ul li{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li{
padding-left: 5px;
margin-left: 15px;
}
/*---------tags--------*/
.ljtags {margin: 0px 0px 0px 80px;}
/*---------currents--------*/
.currents{
font-family: "helvetica", sans-serif;
font-size: 11px;
margin: 0 0 0 0px;
border-top: 5px solid #222;
margin-top: 50px;
}
.currents strong{text-transform: lowercase; color: #222;}
/*---------comments--------*/
.comments {
font-family: "helvetica", sans-serif;
font-size: 18px;
text-align: right;
background-color: transparent!important;
padding: 0px 5px 0px 5px;
position: relative;
top: 45px;
text-transform: lowercase;
color: #fff;
letter-spacing: -1px;
}
div.comments a, div.comments a:link, div.comments a:visited{color: #FFDF2D}
div.comments a:hover {
color: #fff;
text-decoration: none;
}
/*---------separator--------*/
.separator{height: 35px;}
/*---------friends page--------*/
.userpicfriends {
position: relative;
top: -5px;
float: left;
padding: 5px;
margin: 0px;
text-align: center;
border: none;
font-family: "helvetica, sans-serif;
font-size: 0px;
z-index: 15;
background: transparent!important;
color: #222;
font-weight: normal;
line-height: 50%;
}
.userpicfriends a font{color: #ffdf2d; font-family: helvetica; font-size: 10px; padding: 0px; margin: 0px;}
.userpicfriends a font:hover{color: #fff;}
.userpicfriends img{display: none; background: transparent!important; color: #ffdf2d;}
/*---------sidebar--------*/
#sidebar {
padding-top: 0px;
margin-top: 0px;
background-color: transparent!important;
border: none;
font-size: 11px;
font-family: "helvetica", sans-serif;
color: #FFDF2D;
float: right;
text-align: left;
}
.defaultuserpic {
text-align: center;
display: none;
}
.sbarheader {}
.sbarbody {
padding: 0px;
}
.sbarbody2 {
padding: 0;
color: #fff;
background: #000;
text-align: justify;
font-family: arial;
position: absolute;
top: 150px;
right: 250px;
width: 285px;
height: 200px;
overflow: hidden;
font-size: 11px;
z-index: 20;
}
.sbarbody2:hover{height: 275px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #FFDF2D;}
div#sidebar a:hover {
color: #fff;
text-decoration: none;
}
table.calendar {
margin: auto;
padding-top: 15px;
}
.sbarcalendar {
border: none;
text-align: center;
font-family: "helvetica", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border: none;
background-color: transparent!important;
text-align: center;
font-family: "helvetica", sans-serif;
font-size: 11px;
font-weight: bold;
color: #fff;
}
.sbarcalendarposts a{color: #fff;}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem{
padding-left: 0px;
list-style: none;
width: auto;
display: inline;
}
li.sbartitle, #sidebar_summary{
display: none;
}
#sidebar_linklist{
position: absolute;
top: 375px;
left: 0px;
width: 100%;
background: #222;
border: none;
padding: 8px;}
#sidebar_tags, #sidebar_calendar{display: none;}
.sbaritem a {border: 0; display: inline; margin: 0 0 1px 1px; padding: 1px 5px 1px 5px; border-left: 1px solid #000; }
/*---------footer--------*/
#footer {
width: 100%;
text-align: left;
font-family: "helvetica", sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;
background-color: transparent!important;
color: #000000;
border-top: 15px solid #222;
z-index: 100;
clear: both;
}
div#footer a, div#footer a:link, div#footer a:visited{color: #fff;}
div#footer a:hover{color: #ffdf2d;}
#footer .viewing {}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {clear: both;}
/*---------archive page--------*/
ul.year {
text-align: center;
padding-bottom: 0px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: none;
background: #222;
color: #ffdf2d;
}
td.yeardate a{color: #fff;}
table.yeartable td.yearday {
background-color: transparent!important;
text-align: center;
color: #fff;
}
td.yearmonth {
border-style: none;
color: #222;
}
/*---------comment page--------*/
.datesubjectcomment {
background-color: #222;
padding: 5px;
margin-top: 0px;
}
.userpiccomment {
position: relative;
background-color: #ffdf2d;
top: -10px;
left: -10px;
padding: 5px;
margin: 0px;
z-index: 15;
float: left;
height: 75px;
width: 75px;
}
.box {
border: none;
padding: 0px;
clear: left;
}
input, textarea {
background-color: #f6f6f6;
color: #222;
font-family: helvetica;
font-size: 12px;
}
textarea.textbox {
width: 100% !important;
}
.reply{
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "helvetica", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #f6f6f6;
color: #000000;
}
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px 10px 10px 90px;
font-size: 11px;
font-family: helvetica, sans-serif;
color: #fff;
}
.commentbox {
border: none;
padding: 10px;
margin: 10px;
background-color: #222;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #fff;}
.datesubjectcomment a:hover {color: #ffdf2d;}
.commentboxpartial {
border: none;
padding: 10px;
margin: 10px;
background-color: #222;
}
.commentinfo {
background-color: #222;
margin-top: 10px;
width: 100%;
}
.skiplinks {text-align: center; background: #222; padding: 10px; font-family: helvetica; text-transform: lowercase;}
/*---------misc--------*/
.clear {height: 15px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: bold !important;
color: #ffdf2d !important;
}
div.ContextualPopup .Userpic {
padding:10px;
background:#ddd;
margin:4px;
border:1px solid #222;
}
div.ContextualPopup div.Inner {
position: relative;
top: -2px;
left: -2px;
background-color: #222 !important;
color: #000 !important;
border: 5px solid #ffdf2d;
padding: 0px;
width: 20em;
color: #fff;
}
div.ContextualPopup .Content {
padding: 10px;
margin: 4px 4px 4px 4px;
background:#fff;
}
div.ContextualPopup .Relation {
font-variant:lowercase;
font-family:helvetica;
font-size:12px;
color:#ffdf2d;
letter-spacing:1px;
border-bottom:5px solid #222;
padding:0px 0px 4px 0px;
margin:0px 0px 4px 0px;
}
/*----------links----------------*/
a, a:link, a:visited {
color: #ffdf2d;
text-decoration: none;
}
a:hover {
color: #222;
text-decoration: none;
}
blockquote {font-size: 11px; font-family: helvetica; color: #000; font-weight: light; border-left: 5px solid #222; border-right: 5px solid #222; padding: 10px;}
b, s, i, u, big, small {color: #ffdf2d;}
code, kbd, pre, tt {
font-family: monospace;
}
b, s, i, u {}
/*---------tiny icons--------*/
/* Generated by Malionette's Tiny Icon Generator */
img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i53.tinypic.com/iglx5z.jpg) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i56.tinypic.com/j15wr6.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i52.tinypic.com/2i9pmrb.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i52.tinypic.com/250l8w5.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i53.tinypic.com/21d3ih5.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_groups.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i55.tinypic.com/i1k9xs.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"], img[src*="userhead"] {
background:url("http://i53.tinypic.com/iglx5z.jpg") no-repeat !important;
height:0; padding: 16px 0 0 15px !important; width:0;}
Features
The layout features the "hovering sidebar" which means if you hover over the blurb text it will extend the box so the full text will be displayed. As explained in the blurb text in the layout, the height of the blurb is 200px, when hovered over it will extend to 275px. You may change that if you'd like, but it you extend it much further than 275px it will extend into your entries. If your text exceed 275px it will not display even when hovered. You can change the overflow option to make it appear or not appear, to learn about overflow see this tutorial.
Additional Customization
The metadata in the layout is not the typical metadata found on standard livejournal styles, to get your metadata like it is in the layout you must have a paid account, and use layers. To learn more about layers see this tutorial, to learn about how to cusotmize your metadata using your layers, see this tutorial.
The background image is actually a background image and not a header. The dimensions for the image are 1280x375. If you are wanting to use a header instead of a background image, the color of the background if #ddd. See my help policy below before you ask questions!
Credits
tiny icons by brsev
Questions
FAQ | HOW TO CREDIT
Notes
I have recently changed my policy on layout editing help, so please read the FAQ before asking a question, and any general questions about this layout can be redirected to the original post, otherwise follow directions in the FAQ about how to ask questions regarding layouts. Please DO NOT PM me!
like what you see?
watch | more layouts