layout 03 - heart of a lion
SIDE NOTE / I'm aware that my other live previews are down right now because I unfortunately ran out of cash to pay for my domain. I'm working on getting them back up, sorry about the inconvenience!
Live Preview
♔ In the Sidebar Options put the boxes in the following order: Default Userpic, Links List, Blurb, Calendar. The last two are optional.
♔ You must have four links defined in the links list or the layout won't work properly.
♔ If you have a link set in your profile to show up on your layout in the navigation, it will not appear. I suggest you put it in the links list.
♔ I recommend you change Recent Entries to "Entries" to save space!
♔ This layout makes use of two free fonts: Droid Sans and Droid Serif. Download them at their respective links if interested. :)
♔ Custom comment pages are not coded. Set Disable customized comment pages for your journal to Yes.
♔ Art in the preview icons is by lazylaz.
CSS:
body {
background: #f0f0f0 url('http://i.imgur.com/JB7Dj.png');
font-size: 10px;
line-height:16px;
font-family: "droid serif", georgia, serif;
margin: 0 auto;
text-align: justify;
}
a, a:link, a:visited {
color: #8F8F8F;
text-decoration: none;
}
blockquote {
padding: 10px;
background:#FAFAFA;
font-family:droid sans, arial, helvetica, monospace;
text-align:justify;
color:#9F9F9F;
}
#content {
margin: 20px auto;
width: 740px;
}
#maincontent {
background:transparent;
margin: 0px 0px 0px 260px;
}
#sidebar {
float: left;
width: 295px;
background:#FFF;
padding: 10px;
margin: 50px 0px 0px -60px;
position:fixed;
}
#sidebar_linklist{
margin-top:-112px;
margin-left:70px;
}
.sbaritem {
display:block;
background:#F5F5F5;
padding: 2px 2px 2px 7px;
margin-bottom:5px;
font-family:"courier new", monospace;
font-size:7pt;
letter-spacing:1px;
text-transform:uppercase;
}
.sbaritem:hover{
background:#F9F9F9;
}
.sbaritem a{
color:#A6A6A6;
}
.sbaritem a:hover{
color:#B0B0B0;
}
.sbarbody2 {
font-family:"droid sans", arial, helvetica, sans-serif;
color:#A0A0A0;
text-align:justify;
}
.defaultuserpic{
float;left;
border: 5px solid #F5F5F5;
width:100px;
}
.sbartitle{
display:none;
}
.calendar{
width:280px;
margin-left:-30px;
font-family:"droid sans", arial, helvetica, sans-serif;
font-size:9px;
color:#909090;
}
.sbarcalendar {
background:#F5F5F5;
text-align:center;
}
.sbarcalendarposts {
background:#F9F9F9;
text-align:center;
}
.sbarcalendarposts a{
color:#9F9F9F;
}
#header {
float:left;
height:50px;
width:315px;
overflow:hidden;
display:inline;
background:#FFF;
position:fixed;
margin-left:-60px;
}
ul.navheader {
list-style: none;
margin: 0;
padding: 0;
width:320px;
}
ul.navheader li{
display:inline;
}
ul.navheader li{
width:75px;
height:50px;
background:#F0F0F0;
display:block;
float:left;
position:relative;
margin-right:5px;
overflow:hidden;
text-align:center;
padding-top:15px;
font-family:courier new;
text-transform:uppercase;
color:#666;
}
ul.navheader li a{
color:#7F7F7F;
}
ul.navheader li a:hover{
color:#8A8A8A;
}
ul.navheader li:hover{
background:#F4F4F4;
}
.title, .subtitle {
display: none;
}
.subcontent {
text-align: justify;
background:#FFF;
width:400px;
padding:10px;
color:#5A5A5A;
}
.subject {
font-size:15px;
text-transform:uppercase;
line-height:12px;
}
.subject a{
padding-left:2px;
color:#AFAFAF;
}
.subject a:hover{
color:#D9D9D9;
}
.date {
font-family:"droid sans", arial, helvetica, sans-serif;
color:#DADADA;
text-transform:uppercase;
font-size:8px;
letter-spacing:2px;
}
.subject {
font-size:15px;
text-transform:uppercase;
line-height:12px;
}
.subject a{
padding-left:2px;
color:#AFAFAF;
}
.subject a:hover{
color:#D9D9D9;
}
.userpic {
float: right;
position:relative;
margin: -10px -135px 0px 0px;
border:10px solid #FFF;
}
.userpicfriends{
float: right;
position:relative;
margin: -10px -135px 0px 0px;
background:#FFF!important;
color:#FFF!important;
padding:10px;
text-align:center;
}
.userpicfriends a{
padding-top:3px;
font-family:"courier new", monospace;
text-transform:uppercase;
}
.entry_text {
min-height:80px;
}
.entry_text img{
max-width:400px;
overflow:hidden;
}
.clear {
height:5px;
background:transparent;
}
.currents{
font-family:courier new;
font-size:9px;
line-height:11px;
text-transform:uppercase;
background:#F6F6F6;
padding:0px 3px 3px 3px;
letter-spacing:1px;
margin-top:-16px;
}
.currentmood img{
display:none;
}
.currentlocation{
display:none;
}
.ljtags{
font-family:courier new;
font-size:9px;
text-transform:uppercase;
background:#F6F6F6;
padding:2px 3px 3px 3px;
letter-spacing:1px;
margin-top:3px;
}
.comments{
text-align: right;
font-family:courier new;
text-transform:uppercase;
font-size:12px;
}
.comments a{
color:#989898;
}
.comments a:hover{
color:#AFAFAF;
}
#footer {
padding:0px 10px 0px 10px;
float:right;
margin-right:60px;
margin-top:-15px;
width:400px;
background:#FFF;
color:#9A9A9A;
text-align:right;
}
#footer a{
color:#B0B0B0;
}
#footer a:hover{
color:#C0C0C0;
}
ul.navfooter li {
display:inline;
list-style:none;
}
.clearfoot {
clear: both;
}
.skiplinks {
text-align: center;
}
h2 {
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#AFAFAF;
padding:10px;
display:block;
background:#FFF;
margin-bottom:-25px;
}
ul.ljtaglist li {
list-style:none;
color:#9A9A9A;
}
ul.ljtaglist {
background:#fff;
padding:10px;
}
ul.ljtaglist li a{
color:#C9C9C9;
}
ul.year {
background:#FFF;
padding:10px;
list-style:none;
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#AFAFAF;
display:block;
margin-bottom:-15px;
}
table.yeartable {
background:#FFF;
padding:10px;
width:480px;
}
table.yeartable td.yeardate {
line-height:12px;
text-align:center;
background:#F5F5F5;
font-size:10px;
color:#909090;
}
table.yeartable td.yearday {
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#AFAFAF;
text-align: center;
}
td.yearmonth {
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#808080; }
.subject img[src*="icon_protected.gif"] {
background-image:url(http://i.imgur.com/41DGv.gif) !important;
background-repeat:no-repeat !important;
height:0;
padding:10px 8px 0px 0 !important;
width:0;
}
.subject img[src*="icon_private.gif"] {
background-image:url(http://i.imgur.com/rlGfo.gif) !important;
background-repeat:no-repeat !important;
height:0;
padding:12px 10px 0 0 !important;
width:0;
}
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"], img[src*="userhead"] {
background-image:url("http://i.imgur.com/DODHe.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
img[src*="community.gif"] {
background-image:url(http://i.imgur.com/TiL0U.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
.ljuser a b{
font-weight:normal;
color:#B0B0B0;
font-family:"droid sans", arial, helvetica, sans-serif;
}
Live Preview
♔ In the Sidebar Options put the boxes in the following order: Default Userpic, Links List, Blurb, Calendar. The last two are optional.
♔ You must have four links defined in the links list or the layout won't work properly.
♔ If you have a link set in your profile to show up on your layout in the navigation, it will not appear. I suggest you put it in the links list.
♔ I recommend you change Recent Entries to "Entries" to save space!
♔ This layout makes use of two free fonts: Droid Sans and Droid Serif. Download them at their respective links if interested. :)
♔ Custom comment pages are not coded. Set Disable customized comment pages for your journal to Yes.
♔ Art in the preview icons is by lazylaz.
CSS:
body {
background: #f0f0f0 url('http://i.imgur.com/JB7Dj.png');
font-size: 10px;
line-height:16px;
font-family: "droid serif", georgia, serif;
margin: 0 auto;
text-align: justify;
}
a, a:link, a:visited {
color: #8F8F8F;
text-decoration: none;
}
blockquote {
padding: 10px;
background:#FAFAFA;
font-family:droid sans, arial, helvetica, monospace;
text-align:justify;
color:#9F9F9F;
}
#content {
margin: 20px auto;
width: 740px;
}
#maincontent {
background:transparent;
margin: 0px 0px 0px 260px;
}
#sidebar {
float: left;
width: 295px;
background:#FFF;
padding: 10px;
margin: 50px 0px 0px -60px;
position:fixed;
}
#sidebar_linklist{
margin-top:-112px;
margin-left:70px;
}
.sbaritem {
display:block;
background:#F5F5F5;
padding: 2px 2px 2px 7px;
margin-bottom:5px;
font-family:"courier new", monospace;
font-size:7pt;
letter-spacing:1px;
text-transform:uppercase;
}
.sbaritem:hover{
background:#F9F9F9;
}
.sbaritem a{
color:#A6A6A6;
}
.sbaritem a:hover{
color:#B0B0B0;
}
.sbarbody2 {
font-family:"droid sans", arial, helvetica, sans-serif;
color:#A0A0A0;
text-align:justify;
}
.defaultuserpic{
float;left;
border: 5px solid #F5F5F5;
width:100px;
}
.sbartitle{
display:none;
}
.calendar{
width:280px;
margin-left:-30px;
font-family:"droid sans", arial, helvetica, sans-serif;
font-size:9px;
color:#909090;
}
.sbarcalendar {
background:#F5F5F5;
text-align:center;
}
.sbarcalendarposts {
background:#F9F9F9;
text-align:center;
}
.sbarcalendarposts a{
color:#9F9F9F;
}
#header {
float:left;
height:50px;
width:315px;
overflow:hidden;
display:inline;
background:#FFF;
position:fixed;
margin-left:-60px;
}
ul.navheader {
list-style: none;
margin: 0;
padding: 0;
width:320px;
}
ul.navheader li{
display:inline;
}
ul.navheader li{
width:75px;
height:50px;
background:#F0F0F0;
display:block;
float:left;
position:relative;
margin-right:5px;
overflow:hidden;
text-align:center;
padding-top:15px;
font-family:courier new;
text-transform:uppercase;
color:#666;
}
ul.navheader li a{
color:#7F7F7F;
}
ul.navheader li a:hover{
color:#8A8A8A;
}
ul.navheader li:hover{
background:#F4F4F4;
}
.title, .subtitle {
display: none;
}
.subcontent {
text-align: justify;
background:#FFF;
width:400px;
padding:10px;
color:#5A5A5A;
}
.subject {
font-size:15px;
text-transform:uppercase;
line-height:12px;
}
.subject a{
padding-left:2px;
color:#AFAFAF;
}
.subject a:hover{
color:#D9D9D9;
}
.date {
font-family:"droid sans", arial, helvetica, sans-serif;
color:#DADADA;
text-transform:uppercase;
font-size:8px;
letter-spacing:2px;
}
.subject {
font-size:15px;
text-transform:uppercase;
line-height:12px;
}
.subject a{
padding-left:2px;
color:#AFAFAF;
}
.subject a:hover{
color:#D9D9D9;
}
.userpic {
float: right;
position:relative;
margin: -10px -135px 0px 0px;
border:10px solid #FFF;
}
.userpicfriends{
float: right;
position:relative;
margin: -10px -135px 0px 0px;
background:#FFF!important;
color:#FFF!important;
padding:10px;
text-align:center;
}
.userpicfriends a{
padding-top:3px;
font-family:"courier new", monospace;
text-transform:uppercase;
}
.entry_text {
min-height:80px;
}
.entry_text img{
max-width:400px;
overflow:hidden;
}
.clear {
height:5px;
background:transparent;
}
.currents{
font-family:courier new;
font-size:9px;
line-height:11px;
text-transform:uppercase;
background:#F6F6F6;
padding:0px 3px 3px 3px;
letter-spacing:1px;
margin-top:-16px;
}
.currentmood img{
display:none;
}
.currentlocation{
display:none;
}
.ljtags{
font-family:courier new;
font-size:9px;
text-transform:uppercase;
background:#F6F6F6;
padding:2px 3px 3px 3px;
letter-spacing:1px;
margin-top:3px;
}
.comments{
text-align: right;
font-family:courier new;
text-transform:uppercase;
font-size:12px;
}
.comments a{
color:#989898;
}
.comments a:hover{
color:#AFAFAF;
}
#footer {
padding:0px 10px 0px 10px;
float:right;
margin-right:60px;
margin-top:-15px;
width:400px;
background:#FFF;
color:#9A9A9A;
text-align:right;
}
#footer a{
color:#B0B0B0;
}
#footer a:hover{
color:#C0C0C0;
}
ul.navfooter li {
display:inline;
list-style:none;
}
.clearfoot {
clear: both;
}
.skiplinks {
text-align: center;
}
h2 {
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#AFAFAF;
padding:10px;
display:block;
background:#FFF;
margin-bottom:-25px;
}
ul.ljtaglist li {
list-style:none;
color:#9A9A9A;
}
ul.ljtaglist {
background:#fff;
padding:10px;
}
ul.ljtaglist li a{
color:#C9C9C9;
}
ul.year {
background:#FFF;
padding:10px;
list-style:none;
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#AFAFAF;
display:block;
margin-bottom:-15px;
}
table.yeartable {
background:#FFF;
padding:10px;
width:480px;
}
table.yeartable td.yeardate {
line-height:12px;
text-align:center;
background:#F5F5F5;
font-size:10px;
color:#909090;
}
table.yeartable td.yearday {
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#AFAFAF;
text-align: center;
}
td.yearmonth {
font-size:15px;
text-transform:uppercase;
line-height:12px;
color:#808080; }
.subject img[src*="icon_protected.gif"] {
background-image:url(http://i.imgur.com/41DGv.gif) !important;
background-repeat:no-repeat !important;
height:0;
padding:10px 8px 0px 0 !important;
width:0;
}
.subject img[src*="icon_private.gif"] {
background-image:url(http://i.imgur.com/rlGfo.gif) !important;
background-repeat:no-repeat !important;
height:0;
padding:12px 10px 0 0 !important;
width:0;
}
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"], img[src*="userhead"] {
background-image:url("http://i.imgur.com/DODHe.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
img[src*="community.gif"] {
background-image:url(http://i.imgur.com/TiL0U.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
.ljuser a b{
font-weight:normal;
color:#B0B0B0;
font-family:"droid sans", arial, helvetica, sans-serif;
}