87. Ribbon Rainbow
Layout Style: S2 Flexible Squares
Features: Ribbon Navbar, Sidebar and Subject
Layout Width: 1000px
{ Preview } { Live Blue }
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:
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:
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.
Features: Ribbon Navbar, Sidebar and Subject
Layout Width: 1000px
{ Preview } { Live Blue }
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:
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.