layoutlounge | 87. Ribbon Rainbow

Layout Style: S2 Flexible Squares
Features: Ribbon Navbar, Sidebar and Subject
Layout Width: 1000px

{ Preview } { Live Blue } { Live Teal } { Live Purple } { Live Red }
Credit:

layout_lounge

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

/*--------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #ffffff;
 background-image: url(BACKGROUND IMAGE URL);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #888888;
 font-family: "verdana", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #4BA2B8; }
a:hover { color: #444444; }

blockquote {
 width: 75%;
 background: #383D50;
 margin-left: auto;
 margin-right: 0;
 padding: 10px; 
 color: #ffffff;
 font-size: 13px;
 line-height: 16px;
 font-family: "trebuchet ms", arial, sans-serif;
 text-align: left;
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.6);
 }

img.special, i img { border: 10px solid #f5f5f5; }

b, strong { color: #FF2952; }
i, em { color: #4c228a; }
u { color: #AFC40E; }
s, strike { color: #FF6A0D; }

.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; 
 margin-top: 5px; 
 text-align: left;
 padding: 0px;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.6);
 }

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

.subcontent {
 margin: auto;
 padding-top: 10px;
 }

/*---------------Header--------------*/
#header {  
 position: absolute;
 left: 0;
 width: 100%;
 height: 63px;
 text-align: center;
 color: #ffffff;
 padding: 8px 10px 8px 0;
 margin-top: 290px;
 margin-left: -7px;
 font-family: verdana, arial !important;
 font-size: 11px !important;
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: none;
 background-color: transparent !important;
 background-image: url(HEADER-NAVEBAR IMAGE URL);
 background-repeat: no-repeat;
 background-position: center top;
}

div#header a, div#header a:link, div#header a:visited,

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 15px 10px 9px 10px;
margin: 0px -8px 0 -7px;
 font-family: verdana !important;
 letter-spacing: 1px;
 color: #ffffff;
 text-align: center;
 text-shadow: 1px 1px 7px #222222;
}

div#header li.view { 
 color: #ffffff;
padding: 15px 10px 9px 10px;
margin: 0px -8px 0 3px;
 font-style: italic;
 text-shadow: 1px 1px 7px #222222;
 }

div#header a:hover {
 color: #000000;
 font-style: italic;
 text-shadow: 1px 1px 7px #222222;
 }

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

ul.navheader li  {
 display: inline;
 list-style: none;
 }
 
.title { position: absolute;
 display: none;
 width: 100%;
 height: 100px;
 margin-top: -130px;
 padding: 0px;
 font-size: 72px;
 font-family: "NevisonCasD", Brush Script MT, arial, verdana;
 text-align: center;
 color: #ffffff;
 text-shadow: 1px 1px 7px #222222;
}

.subtitle { display: none; }

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

.lj-view-recent #footer, .lj-view-friends #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:#70736C !important; }

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: #999999;
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 10px;
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.6);
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#FFFFFF;
background-color: #70736C;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding-right: 5px;
border-left: 6px solid #374C60;
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;
 background-image: url(SIDEBAR IMAGE URL);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 100% 100%;
margin-top: 350px;
width: 270px;
margin-right: -60px; 
padding-bottom: 100px;
color: #ffffff;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
float: right;
 -moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
-khtml-border-radius: 20px 20px 0px 0px;
}

