layoutlounge | 94. Pretty in Pink

Entry tags:

94. Pretty in Pink

Layout Style: S2 Flexible Squares
Features: Embedded Fonts, Colorful, Custom Userpic, Floating Effect, Title/Subtitle
Layout Width: 1000px

{ Preview } { Live }
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares- 94. Pretty in Pink
Layout by http://layout_lounge.livejournal.com/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #aaaaaa;
 background-image: url(BACKGROUND IMAGE);
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: left top;
 color: #888888;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 }

a, a:link, a:visited { color: #E61C24; }
a:hover { color: #cccccc; }

blockquote {
 width: 80%;
 margin-left: 10px;
 padding-left: 10px;
 margin-left: auto;
 margin-right: auto;
 color: #000000;
 font-size: 14px; 
font-style: italic;
 text-align: left;
 border-left: 8px solid #F4A7B8; 
 }
i img { border: 10px solid #e5e5e5; }

b, strong { color: #298779; }
i, em { color: #5A7A41; }
u { color: #2F6E8A; }
s, strike { color: #F6A000; }
q { font-style: italic; color: #1A5D7A; }

.b-repost-item { display:none }

code, kbd, pre, tt {font-family: "monospace"; }

/*--------------General------------*/
#content {   
 width: 1000px; 
 background-color: #F4A7B8;
 margin: 0px auto 20px auto;
 text-align: left;
 padding: 0px;
 }

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

.subcontent {
 width: 690px;
 background-color: #F8F8F8;
 margin: auto;
 margin-right: -1px;
 padding-top: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
 }

/*---------------Header--------------*/
#header {  
 position: inherit;
 width: 1000px;
 height: 40px;
 text-align: center;
 color: #ffffff;
 margin: 0px 0 0 20px;
 font-family: Oswald, arial !important;
 font-size: 15px !important;
 letter-spacing: 1px;
 text-transform: lowercase;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 12px 15px 5px 15px;
margin: 0px -9px 0 -8px;
 letter-spacing: 1px;
 color: #ffffff;
 text-align: center;
}

div#header li.view { 
 color: #ffffff;
font-style: italic;
padding: 12px 15px 5px 8px;
margin: 0px -9px 0 3px;
 }

div#header a:hover {
background-color: rgba(255, 255, 255, 0.3);
 color: #ffffff;
 padding-bottom: 10px;
top: 0px; left: 0px; 
}

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

ul.navheader li  {
 display: inline;
 list-style: none;
 }
 
.title { 
 position: relative;
 width: 100%;
 margin: -160px auto 0px auto;
 padding: 0px;
 font-size: 72px;
 font-family: "Great Vibes", Brush Script MT, arial, verdana;
 text-align: center;
 color: #F4A7B8;
 z-index: 199;
}

.subtitle { 
 position: relative;
 width: 100%;
 margin: -25px auto 0px auto;
 padding: 0px;
 font-size: 20px;
 font-family: "abel", arial, verdana;
 text-align: center;
 color: #cccccc;
 z-index: 199;
 }

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

.lj-view-recent #footer, .lj-view-friends #footer {
top: 90%;
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;
z-index: 0; }

/*--First Link--*/

ul.navfooter a {
}

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

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: rgba(244, 167, 184, 0.6);
color: #000000;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 20px 20px 20px 20px;
margin: 0px 5px -10px 5px;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
padding: 20xp 10px 20px 10px;
}

/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(244, 167, 184, 0.6);
color: #000000;
padding: 20xp 10px 20px 10px;
 }

ul.navfooter li + li a:hover {  }

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

#footer .viewing { display:none; }

/*-------------Sidebar--------------*/
#sidebar {
 width: 250px;
 float: right;
 margin-top: -10px;
 padding: 10px 20px; 
 font-family: "Abel", arial, georgia;
 font-size: 14px;
 color: #000000;
 text-align: center;
 text-transform: normal;
 }

.sbarbody2, li.sbaritem2 { 
 background-color: #F8F8F8;
padding: 10px 5px 5px 5px; 
margin: 0px auto 20px auto; 
 font-family: "Abel", arial, sans-serif;
font-size: 14px !important; 
text-transform: lowercase; 
text-align: center;
list-style-type: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
 }

.sbarbody {
 background-color: #F8F8F8;
list-style-type: none;
margin: 0px auto 20px auto;
padding: 5px 5px 5px 0px;
padding-bottom: 5px; 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
}

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

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

li.sbaritem a {
color: #58A5BC;
display: inline;
 font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }

