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.

Flat | Top-Level Comments Only

From:

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?

sireesanwar.livejournal.com

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*

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!

This navstip image isn't the right size. It is coming up 750 x 42 and it should be 1,068px x 63px. That is probably the issue. Click on the above image and re-save it to your facebook... it is possible they are resizing it. If so I suggest adding it to your Scrapbook here at LJ.

The header image is also coming up smaller than it should be. I'm thinking this is the issue. If you can get me bigger images I can upload them into the coding.

Hmmm I also noticed the sidebar image is also coming up smaller. I think FB is resizing them.

Edited Date: 2014-05-23 11:18 pm (UTC)

I'll get back to you. Right now I'm super busy all of a sudden with hardly time for eljay. But once I get back to my blog I'll give you a quick poke with the new images. Thank you for all your help btw, it's really appreciated!

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)

About

Links

Tags

Summary

April 2025