.sbarbody2 { 
padding: 5px; 
margin-top: 0px; 
margin: 0 18px 0 18px; 
line-height: 12px; 
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px !important; 
text-transform: lowercase; 
text-align: center;
 border: 0px solid #E0E0E0; }

.sbarbody {
margin:0;
padding: 5px;
-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;
}

ul.sbarlist{
margin: 0px;
padding: 0px 5px 0px 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: #33512B;
display: inline;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-style: none;
font-weight: lighter;
margin-right: 0px;
padding: 2px;
text-align: left; }

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

li.sbartitle {
 list-style: none;
 color: #ffffff; 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; -khtml-border-radius: 10px;
text-align: center;
letter-spacing: 0px;
 font-family: "Grand Hotel", trebuchet ms, arial, sans-serif;
 font-size: 25px;
 text-transform: normal !important;
 margin: 1px 5px 1px 5px;
text-shadow: 2px 2px 6px #444444;
 }

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

#sidebar_linklist li.sbaritem a {
color: #000000;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-right: 20px;
margin-left: 5px;
padding:2px 5px;
text-align: left;
 text-shadow: 1px 1px 5px #bbbbbb;
border-left: 0px solid #EDEDED; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;}

#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: transparent !important;
padding: 3px;}

td.sbarcalendarposts {background-color:transparent;
padding: 3px;}

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

#sidebar_summary, #sidebar_calendar, h2 { display: ; }

#sidebar_tags .sbarcontent { height: 150px;         overflow-x: hidden; overflow-y: auto;}

li.tagBox a { color: #000000;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-right: 20px;
margin-left: 5px;
padding:2px 5px;
text-align: left;
 text-shadow: 1px 1px 5px #bbbbbb;
border-left: 0px solid #EDEDED; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;}

li.tagBox 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; }

#sidebar_tags li.sbaritem a { color: #000000;
display:block;
 font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-right: 20px;
margin-left: 5px;
padding:2px 5px;
text-align: left;
 text-shadow: 1px 1px 5px #bbbbbb;
border-left: 0px solid #EDEDED; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;}

#sidebar_tags 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; }

.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #ffffff !important;
border: 0px solid #cccccc;
 -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 {
}

/*-----------Entries-----------*/
.entry {
 padding: 10px 5px 10px 20px;
 margin-bottom: 10px;
 color: #000000;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 14px;
 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, .userpicfriends {
 position: relative;
background-color: #ffffff !important;
 border: 0px solid #eeeeee;
 float: left;
padding: 10px; 
margin: 0px 5px 5px -25px;
 width: 100px;
 height: 100px;
 text-align: center;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 11px;
 z-index: 15;
 -webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 -ms-border-radius: 60px;
 -o-border-radius: 60px;
 border-radius: 60px;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
 }

.userpic a { color: #DC1A4E !important; }
.userpic a:hover { color: #bbbbbb !important; }

.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 -ms-border-radius: 50px;
 -o-border-radius: 50px !important;
 border-radius: 50px;
}

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

.date  {
 margin: 0px 10px -15px 10px;
 text-align: center; 
 padding-right: auto;
 padding-left: auto;
 color: #ccccca;
 font-family: "IM Fell DW Pica SC", arial, sans-serif;
 font-size: 14px;
 text-transform: normal;
-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 {
 background-color: transparent !important;
 background-image: url(SUBJECT IMAGE URL);
 background-repeat: no-repeat;
 background-position: center top;
 width: 797px;
 height: 76px;
 padding: 20px 0px 5px 5px;
 margin: 20px 10px 0px -6px;
 color: #ffffff;
font-family: "Grand Hotel", open sans condensed, georgia, arial;
 font-size: 28px;
 font-weight: normal; 
 text-align: left;
 text-transform: normal;
-moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -khtml-border-radius: 4px;
 text-shadow: 1px 1px 7px #222222;
 }
 
.subject a, .subject a:link, .subject a:visited {color: #ffffff;}

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

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

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

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #DC1A4E;
 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: 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: 8px; 
text-transform:uppercase;
}

.comments {
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;
-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:#999999;
font-family: open sans condensed, arial !important;
 font-size: 14px !important; line-height: 130%; 
line-height:1;
margin:0;
padding:5px 10px;
letter-spacing: 1px; 
text-align: center; }

div.comments a:hover {
color:#ffffff;
background-color: #959595;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 4px solid #374C60;
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;
 }

form div.box {
 text-align: left;
 background-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-size: 10px;
 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; 
 }

.userpiccomment {
 margin: -2px 5px 5px 0px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: left;
 background: #FFF!important;
 -webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 -ms-border-radius: 60px;
 -o-border-radius: 60px;
 border-radius: 60px;
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.6);
}
  
.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: transparent !important;
 }

.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://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.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.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: 'Grand Hotel';
  font-style: normal;
  font-weight: 400;
  src: local('Grand Hotel'), local('GrandHotel-Regular'), url(http://themes.googleusercontent.com/static/fonts/grandhotel/v1/NrGQkrs9rbHm5EYx0Eil0obN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

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

@font-face {
  font-family: 'Delius Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Delius Swash Caps'), local('DeliusSwashCaps-Regular'), url(http://themes.googleusercontent.com/static/fonts/deliusswashcaps/v6/uXyrEUnoWApxIOICunRq7-HbywbERJ_YcOpO6Co4fHY.woff) format('woff');
}

@font-face {
  font-family: 'IM Fell DW Pica SC';
  font-style: normal;
  font-weight: 400;
  src: local('IM FELL DW Pica SC'), local('IM_FELL_DW_Pica_SC'), url(http://themes.googleusercontent.com/static/fonts/imfelldwpicasc/v4/xBKKJV4z2KsrtQnmjGO17ORrWueMUZPacwWUa4j7Ahg.woff) format('woff');
}

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }
 
#lj_controlstrip_statustext {
 color: #999999;
 font-size: 12px;
 font-weight: bold;
 }

#lj_controlstrip {
 margin-top: -50px;
 position: relative;
 width: 100%;
 background-position: center center;
 }