li.sbaritem a:hover {
color:#888888;  }

li.sbartitle {
 list-style: none;
 color: #cccccc; 
text-align: center;
letter-spacing: 2px;
 font-family: "Abel", trebuchet ms, arial, sans-serif;
 font-size: 17px;
 text-transform: uppercase;
 margin: 5px 9px 5px 0px;
 }

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

#sidebar_linklist li.sbaritem a {
border-bottom: 1px solid #eeeeee;
color: #58A5BC;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -3px 0px;
text-align: center;
}

#sidebar_linklist li.sbaritem a:hover {
color:#cccccc; 
text-align: center;
}

td.sbarcalendar {background-color: transparent !important;
padding: 5px;}

td.sbarcalendarposts {background-color: #eeeeee; border-bottom: 0px solid #dedede; padding: 3px; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);  }

td.sbarcalendarposts a { color: #E61C24;}
td.sbarcalendarposts a:hover { color: #ffffff;}

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

#sidebar_summary li.sbaritem {
 color: #eeeeee;
 padding: 5px;
 text-transform: normal;
 margin: 2px auto 2px auto;
 text-align: left;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
 border-bottom: 1px solid #eeeeee !important;
 }

#sidebar_summary li.sbaritem a {
 text-decoration: none;
 display: inline !important;
 font-size: 12px;
 color: #58A5BC;
 }

#sidebar_summary li.sbaritem a: hover {
 color: #eeeeee !important;
 border: 0px solid #777777;
 background-color: transparent !important;
 }

#sidebar_tags .sbarcontent { height: 300px;         overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px 10px 5px 0px; }

li.tagBox a { 
border-bottom: 1px solid #eeeeee;
color: #58A5BC;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -3px 0px;
text-align: center;
text-transform: uppercase;
}

li.tagBox a:hover { 
color:#bbbbbb; 
text-align: center;
 }

#sidebar_tags li.sbaritem a { 
border-bottom: 1px solid #eeeeee;
color: #58A5BC;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -3px 0px;
text-align: center;
text-transform: uppercase;
}

#sidebar_tags li.sbaritem a:hover { color:#bbbbbb; 
text-align: center;
 }

.defaultuserpic {
background-color: #ffffff;
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
 -webkit-box-shadow: #ccc 0 0 5px;
 -moz-box-shadow: #ccc 0 0 5px;
 -ms-box-shadow: #ccc 0 0 5px;
 -o-box-shadow: #ccc 0 0 5px;
 box-shadow: #ccc 0 0 5px;
}

.defaultuserpic img {
}

.social-roll {
 border-radius: 50%;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
 -ms-transition: all ease 0.3s;
 transition: all ease 0.3s;
}
.social-roll:hover {
 box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
 -webkit-transform:rotate(540deg);
 -moz-transform:rotate(540deg);
 -o-transform:rotate(540deg);
 -ms-transform:rotate(540deg);
 transform:rotate(540deg);
}

/*-----------Entries-----------*/
.entry {
 padding: 20px 30px 50px 30px;
 margin: 0px;
 color: #000000;
 font-family: "arial";
 font-size: 14px;
 text-align: left;
z-index: 50;
 }

.entry img { max-width: 700px; height: auto;  }

div.entry_text li { line-height: 16px !important; list-style: normal;  list-style-position: outside; }

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

.date  {
 margin: 0px 10px -15px 0px;
 text-align: right; 
 color: #dddddd;
 font-family: "Oswald", arial, sans-serif;
 font-size: 14px;
 }

