Layout Style: S2 Flexible Squares
Features: Large image on the side
Layout Width: 950px/Full
{
Live 1 } {
Live 2 }
Credit:
layout_lounge Theme and Layout Change TutorialAll embedded in coding from Google Fonts
Image to the left
/*--------------------------------
S2 Flexible Squares
Layout by
http://community.livejournal.com/layout_lounge/PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #ffffff;
background-image: url(REALLY A SIDE IMAGE SOMETHING WITH 900-1000px height is best);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
color: #594F4F;
font-family: "verdana", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}
a, a:link, a:visited { color: #D82E46; }
a:hover { color: #777777; }
blockquote {
width: 75%;
margin-left: auto;
margin-right: 100px;
padding: 5px;
color: #594F4F;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
border: 10px solid #f1f1f1;
background-color: #f7f7f7;
}
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; margin-left: 20px; }
/*--------------General------------*/
#content {
background-color: #ffffff;
width: 950px;
float: right;
right: 0;
margin-right: 0px;
text-align: left;
padding-right: 0px;
box-shadow: -20px 0px 15px 0px rgba(255, 255, 255, 0.5);
}
#maincontent {
background-color: #ffffff;
width: 695px;
float: left;
padding-top: 55px;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
color: #594F4F;
text-align: center;
}
.subcontent {
margin: auto;
padding-top: 10px;
}
/*---------------Header--------------*/
#header {
position: absolute;
right: 0;
width: 850px;
height: 20px;
top: 0;
text-align: left;
color: #000000;
padding: 6px 10px 10px 0;
margin-top: 50px;
font-family: verdana, arial !important;
font-size: 11px !important;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
z-index: 16;
}
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 {
background-color: transparent !important;
padding: 10px 10px 11px 10px;
margin: 0px -8px 0 -7px;
font-family: verdana !important;
letter-spacing: 1px;
color: #666666;
text-align: center;
}
div#header li.view {
border-bottom: 4px solid #423F5E;
color: #000000;
padding: 10px 10px 11px 10px;
margin: 0px -8px 0 3px;
font-style: italic;
}
div#header a:hover {
border-bottom: 4px solid #423F5E;
color: #333333;
font-style: italic;
}
ul.navheader {
list-style: none;
line-height: 24px;
margin: 0;
padding: 0;
border-left: lpx solid #ffffff;
}
ul.navheader li {
display: inline;
list-style: none;
border-left: lpx solid #ffffff;
}
.title {
position: fixed;
width: 100%;
height: 100px;
margin: 250px 0px 0px -500px;
padding: 0px;
font-size: 72px;
font-family: "Great Vibes", Brush Script MT, arial, verdana;
text-align: left;
color: #ffffff;
text-shadow: 1px 1px 7px #222222;
z-index: -100;
}
.subtitle {
position: fixed;
width: 100%;
height: 100px;
margin: 303px 0px 0px -500px;
padding: 0px;
font-size: 20px;
font-family: "Delius Swash Caps", arial, verdana;
text-align: left;
color: #cccccc;
}
/*--------------- 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:99;
}
ul.navfooter{
margin:0 auto;
padding:0;}
ul.navfooter a {
}
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.5);
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 20px 30px 20px 30px;
margin: 0px 10px -10px 10px;
}
.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
padding: 20xp 10px 20px 10px;
}
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 {
width: 240px;
margin: 5px 0px 100px 0px;
background-color: #ffffff !important;
color: #4F394C;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: normal;
float: right;
}
.sbarbody2 {
padding: 0px;
background-color: transparent !important;
margin-top: 0px;
margin: 0 0px 5px 0px;
line-height: 12px;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px !important;
text-transform: lowercase;
text-align: center;
}
.sbarbody {
margin:0;
padding: 0px 2px 7px 0px;
-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;
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: #24B694;
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:#D82E46; }
li.sbartitle {
list-style: none;
color: #D82E46;
-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: 30px;
text-transform: normal !important;
margin: 1px 5px 0px 5px;
}
#sidebar_linklist {
list-style-type:none;
padding-top:2px;
text-align: right !important;
text-transform: lowercase;
height: 100%; overflow-x: hidden; overflow-y: auto;}
#sidebar_linklist li.sbaritem a {
color: #333333;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-left:2px;
padding:2px 5px;
text-align: right;
border-right: 3px solid #cccccc;
}
#sidebar_linklist li.sbaritem a:hover {
color:#cccccc;
border-bottom: 1px dashed #cccccc;
text-align: center;
letter-spacing: 2px; }
table.calendar { margin-right: auto; margin-left: auto; }
.sbarcalendar {
padding: 1px;
border: 1px solid #cccccc;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 9px;
}
.sbarcalendarposts {
padding: 1px;
border: 1px solid #cccccc;
background-color: #f7f7f7;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 9px;
}
#sidebar_summary, #sidebar_calendar, h2 { }
#sidebar_summary li.sbaritem {
color: #777777;
padding: 3px;
text-transform: normal;
margin: 3px;
text-align: left;
border-bottom: 1px dashed #cccccc;
}
#sidebar_summary li.sbaritem a {
text-decoration: none;
display: inline !important;
color: #333333;
border: 0px solid #333333 !important;
background-color: transparent !important;
}
#sidebar_summary li.sbaritem a: hover{
color: #ffffff !important;
border: 0px solid #777777;
background-color: transparent !important;
}
#sidebar_tags .sbarcontent { height: 250px; overflow-x: hidden; overflow-y: auto;}
li.tagBox a { color: #333333;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-left:2px;
padding:2px 5px;
text-align: right;
border-right: 3px solid #cccccc;
}
li.tagBox a:hover { color:#cccccc;
border-bottom: 1px dashed #cccccc;
text-align: center;
letter-spacing: 2px; }
#sidebar_tags li.sbaritem a { color: #333333;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-left:2px;
padding:2px 5px;
text-align: right;
border-right: 3px solid #cccccc;
}
#sidebar_tags li.sbaritem a:hover { color:#cccccc;
border-bottom: 1px dashed #cccccc;
text-align: center;
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 20px 10px 20px;
margin-bottom: 10px;
color: #594F4F;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 13px;
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: right;
padding: 10px;
margin: -10px -10px 20px 5px;
width: 100px;
height: 100px;
text-align: center;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
z-index: 15;
-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;
}
.userpic a { color: #FF0004 !important; }
.userpic a:hover { color: #bbbbbb !important; }
.userpic img, .userpicfriends img {
width: 100px;
height: 100px;
}
.userpicfriends a font {color: #FF0004; }
.userpicfriends a font:hover {color: #bbbbbb; text-shadow: 2px 2px 6px #bbbbbb; }
.date {
margin: -10px 10px -15px 30px;
text-align: left;
padding-right: auto;
padding-left: auto;
color: #cccccc;
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 {
padding: 0px 0px 5px 5px;
margin: 10px 10px 0px 10px;
color: #D82E46;
font-family: "Grand Hotel", open sans condensed, georgia, arial;
font-size: 33px;
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: 2px 2px 6px #bbbbbb;
}
.subject a, .subject a:link, .subject a:visited {color: #D82E46;}
.subject a:hover {color: #423F5E;}
.datesubject {
background-color: transparent;
padding: 0px;
text-align: left;
}
span.ljuser a b {
padding: 2px 0 2px 0;
color: #D82E46;
font-weight: normal;
}
span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #48B5AB;
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;
}
/*----------- Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
border: 0px solid #e5e5e5;
background-color: transparent !important;
margin: 5px 0 0px 0;
font-size: 7pt !important;
font-family: tahoma !important;
color: #7F7F7F;
text-align: left;
}
.currentlocation, .currentmusic {
}
.currents strong, .currentmood strong, .currentmusic .currentlocation {
font-weight: normal;
}
/*-----Currents, tags, comment links-----*/
.ljtags {
width: 98%;
text-align: left;
color: #cccccc;
font-family:verdana;
font-weight:bold;
font-size: 8px;
text-transform:uppercase;
margin: 20px 0px 10px 0px;
}
.ljtags a { padding-right: 5px; border-right: 1px solid #808080; }
.comments {
color: #ffffff;
font-size: 12px;
line-height: 130%;
letter-spacing:-0.1em;
padding:5px 10px;
margin-top: 8px;
margin-left: -20px;
position: relative;
text-align: center;
width: auto;
}
div.comments a, div.comments a:link, div.comments a:visited {
background-color: rgba(0, 0, 0, 0.4);
color:#ffffff;
font-family: open sans condensed, arial !important;
font-size: 14px !important; line-height: 130%;
line-height:1;
margin: 0;
padding: 15px 10px 15px 10px;
text-align: center; }
div.comments a:hover {
color:#cccccc;
background-color: rgba(0, 0, 0, 0.4);
}
/*------------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: #594F4F;
}
.commentbox {
padding: 5px;
margin: 10px 10px 10px 0px;
text-align: left;
background-color: #ffffff;
border: 2px dashed #f5f5f5;
}
.userpiccomment {
margin: -2px 5px 5px 0px;
padding: 10px;
width: 100px;
height: 100px;
float: left;
background: #FFF!important;
-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;
}
.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 #594F4F; color: #594F4F; }
table.yeartable td.yearday { text-align: center; color: #594F4F; }
td.yearmonth { color: #594F4F; 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 20px 5px 18px;
}
.currentmood {
background: url(
http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
padding: 2px 20px 5px 18px;
}
.currentmusic {
background: url(
http://i26.tinypic.com/2nv6qtf.jpg) no-repeat left center;
padding: 2px 20px 5px 18px;
}
.currentgroups {
background: url(
http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat left center;
padding: 2px 20px 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/owl.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/owl.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/tiny_icon_tree_apples.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 {
display: none;
position: fixed;
width: 100%;
height: 100px;
margin: 300px 0px 0px 40px;
background-color: transparent !impossible;
background-image: url(HEADER IMAGE IF YOU DON'T WANT TO USE TITLE & SUBTITLE-ERASE DISPLAY:NONE);
background-repeat: no-repeat;
background-position: left center;
}
.lj-view-friends { margin-top: -24px; }
.separator { height: 10px; }
Image to the right
/*--------------------------------
S2 Flexible Squares
Layout by
http://community.livejournal.com/layout_lounge/PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #ffffff;
background-image: url(REALLY A SIDE IMAGE SOMETHING WITH 900-1000px height is best);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
color: #594F4F;
font-family: "verdana", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}
a, a:link, a:visited { color: #D82E46; }
a:hover { color: #777777; }
blockquote {
width: 75%;
margin-left: auto;
margin-right: 100px;
padding: 5px;
color: #594F4F;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
border: 10px solid #f1f1f1;
background-color: #f7f7f7;
}
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; margin-left: 20px; }
/*--------------General------------*/
#content {
background-color: #ffffff;
width: 950px;
float: left;
right: 0;
margin-right: 0px;
text-align: left;
padding-right: 0px;
box-shadow: 20px 0px 15px 0px rgba(255, 255, 255, 0.5);
}
#maincontent {
background-color: #ffffff;
width: 695px;
float: right;
padding-top: 55px;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
color: #594F4F;
text-align: center;
}
.subcontent {
margin: auto;
padding-top: 10px;
}
/*---------------Header--------------*/
#header {
position: absolute;
left: 0;
width: 950px;
height: 20px;
top: 0;
text-align: right;
color: #000000;
padding: 6px 10px 10px 0;
margin-top: 50px;
font-family: verdana, arial !important;
font-size: 11px !important;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
z-index: 16;
}
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 {
background-color: transparent !important;
padding: 10px 10px 11px 10px;
margin: 0px 8px 0 -7px;
font-family: verdana !important;
letter-spacing: 1px;
color: #666666;
text-align: center;
}
div#header li.view {
border-bottom: 4px solid #423F5E;
color: #000000;
padding: 10px 10px 11px 10px;
margin: 0px -8px 0 3px;
font-style: italic;
}
div#header a:hover {
border-bottom: 4px solid #423F5E;
color: #333333;
font-style: italic;
}
ul.navheader {
list-style: none;
line-height: 24px;
margin: 0;
padding: 0;
border-left: lpx solid #ffffff;
}
ul.navheader li {
display: inline;
list-style: none;
border-left: lpx solid #ffffff;
}
.title {
position: fixed;
width: 100%;
height: 100px;
margin: 250px 0px 0px 1050px;
padding: 0px;
font-size: 72px;
font-family: "Great Vibes", Brush Script MT, arial, verdana;
text-align: left;
color: #ffffff;
text-shadow: 1px 1px 7px #222222;
}
.subtitle {
position: fixed;
width: 100%;
height: 100px;
margin: 303px 0px 0px 1090px;
padding: 0px;
font-size: 20px;
font-family: "Delius Swash Caps", arial, verdana;
text-align: left;
color: #cccccc;
}
/*--------------- 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:99;
}
ul.navfooter{
margin:0 auto;
padding:0;}
ul.navfooter a {
}
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.5);
padding: 20xp 10px 20px 10px;
}
ul.navfooter li + li a:hover { }
.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 20px 30px 20px 30px;
margin: 0px 10px -10px 10px;
}
.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
padding: 20xp 10px 20px 10px;
}
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 {
width: 240px;
margin: 5px 0px 100px 0px;
background-color: #ffffff !important;
color: #4F394C;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: normal;
float: left;
}
.sbarbody2 {
padding: 0px;
background-color: transparent !important;
margin-top: 0px;
margin: 0 0px 5px 0px;
line-height: 12px;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px !important;
text-transform: lowercase;
text-align: center;
}
.sbarbody {
margin:0;
padding: 0px 2px 7px 0px;
-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;
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: #24B694;
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:#D82E46; }
li.sbartitle {
list-style: none;
color: #D82E46;
-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: 30px;
text-transform: normal !important;
margin: 1px 5px 0px 5px;
}
#sidebar_linklist {
list-style-type:none;
padding-top:2px;
text-align: left !important;
text-transform: lowercase;
height: 100%; overflow-x: hidden; overflow-y: auto;}
#sidebar_linklist li.sbaritem a {
color: #333333;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-left:2px;
padding:2px 5px;
text-align: left;
border-left: 3px solid #cccccc;
}
#sidebar_linklist li.sbaritem a:hover {
color:#cccccc;
border-bottom: 1px dashed #cccccc;
text-align: center;
letter-spacing: 2px; }
table.calendar { margin-right: auto; margin-left: auto; }
.sbarcalendar {
padding: 1px;
border: 1px solid #cccccc;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 9px;
}
.sbarcalendarposts {
padding: 1px;
border: 1px solid #cccccc;
background-color: #f7f7f7;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 9px;
}
#sidebar_summary, #sidebar_calendar, h2 { }
#sidebar_summary li.sbaritem {
color: #777777;
padding: 3px;
text-transform: normal;
margin: 3px;
text-align: left;
border-bottom: 1px dashed #cccccc;
}
#sidebar_summary li.sbaritem a {
text-decoration: none;
display: inline !important;
color: #333333;
border: 0px solid #333333 !important;
background-color: transparent !important;
}
#sidebar_summary li.sbaritem a: hover{
color: #ffffff !important;
border: 0px solid #777777;
background-color: transparent !important;
}
#sidebar_tags .sbarcontent { height: 250px; overflow-x: hidden; overflow-y: auto;}
li.tagBox a { color: #333333;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-left:2px;
padding:2px 5px;
text-align: left;
border-left: 3px solid #cccccc;
}
li.tagBox a:hover { color:#cccccc;
border-bottom: 1px dashed #cccccc;
text-align: center;
letter-spacing: 2px; }
#sidebar_tags li.sbaritem a { color: #333333;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
font-weight:lighter;
margin-left:2px;
padding:2px 5px;
text-align: left;
border-left: 3px solid #cccccc;
}
#sidebar_tags li.sbaritem a:hover { color:#cccccc;
border-bottom: 1px dashed #cccccc;
text-align: center;
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 20px 10px 20px;
margin-bottom: 10px;
color: #594F4F;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 13px;
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: right;
padding: 10px;
margin: -10px -10px 20px 5px;
width: 100px;
height: 100px;
text-align: center;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 11px;
z-index: 15;
-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;
}
.userpic a { color: #FF0004 !important; }
.userpic a:hover { color: #bbbbbb !important; }
.userpic img, .userpicfriends img {
width: 100px;
height: 100px;
}
.userpicfriends a font {color: #FF0004; }
.userpicfriends a font:hover {color: #bbbbbb; text-shadow: 2px 2px 6px #bbbbbb; }
.date {
margin: -10px 10px -15px 30px;
text-align: left;
padding-right: auto;
padding-left: auto;
color: #cccccc;
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 {
padding: 0px 0px 5px 5px;
margin: 10px 10px 0px 10px;
color: #D82E46;
font-family: "Grand Hotel", open sans condensed, georgia, arial;
font-size: 33px;
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: 2px 2px 6px #bbbbbb;
}
.subject a, .subject a:link, .subject a:visited {color: #D82E46;}
.subject a:hover {color: #423F5E;}
.datesubject {
background-color: transparent;
padding: 0px;
text-align: left;
}
span.ljuser a b {
padding: 2px 0 2px 0;
color: #D82E46;
font-weight: normal;
}
span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #48B5AB;
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;
}
/*----------- Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
border: 0px solid #e5e5e5;
background-color: transparent !important;
margin: 5px 0 0px 0;
font-size: 7pt !important;
font-family: tahoma !important;
color: #7F7F7F;
text-align: left;
}
.currentlocation, .currentmusic {
}
.currents strong, .currentmood strong, .currentmusic .currentlocation {
font-weight: normal;
}
/*-----Currents, tags, comment links-----*/
.ljtags {
width: 98%;
text-align: left;
color: #cccccc;
font-family:verdana;
font-weight:bold;
font-size: 8px;
text-transform:uppercase;
margin: 20px 0px 10px 0px;
}
.ljtags a { padding-right: 5px; border-right: 1px solid #808080; }
.comments {
color: #ffffff;
font-size: 12px;
line-height: 130%;
letter-spacing:-0.1em;
padding:5px 10px;
margin-top: 8px;
margin-left: -20px;
position: relative;
text-align: center;
width: auto;
}
div.comments a, div.comments a:link, div.comments a:visited {
background-color: rgba(0, 0, 0, 0.4);
color:#ffffff;
font-family: open sans condensed, arial !important;
font-size: 14px !important; line-height: 130%;
line-height:1;
margin: 0;
padding: 15px 10px 15px 10px;
text-align: center; }
div.comments a:hover {
color:#cccccc;
background-color: rgba(0, 0, 0, 0.4);
}
/*------------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: #594F4F;
}
.commentbox {
padding: 5px;
margin: 10px 10px 10px 0px;
text-align: left;
background-color: #ffffff;
border: 2px dashed #f5f5f5;
}
.userpiccomment {
margin: -2px 5px 5px 0px;
padding: 10px;
width: 100px;
height: 100px;
float: left;
background: #FFF!important;
-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;
}
.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 #594F4F; color: #594F4F; }
table.yeartable td.yearday { text-align: center; color: #594F4F; }
td.yearmonth { color: #594F4F; 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 20px 5px 18px;
}
.currentmood {
background: url(
http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
padding: 2px 20px 5px 18px;
}
.currentmusic {
background: url(
http://i26.tinypic.com/2nv6qtf.jpg) no-repeat left center;
padding: 2px 20px 5px 18px;
}
.currentgroups {
background: url(
http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat left center;
padding: 2px 20px 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/owl.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/owl.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/tiny_icon_tree_apples.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 {
display: none;
position: fixed;
width: 100%;
height: 100px;
clear: right;
margin: 300px 0px 0px 1000px;
background-color: transparent !impossible;
background-image: url(HEADER IMAGE IF YOU DON'T WANT TO USE TITLE & SUBTITLE-ERASE DISPLAY:NONE);
background-repeat: no-repeat;
background-position: left center;
}
.lj-view-friends { margin-top: -24px; }
.separator { height: 10px; }
Theme and Layout Change Tutorial Additional Layout Directions:
- In the body section (at the top) the image here is the background image for the entire layout. This is the image that is on the side. The current image I'm using is 517x1040px the best size is probably 600x900. This is not the entire image showing. In the body section you can change the background-position which is currently "right top" to "right middle" or "right bottom" depending on the image you wish to use. If you are using the layout with the image on the left coding the positions would be "left top", "left middle", or "left bottom". (image example below)
- The title and subtitle are in there respective places on the layout. The title of entries and other aspects of the journal may interfere with the journal. If you would rather not us the title and subtitle go to the .title & .subtitle section of the coding and add the line display: none;. This will effectively hide these functions.
- Should you want a "header image" that functions as your title, I would recommend something that is 300x100px. (example below) If you do want to use this option and have set the .title & .subtitle sections to display: none; then you will want to go to the .headerimage section (near the bottom of the coding) and removed the display: none; line from this coding. If your image is more than 100px in height please remember to change the height in this section.
Examples:
#1
#3
More Headers:
More Background Images:
Layout Lounge SiteMore Tiny Icons:
Layout Lounge Site RULES:
No Hotlinking Images
#4 under generalHeader can be changed
Background image can be changed or removed.
Credit Necessary.
Having Trouble? Try:
Theme and Layout Change Tutorial or
Helpful HintsIf that didn't work. Comment Below.