#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: absolute;
 width: 100%;
 height: 300px;
 margin-top: 0px;
 padding: 0px;
background-color: transparent !important;
 background-image: url(HEADER IMAGE URL);
 background-repeat: no-repeat;
background-position: center top;
 }

.separator { height: 10px; }

Theme and Layout Change Tutorial

Additional Layout Directions:
Once you've choosen the ribbon color you would like to use:

Add ribbons to your Scrapbook. These images are large, for the most part, and will be resized in PhotoBucket and TinyPics. Make sure to use the original size of the image from Scrapbook.

Go to the Header Section, find the coding .header and put the Ribbon Navbar direct link where it says HEADER-NAVBAR IMAGE URL.

Then got to the Sidebar Section and find the coding .sidebar and put the Ribbon Sidebar direct link where it says SIDEBAR IMAGE URL.

Then got to the Entry Section and find the coding .subject and put the Ribbon Subject direct link where it says SUBJECT IMAGE URL.

5. The background image goes in the body coding at the very top of the coding.

6. The header images (Castle, Flowers, Outlander, etc) goes in the .headerimage coding that is located at the very bottom of all the coding.

Ribbon Sidebar:

Ribbon Subject:

Ribbon Navebar:

Headers:

photo graffitigraphic-outlander0128a.png

Background Image

More 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.

Page 1 of 4 << [1] [2] [3] [4] >>

Threaded | Top-Level Comments Only

From:

lovemeinfocus.livejournal.com

A+ FOR THE RED CASTLE ONE OMG

laoracci.livejournal.com

thank you so much. I'm using the red one <333

candream.livejournal.com

This is beautiful. :3

This is probably a stupid question but ... What font did you use for the purple layout? Or is it already in the code so I don't have to add it somewhere? Or do I have to download all fonts for this layout?

~~I feel so stupid, sorry.~~

[EDIT!] Uhm, it looked like I answered another comment. So I post another one. Sorry.

karinawis.livejournal.com

thank you!! I like it a lot! :D

sireesanwar.livejournal.com

Glad you like it. Gotta love Castle and I love that picture of them!

You are welcome!

All fonts are embeded into this coding so you don't have to download anything. They are being pulled from Google Fonts. Makes it easier on everyone.

No problem. It happens.

southrnbygrace.livejournal.com

I don't know what I'm doing wrong, but my theme is all compacted into a narrow column in the middle instead of being full page.