.subject {
 padding: 0px 0px 5px 5px;
 margin: 10px 10px 0px 10px;
 color: #F6A7B8;
font-family: "Oswald", open sans condensed, georgia, arial;
 font-size: 25px;
 letter-spacing: 1px;
 text-align: left;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #F6A7B8;}

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

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

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

.skiplinks {
 text-align: center;
 margin-top: 5px;
 margin-bottom: 0px;
 font-family: "Abel", arial, sans-serif;
 font-size: 14px;
 padding: 10px 10px 5px 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #999999;
 }
 .skiplinks a { color: #58A5BC; }
 .skiplinks a:hover { color: #ffffff; }

.lj-like {
 width: 690px; 
 clear: left; 
 float: left; 
 text-align: center; 
   line-height: 1 !important;
    margin: 0 !important;
}

.lj-like:after {
    border-collapse: collapse;
    clear: left;
    content: "";
    display: table;
}

.userpic, .userpicfriends {
 float: left;
margin: -50px 15px 25px -100px;
 padding: 10px;
 width: 100px;
 height: 100px;
 text-align: center;
 color: #FFF!important; 
 background: #ffffff !important;
-webkit-border-radius: 60px 60px 5px 60px;
-moz-border-radius: 60px 60px 5px 60px;
-ms-border-radius: 60px 60px 5px 60px;
-o-border-radius: 60px 60px 5px 60px;
border-radius: 60px 60px 5px 60px; 
 -webkit-box-shadow: -5px 0 2px  rgba(0, 0, 0, 0.2);
 -moz-box-shadow: -5px 0 2px  rgba(0, 0, 0, 0.2);
 -ms-box-shadow: -5px 0 2px  rgba(0, 0, 0, 0.2);
 -o-box-shadow: -5px 0 2px  rgba(0, 0, 0, 0.2);
 box-shadow: -5px 0 2px  rgba(0, 0, 0, 0.2);
 }

.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;
-webkit-border-radius: 50px 50px 5px 50px;
-moz-border-radius: 50px 50px 5px 50px;
-ms-border-radius: 50px 50px 5px 50px;
-o-border-radius: 50px 50px 5px 50px !important;
border-radius: 50px 50px 5px 50px;
 }
 
.userpicfriends a, .userpicfriends font {
 margin: -2px 0px 0px 0px;
 position: relative;
 background-color: transparent!important;
 float: center;
 font-family: 'Abel', sans-serif;
 font-size: 11px;
 text-align: center;
 color: #58A5BC;
text-shadow: 2px 2px 4px #777777;
 -webkit-transition: background-color 0.3s ease;
 -moz-transition: background-color 0.3s ease;
 -ms-transition: background-color 0.3s ease;
 -o-transition: background-color 0.3s ease;
 transition: background-color 0.3s ease;
 }
 
.userpicfriends a:hover, .userpicfriends a font:hover {color: #bbbbbb;  text-shadow: 2px 2px 6px #bbbbbb; }

/*-----Recent Posts ---*/
.entry--threeposts {
 background-color: #fafafa;
 margin-top: -10px;
 margin-bottom: -10px;
 margin-left: 20px !important;
 padding-bottom: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
}

.threeposts__inner {
 margin: 0px auto;
}

.threeposts__header {
 margin: 15px 0px 15px 0px;
 font-family: ProximaNovaSemibold, Tahoma, Arial, sans-serif;
 font-weight: 400;
 font-style: normal;
 font-size: 18px;
 letter-spacing: normal;
 text-transform: uppercase;
}

.threeposts--item-size-xxs .threeposts__item { height: 160px; }

.threeposts__item {
 display: inline-block;
 position: relative;
 width: 30.66%;
 margin: 0px 4% 1.5em 0px;
 box-sizing: border-box;
 vertical-align: top;
}

.threeposts__title {
    font-size: 12px !important;
}

/*-----------  Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
background-color: transparent !important;
margin: 5px 0 0 0;
font-size: 9px;
font-family: Verdana;
color: #888888;
text-align: left; 
}

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

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

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

.ljtags a { color: #58A5BC; }
.ljtags a:hover { color: #cccccc; }

.comments {
background-color: #dddddd;
color: #000000;
 font-size: 12px; line-height: 130%; 
letter-spacing:-0.1em;
padding: 5px;
margin-top: 8px; 
margin-left: -30px; 
position:absolute;
text-align:center;
width:auto;
-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; 
}

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

div.comments a:hover {
color:#000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 0px solid #374C60;
letter-spacing: 3px;
}

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

form div.box { text-align: left; }

center.comment-links {  }

div#footer.box { text-align: center; }

.commentbox {
 background-color: #ffffff;
 align: left; 
 padding: 5px; 
 margin: 2px 2px 10px 2px; 
 color: #000000;
padding-bottom: 5px; 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
 }

.datesubjectcomment {
 margin-top: 10px;
 text-align: left;
 padding: 5px;
 font-size: 12px;
 color: #bbbbbb;
 }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #58A5BC; cursor: crosshair; text-decoration:none; font-weight:none;}
  
.datesubjectcomment a:hover {
 color: #bbbbbb; cursor: crosshair; text-decoration:none; font-weight:none;}

.userpiccomment {
 background-color: #ffffff;
 margin: -2px 5px 5px 5px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: left;
 -webkit-border-radius: 5px 60px 5px 60px;
 -moz-border-radius: 5px 60px 5px 60px;
 -ms-border-radius: 5px 60px 5px 60px;
 -o-border-radius: 5px 60px 5px 60px;
 border-radius: 5px 60px 5px 60px;
}

.commentreply {
 font-family: "trebuchet ms", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 13px;
 font-family: "arial;
 color: #bbbbbb;
 }

.commentinfo {
 margin-top: 5px; 
 width: 100%;
 }

.replytosubject {
 font-weight: 300;
 color: #000000;
 font-size: 16px;
 }

div#content textarea  { width: 80%; }

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

ul.year { margin-left: 10px;  text-align: center;  padding: 5px;          background-color: #F8F8F8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;  -khtml-border-radius: 5px; }

ul.year li {display: inline;}

table.yeartable { width: 99%; margin-left: 10px; margin-right: 10px; padding: 20px 100px 20px 100px;background-color: #F8F8F8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;  -khtml-border-radius: 5px;  }

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

table.yeartable td.yearday { text-align: center; color: #555555; border: 1px solid #dddddd; }

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

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

ul.ljtaglist {
 color: #C7D62D;
 font-family: "Abel", arial, trebuchet ms, sans-serif;
 font-size: 16px;
 text-align: left;
 text-transform: uppercase;
 padding: 8px 8px 8px 50px;
 margin-left: 10px;
background-color: #F8F8F8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;  -khtml-border-radius: 5px;
 border: 0px solid #dedede;
 }

ul.ljtaglist li  {    list-style-type: disc;
    list-style-position: outside;
    list-style-image: none;
}

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

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

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock.png) 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/panda-icon.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/panda-icon.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/bamboos.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------FONTS-----------*/

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: local('Abel'), local('Abel-Regular'), url(http://fonts.gstatic.com/s/abel/v6/brdGGFwqYJxjg2CD1E9o7g.woff2) format('woff2'), url(http://fonts.gstatic.com/s/abel/v6/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://fonts.gstatic.com/s/oswald/v10/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2'), url(http://fonts.gstatic.com/s/oswald/v10/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes'), local('GreatVibes-Regular'), url(http://fonts.gstatic.com/s/greatvibes/v4/6q1c0ofG6NKsEhAc2eh-3Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2'), url(http://fonts.gstatic.com/s/greatvibes/v4/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }

.headerimage {
 position: relative;
 width: 960px;
 height: 250px;
 margin: 3px auto 0px auto;
 padding: 0px;
background-color: transparent !important;
 background-image: url(HEADER IMAGE);
background-repeat: no-repeat;
background-position: top center;
border-width: 20px 20px 0px 20px;
border-style: solid;
border-color: #F4A7B8;
z-index: 99;
 }

.separator { height: 20px; }

Additional Layout Directions:

The title and subtitle are available for use in this layout. If you would prefer not to use it go to the .title & .subtitlte coding sections and add the line display: none; to the coding. This will "hide" the title and subtitle sections.

The background image provided is a transparent image and you can change the background color in the .body section to any color which will show through it. The image below is actually white but I've given this image a background color for your ability to view it. When you save it, there will be no color to it. For more transparent images see Layout Lounge: Semi-Transparent Images.

For additional help see the Helpful Tutorials list below the images.

Images

Helpful Tutorials:

Common Issues

Theme and Layout Change Tutorial

Image Tutorial: Adding Background & Header Images in Coding

Sidebar: What I Do and Do NOT Want On It

LJ Advertisements: What is that weird box on my LJ?

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

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

Having Trouble? Try:
Theme and Layout Change Tutorial or Helpful Hints
If that didn't work. Comment Below with example if possible.

Flat | Top-Level Comments Only

It´s lovely!

I´ll save it for later. :)

Thanks.

This is amazing <3 Really nice layout!

Thank you.

Hi, I am using mini iPad and has been using the 90. Oxygen layout for a while with no problems and wanted a change so wanted to use this layout but I have a problem - the userpics are cut off at the side (see example below - ignore the header for now) ...could you help?

http://i.imgur.com/JHtQ6mC.png

I have also a question - can I change the pink background/boarder/text to a different colour and if yes, how do I do that please?

Okay first things first. Find this coding:
.userpic, .userpicfriends {
float: left;
margin: -50px 15px 25px -100px;
padding: 10px;
width: 100px;
height: 100px;
text-align: center;
color: #FFF!important;
background: #ffffff !important;
-webkit-border-radius: 60px 60px 5px 60px;
-moz-border-radius: 60px 60px 5px 60px;
-ms-border-radius: 60px 60px 5px 60px;
-o-border-radius: 60px 60px 5px 60px;
border-radius: 60px 60px 5px 60px;
-webkit-box-shadow: -5px 0 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -5px 0 2px rgba(0, 0, 0, 0.2);
-ms-box-shadow: -5px 0 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: -5px 0 2px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0 2px rgba(0, 0, 0, 0.2);
}

In the italicized line it has the margin left of -100px. This is what you want to change. So if it is 0px then it is likely going to be in the post and the title should move over. Mess with it and see how it looks on your iPad.

So you don't want Pink? What color do you want? If you are changing all the pink it is a lot to change. I could walk you through it but it isn't easy to do. Let me know.

Edited 2015-07-29 21:25 (UTC)

That helped... Thank you and now I just realised you did help me with this issue on one of my comms about a year or so back...ops! Sorry!

Don't worry about the colour if it's too much work - I wanted a silimar colour - light blue - same as the current header and the current layout (oxygen) on my LJ but if it's a lot of work, I will just leave it till I get an apporiate header to match the pretty pink layout.

But the margin tip did really help, thank you!!

It isn't actually that hard for me but it is a lot to explain...

but check out

workshop_rees which I made the changes too and posted the coding for you with the margins changed on the userpics.

Awwww thank you very much! :))

No problem.

Love this layout, thanks <3

Really glad you like it.

Hello! Thank you very much for this but I'm having a trouble changing the color of the "cut" and "spoiler". Also the "leave a comment" part

I'm also having troubles here since the "title" of the entry on the header here is large. How to resize it?
http://www.mediafire.com/convkey/520f/ywq2aa3622gvp3wzg.jpg

Sorry if it's too much.

Hoping for your response. Thank you!

Edited 2015-09-05 13:46 (UTC)

Okay so your title is too big. Find .title coding in the HEADER section. This has the font size at 72px. You might want to go down to 50px or lower. Change it and see how it looks.

Are you talking about the BLUE color for the SPOILER, LJ CUT and LEAVE A COMMENT links?

This might be because of the line:
a, a:link, a:visited { color: # 7a7a7a; }

Remove the space between the # and 7a7a7a. This space can break coding.

Aww! Thanks a bunch! It worked for me!

i'm using this theme now and it's so lovely, thank you so much!!

You are very welcome.

Thank you so much! ^^

You're welcome.

Here’s my issue: My text is running into my userpics on entries. I changed my userpic frame style from the rounded shape to a square because I often have UPs with text that gets cut off with the round shaped frame. Comments are not doing this because I chose to leave them a rounded shape.

So, what coding needs adjusted to fix this? You can go look at my journal and see, if needed. Please and thank you.

The problem lies in the margins...

This is what yours currently says:
.userpic, .userpicfriends {
float: left;
margin: 5px -60px 25px 15px;

I would change those margin to

margin: 5px 10px 10px 10px;

This should take care of your issue.

Did the trick! Thank you.

So Pretty! I'm saving this :)

Thanks!

ive looking at what to layout to use, and decided to use this instead, imma just change a lil of some fonts and color i guess...thanks much :)

Sounds good.

Hi there. I LOVE your layouts! I mod three different Supernatural Bangs and use your layouts for all of them! <3

I just have a super stupid question... I used this layout and changed all the colors to match the theme of the Bang. I just can't find the code line to change the color of the "go earlier" link. I would like to change it to E61C24 ( a red), but no matter what I do it is still a pink color.

It is going to be under footer... one of the footer links to be specific

Does that help.

It did in a round about way.

I have never messed with rgba before. I didn't know that is what I needed to change. I then had to figure out how to get that to make with the Hex color. Learning!

Thank you so much for all the hard work.

I forgot it was rgba. Sorry about that. I'm glad you found it. Believe me this is how I've gotten this far... tinker around and learn as you go.

Oh, I have learned a lot since I started to mess with your code. Before I found your site I didn't know anything about LJ coding. Now, I can at least go in and change a few things.

I've followed your tutorials on how to change the User Icon next to the post and even the little icons for users and coms in posts!

I, for the most part, was able to piece together what I needed from your page, the rgba was the first thing that really threw me for a loop.

Thank you so much for your talent and patience!

I'm so glad. I made this comm just for that reason. I have thought about doing some more in depth coding posts but haven't really thought it through enough to put it into action.

You are very welcome.

Flat | Top-Level Comments Only

94. Pretty in Pink

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

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

thanks :)

Re: thanks :)

no subject

no subject

no subject

no subject

no subject

no subject