http://southrnbygrace.livejournal.com

I didn't change anything other than the coding in the instructions.

Thanks!!!

Your journal looks normal to me except the ribbon images. It looks like you used the Scrapbook for the images but you need to use the original size of the image. Looks like you are using the 600px size.

As for narrow strip of your journal it is possible you are zoomed out in your browser. Try hitting CTRL + 0 and see if that fixes the issue.

recluse-cicada.livejournal.com

Ahh, it's a really gorgeous layout!

The only problem that I get is that when I scroll, there's a strange blue line and these blue and yellow strips show up? I couldn't get rid of them, for some reason.

Okay this can be one of the following:
1. Questions above the Custom CSS box should be all No's for Free and Plus users.
2. Sometimes it is the Flexible Squares layout you are using so switching to the Autumn base layout and then entering the coding might change things.
3. Some of the line might be ad placements for Plus users.. read about that in the Journal Section #3 (http://layout-lounge.livejournal.com/33030.html).

I also noticed your ribbons are small... this is because you need to use the "Original" image link in Scrapbook... currently you are using the resize of 600.

Let me know if you still need help.

Thank you so much! It was the layout I was using, so that helped it out! :)

Great!

kat-desu.livejournal.com

Really pretty layouts! Memming for future use! :)

I thought I replied to a comment so I deleted my original comment. lol Sorry.
And it happened again. I'm really very sorry.

Glad you like it.

lordes.livejournal.com

I don't know what I'm doing wrong, but I can't get the header image to work. I tried adding it as header-image:(URL); and without that, as your original code didn't include where to put it, and however I try it it keeps looking messed up. Could you maybe help me out?

Okay so the coding does include this. The header-image coding is at the very bottom of all the coding. You should be able to add the url in there and get it to come up.

If you continue to have issues... let me see the problem and I can help you solve it.

I saw! For some reason it didn't copy with. However, it keeps being messed up. I changed my layout for now back to the old one because it just drove me insane. It's probably got to do with me though, not with your coding.

What's happening is that the nav bar under the header is not big enough to completely cover it, which makes it look extremely wonky. I can't figure out how to change that either since I did use the original seize of the image. Maybe it's becauseI have a mac or use firefox?

Okay let's try something. Send me the original size links from your scrapbook of the images you want to use. I'll edit the coding and see if we can do a completed copy and paste. *fingers crossed*

wh1tef0x

Love it so so much!!! Gonna use it thank you!

Glad you like it and you are welcome. Also if you have any problems let me know.

They're in my facebook and on private. I always use that for layouts (and delete them once I'm done with a layout) because facebook (like other storage sites) doesn't tend to mess with the size of the photo you're uploading.

Let me see if you can see this:
https://scontent-a-ams.xx.fbcdn.net/hphotos-prn2/t1.0-9/10156034_756433804390598_1481097395346367466_n.jpg

That is why I use Scrapbook here at LJ for large images. It is so annoying when sites resize my images.

Yep. I can see it.

Indeed.

Background: https://scontent-a-ams.xx.fbcdn.net/hphotos-ash3/t1.0-9/10156034_756433804390598_1481097395346367466_n.jpg

Sidebar (I think): https://scontent-a-ams.xx.fbcdn.net/hphotos-frc3/t31.0-8/q71/s720x720/10333710_756433807723931_5491659639898387879_o.jpg

Oh Merlin I don't remember the names of these things anymore: https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/q71/s720x720/10390272_756433801057265_6757139329771306130_n.jpg

Navstrip: https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-frc3/t31.0-8/q71/s720x720/10275562_756433837723928_3527293700255982673_o.jpg

Header: https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/q84/s720x720/10321699_756433847723927_4083918200617351887_o.jpg

It's only the navstrip I had torubles with though... for some reason.

Thank you for all your help!

Layout Lounge

Layouts, Tutorials, Help, and more

87. Ribbon Rainbow

(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)

(no subject)

About

Links

Tags

Summary

April 2025