Advent 08: December 23rd - Huddy Layout
I'm really sorry this is so super late, but I got in over my head with this one. I was determined to make all the buttons myself (ultimately failed) and had some IE troubles that were difficult to solve.
View it live at irilaytest
- This layout was tested in Firefox, Safari and IE7. It does NOT work properly in IE6 since it relies heavily on the use of PNGs, which IE6 doesn't support. (Basically, it looks ugly)
- Also, I tested it on a paid and a basic account - I have no idea if it works on plus/sponsored accounts or whatever they're called nowadays.
1.) Go to http://www.livejournal.com/customize
2.) Type "Deep Ocean" into the search box
3.) You should get "Deep Ocean", a theme of the "Minimalism" style as result, click apply
4.) Go to http://www.livejournal.com/customize/options.bml?group=customcss
5.) Set both "Use layout's stylesheets" and "Use layout's theme's stylesheet" to "No"
6.) Copy-Paste the following CSS into the "Custom Stylesheet" box:
* { margin:0; padding:0;}
img {border:0;}
hr {display:none;}
.ljuser a b {color:#fff; border-bottom:2px solid #5e9c26;}
.ljuser a:hover b, { color:#5e9c26; border-bottom:2px dotted #f8a63c;}
a.fn, .author .ljuser a {color:#346330; border-bottom:1px dotted #fff;}
.author .ljuser a:hover, a:hover { color:#e0831a;}
a.ico img {position:relative; top:8px;}
a {text-decoration:none; color:#3a8a4b; font-weight:bold; }
.view-entry .entry-linkbar {
text-align:center;
margin:0px 0px 30px 0px;
border:1px solid #bfd7bf;
}
/*-------- General Page Alignment ------*/
body {
background:url(http://img117.imageshack.us/img117/3061/bghb5.jpg) top center;
font-family:Helvetica, sans-serif;
font-size:14px;
color:#3a553f;
}
#page { background:url(http://img184.imageshack.us/img184/3699/bginnerya3.jpg) repeat-x;}
.layout { background:url(http://img166.imageshack.us/img166/8318/bgfotos2ff9.jpg) no-repeat top center; padding:172px 0px 0 0; }
.content {background:url(http://img155.imageshack.us/img155/8867/contentbg2pu5.jpg) no-repeat; width:1032px; margin:auto;}
.content-inner{ width:760px; margin:auto; background:url(http://img156.imageshack.us/img156/226/entrybgsd5.jpg) repeat-y;}
/*------ Header -----*/
.header {
width:760px;
margin:auto;
height:180px;
}
.header-sec h1, .userpic-in, .header-in h2 , .header-in h3 { display:none; }
ul.nav { list-style-type:none; height:180px; margin:0; padding:0;}
.nav-sub { display:none;}
li.item a {
width:190px;
display:block;
float:left;
height:180px;
color:#acd3ab;
font-size:1px;
margin:0;
padding:0;
}
li.item {margin:0; padding:0; height:180px; display:block; float:left;}
li.item-recent a {background:url(http://img291.imageshack.us/img291/3846/entrieshh1.jpg) no-repeat; }
li.item-recent a:hover {background:url(http://img291.imageshack.us/img291/3846/entrieshh1.jpg) no-repeat bottom left;}
li.item-friends a {background:url(http://img134.imageshack.us/img134/8334/friendsoq7.jpg) no-repeat;}
li.item-friends a:hover {background:url(http://img134.imageshack.us/img134/8334/friendsoq7.jpg) no-repeat bottom left;}
li.item-archive a {background:url(http://img229.imageshack.us/img229/9760/archivebx8.jpg) no-repeat;}
li.item-archive a:hover {background:url(http://img229.imageshack.us/img229/9760/archivebx8.jpg) no-repeat bottom left;}
li.item-profile a {background:url(http://img125.imageshack.us/img125/8148/infool9.jpg) no-repeat;}
li.item-profile a:hover {background:url(http://img125.imageshack.us/img125/8148/infool9.jpg) no-repeat bottom left;}
li.item-selected a {background-position:bottom left;}
/*-------Entries-----------*/
.entry-wrap {
width:760px;
background:url(http://img118.imageshack.us/img118/6041/commonentrybgja9.jpg) no-repeat;
}
.entry-wrap:first-child {
background:url(http://img139.imageshack.us/img139/6153/firstentrybgvj7.jpg) no-repeat;
}
.entry { padding:50px 0px 70px 50px;}
.entry-content,
.entry-title,
.entrymenu,
.metadata {
width:490px;
margin:0 190px 0 0;
}
.entry-title, .entry-title a {
color:#3a8a4b;
font-weight:bold;
font-size:24px;
}
.entry-content {
line-height:22px;
margin:20px 0 20px 0;
overflow-x:auto;
overflow-y:visible;
}
.metadata {
width:460px;
margin:10px 0 0px 20px;
border-left:9px solid #99ba99;
padding:0 0 0 10px;
font-size:12px;
color:#789b75;
line-height:17px;
}
.metadata a {
color:#789b75;
}
.meta-music-label,
.meta-location-label,
.meta-mood-label,
.meta-mood-value img{
display:none;
}
.meta-mood-value {
background:url(http://img515.imageshack.us/img515/8853/buttonmoodmoodsj4.png) no-repeat left center;
padding:0 0 0 17px;
}
.meta-music-value {
background:url(http://img129.imageshack.us/img129/549/buttonmoodmusicuh2.png) no-repeat left center;
padding: 0 0 0 17px;
}
.meta-location-value {
background:url(http://img129.imageshack.us/img129/6269/buttonmoodlocationta6.png) no-repeat left center;
padding: 0 0 0 17px;
}
.entry-content a:hover {
border-bottom:1px solid #3a553f;
}
blockquote {
margin:0 0 0 20px;
padding:10px;
border:1px solid #8fb98c;
}
blockquote:first-letter
{font-size: 20px; font-weight:bold;}
.entry-content ol, .entry-content ul {
line-height:15px;
padding:0 0 0 40px;
border:2px dotted #fff;
width:300px;
margin:0 0 0 20px;
}
.entry-content ol li { list-style-type:decimal-leading-zero; font-weight:bold;}
.entry-content ol li:hover, .entry-content ul li:hover { color:#fff;}
.entry-content ul { padding:0 0 0 20px; line-height:15px; }
.entry-content ul li {
list-style-type:none;
background:url(http://img233.imageshack.us/img233/5180/listunorderedrz7.png) no-repeat center left;
padding:0 0 0 20px;
font-weight:bold;
}
.entry-content table td{ padding:10px; border:1px dotted #fff;}
.entry-content table td:hover { border:1px solid #3a553f;}
.entrymenu ul{ list-style-type:none;}
/*-----comment buttons------*/
a.btn {
display:block;
width:44px;
height:46px;
font-size:1px;
color:#a2c1a1;
margin:0 0px 0 0px;
}
li.postcomment a.btn {background:url(http://img83.imageshack.us/img83/6274/addcommentph7.png) no-repeat;}
li.edit_entry a.btn {background:url(http://img73.imageshack.us/img73/6206/editrr0.png) no-repeat;}
li.edit_tags a.btn {background:url(http://img83.imageshack.us/img83/42/tagspp5.png) no-repeat;}
li.mem_add a.btn {background:url(http://img374.imageshack.us/img374/2664/memlz2.png) no-repeat;}
li.watch_comments a.btn {background:url(http://img513.imageshack.us/img513/1289/trackpd4.png) no-repeat;}
li.tell_friend a.btn {background:url(http://img261.imageshack.us/img261/89/tellfriendzh5.png) no-repeat;}
li.mem_add a.btn:hover,
li.edit_tags a.btn:hover,
li.postcomment a.btn:hover,
li.watch_comments a.btn:hover,
li.edit_entry a.btn:hover,
li.tell_friend a.btn:hover {
background-position:bottom left;
}
.comments a.btn {
background:url(http://img147.imageshack.us/img147/6946/commentsry8.png) no-repeat top left;
font-size:18px;
color:#fff;
text-align:center;
padding:17px 0 0 0;
height:29px;
margin:0 10px 0 0;
}
a.btn:hover {background-position:bottom left;}
.comments a.btn:hover {color:#407614;}
.entrymenu {clear:both;}
.entrymenu ul { float:right;}
.entrymenu li { display:block; float:left; font-size:10px;}
.entry-date {
background:url(http://img518.imageshack.us/img518/5556/datebgnm8.png);
height:25px;
padding:10px 0 0 0;
margin:5px 0 0 0;
}
.updated {border:0; font-size:12px; }
.author {
float:right;
width:189px;
text-align:center;
margin:-40px 0 0 0;
}
.author dt {
background:url(http://img179.imageshack.us/img179/6017/iconbgld2.jpg) no-repeat;
width:128px;
height:115px;
margin:auto;
padding:13px 0px 0px 0px;
}
dd.username { padding:0px 5px 5px 5px; }
.ljtags {
background:url(http://img89.imageshack.us/img89/7148/tagentryic9.png) no-repeat top left;
width:184px;
padding: 15px 0 3px 40px;
font-size:12px;
color:#536f56;
line-height:16px;
margin:20px 0 0 0;
}
.ljtags a { color:#536f56; }
/*--------Sidebar-----*/
div.sidebar {
margin:80px 0 0 0;
background:url(http://img53.imageshack.us/img53/7415/sidebarbgkm6.jpg) repeat-x #1d5731;
width:100%;
padding:0px 0 30px 0;
text-align:center;
}
div.sidebar-inner {
margin:auto;
width:95%;
}
dl.sidebar-block {
border-right:1px solid #154423;
float:left;
display:block;
text-align:left;
margin:30px 0px 0px 0px;
}
.sidebar-summary, .sidebar-tags {
width:23%;
}
.sidebar-summary { font-size:13px; }
dl.sidebar-summary { width:25%; }
.sidebar-summary .vcard { display:none;}
.sidebar-summary li {
margin:5px 0 5px 0;
color:#96a79a;
}
.sidebar-summary li a { color:#96a79a;}
.sidebar-summary ul, .sidebar-links dd, .tags{
list-style-type:none;
margin:0;
padding:0px 25px 0px 25px;
}
.sidebar-powered {
width:100%;
height:1px!important;
font-size:0px;
clear:both;
float:none;
}
.sidebar-block dt{
font-size:24px;
color:#226e3d;
margin:0 15px 20px 15px;
}
.calendar-wrap table {
margin:0 10px 0 10px;
}
.calendar-wrap th {
text-align:center;
font-weight:normal;
color:#175128;
}
.calendar-wrap td {
background:url(http://img227.imageshack.us/img227/5347/calendarnoposton4.png) no-repeat center center;
padding:10px;
text-align:center;
font-size:12px;
color:#175128;
}
.calendar-wrap td a {
background:url(http://img70.imageshack.us/img70/2912/calendarposteq7.png) no-repeat center center;
display:block;
padding:10px;
margin:-10px;
color:#0c3216;
}
.calendar-wrap td a:hover { color:#fff; }
.sidebar-links dd a {
color:#96a79a;
font-weight:bold;
display:block;
padding: 7px 0px 7px 30px;
background:url(http://img525.imageshack.us/img525/5808/singlelinkaxx4.png) no-repeat left center;
}
.sidebar-custom {color:#226e3d; width:15%;}
.sidebar-custom dd {padding:0 15px;}
.sidebar-links dd a:hover {
background:url(http://img82.imageshack.us/img82/968/singlelinkahoverwe2.png) no-repeat left center;
}
.sidebar-tags dt {
padding:0 0 0 30px;
background:url(http://img384.imageshack.us/img384/5002/sidebartagvg2.png) no-repeat left center;
}
.sidebar-links dt {
padding:0 0 0 32px;
background:url(http://img244.imageshack.us/img244/8320/linkstv0.png) no-repeat left center;
}
.sidebar-cal dt {
padding:0 0 0 36px;
background:url(http://img262.imageshack.us/img262/9494/sidebararchiveda9.png) no-repeat center left;
}
.sidebar-summary dt {
background:url(http://img147.imageshack.us/img147/8051/summaryxy5.png) no-repeat center left;
padding:0 0 0 26px;
}
/*-------Page Navigation--------*/
.page-nav {
width:550px;
text-align:right;
height:50px;
}
ul.page-nav, ul.page-nav li {
padding:10px;
margin:0;
list-style-type:none;
}
li.prev, li.next {width:40px;}
li.prev {float:left;}
li.next {float:right;}
li.prev a {float:left;}
li.prev a, li.next a {
display:block;
background:url(http://img99.imageshack.us/img99/8893/previousdj7.png) no-repeat top left;
width:40px;
height:32px;
font-size:1px;
color:#8db18b;
}
li.next a {float:right; background:url(http://img397.imageshack.us/img397/7634/nextfz6.png) no-repeat top right;}
li.prev a:hover, li.next a:hover {background-position:bottom left;}
/*-------Comment Pages----*/
.comment-wrap {
margin:20px 0 20px 0;
padding:7px 0 20px 15px;
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
}
.comment-head {
float:right;
width:189px;
text-align:center;
}
.comment-upic {
background:url(http://img179.imageshack.us/img179/6017/iconbgld2.jpg) no-repeat;
width:128px;
height:115px;
margin:auto;
padding:13px 0px 0px 0px;
text-align:center;
}
.comment-head-in { float:left; }
a.comment-permalink {
background:url(http://img518.imageshack.us/img518/5556/datebgnm8.png) no-repeat;
height:25px;
padding:13px 0 0 0;
display:block;
width:188px;
color:#3a553f;
font-weight:normal;
font-size:12px;
margin:10px 0 5px 0;
}
.comment-head-in label { display:none; }
.comment-menu {
clear:both;
margin:0 220px 0px 0;
text-align:right;
}
.comment-text {
margin:0 220px 0 0;
padding:20px;
}
/*--------Reply Thingies--------*/
#qrform, #postform { margin:0 210px 0 0;}
#qrform table {
padding:10px;
border:0px solid #fff!important;
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
}
#qrform table .textbox, #postform table .textbox {
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
padding:5px;
font-size:14px;
font-family:Helvetica, sans-serif;
color:#3a553f;
}
#postform table td {padding:3px;}
#postform font b { color:#3a553f;}
#commenttext.textbox { width:100%;}
.entry-comments-text table {text-align:center; width:500px;}
span.replylink {
width:500px;
text-align:center;
display:block;
margin:0px 0px 20px 0px;
}
input, select, textarea {
font-family:Helvetica, sans-serif;
border:0;
}
input, select {
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
padding:4px;
color:#fff;
font-family:Helvetica, sans-serif;
font-weight:bold;
font-size:13px;
border:1px solid #fff;
}
select { color:#3a553f; }
input:focus, textarea:focus, select:focus { border:1px solid #3a553f;}
/*-------Calendar Pages-------*/
.entry-text .calendar-wrap table { width:500px;}
.entry-text .calendar-wrap caption { padding:10px 10px 10px 20px; font-size:24px; text-align:left; margin: 20px 0 0 0; }
.view-archive .entry-text ul { width:400px; margin:20px 0 0 40px; border:1px solid #99be99; padding:10px; list-style-type:none; color:#e0831a;}
/*---- Tag Pages --*/
.content-tags { margin:0 220px 0 0;}
.content-tags ul {list-style-type:none;}
.content-tags ul li { list-style-type:none; background:url(http://img233.imageshack.us/img233/5180/listunorderedrz7.png) no-repeat center left; padding:10px 0 7px 20px; font-weight:bold; border-bottom:1px solid #a0c197; }
.content-tags ul li:hover { background:#fff;}
/*----------Image Replacement --------*/
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
/* so that IE users will still see an image */
background-image: url(http://img504.imageshack.us/img504/6449/userud0.png);
padding: 10px 10px 15px 12px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://img504.imageshack.us/img504/6449/userud0.png);
padding: 10px 10px 15px 12px !important;
}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-image: url(http://img142.imageshack.us/img142/5843/communityiu6.png);
padding: 10px 10px 15px 12px !important;
}
.entry-title img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width:0;
height:0;
padding:27px 10px 0px 20px;
background:url(http://img218.imageshack.us/img218/4381/lockedet4.png) center left no-repeat;
}
dt.entry-linkbar a img, div.comment-head-in a img { width:0; height:0; }
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_memories.gif"]{ padding:20px 0px 21px 36px; background:url(http://img374.imageshack.us/img374/2664/memlz2.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_track.gif"]{padding:20px 0px 21px 36px; background:url(http://img513.imageshack.us/img513/1289/trackpd4.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_next.gif"]{ padding:11px 0px 21px 40px; background:url(http://img397.imageshack.us/img397/7634/nextfz6.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_prev.gif"]{ padding:11px 0px 21px 40px; background:url(http://img99.imageshack.us/img99/8893/previousdj7.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_edit.gif"]{ padding:11px 0px 29px 40px; background:url(http://img73.imageshack.us/img73/6206/editrr0.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_edittags.gif"]{ padding:22px 0px 21px 40px; background:url(http://img83.imageshack.us/img83/42/tagspp5.png) no-repeat top left; }
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_tellfriend.gif"]{ padding:27px 0px 10px 40px; background:url(http://img261.imageshack.us/img261/89/tellfriendzh5.png) no-repeat top left;}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_del.gif"] { padding:20px 0px 0px 22px; background:url(http://img147.imageshack.us/img147/4200/buttoncommentdeletedt9.png); }
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_freeze.gif"] { padding:20px 0px 0px 22px; background:url(http://img239.imageshack.us/img239/5369/buttoncommentfreezeqi4.png);}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_unfreeze.gif"] { padding:20px 0px 0px 22px; background:url(http://img161.imageshack.us/img161/514/buttoncommentunfreezesz7.png);}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_track.gif"] { padding:20px 0px 0px 22px; background:url(http://img239.imageshack.us/img239/6048/buttoncommenttracksh6.png);}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_edit.gif"] { padding:20px 0px 0px 22px; background:url(http://img530.imageshack.us/img530/339/buttoncommenteditge6.png);}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_scr.gif"] { padding:20px 0px 0px 22px; background:url(http://img133.imageshack.us/img133/8245/screenek9.png);}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_unscr.gif"] { padding:20px 0px 0px 22px; background:url(http://img152.imageshack.us/img152/6447/unscreenad6.png);}
dt.entry-linkbar a:hover img {background-position:bottom left;}
7.) Click on "Save Changes", and you're done.
TIPS:
- If you'd like to have links or other important stuff somewhere farther up than the sidebar at the bottom, you can add a sticky post here: http://www.livejournal.com/customize/options.bml?group=text
- If you don't like the page summary being displayed, you can un-display it here (http://www.livejournal.com/customize/options.bml?group=sidebars) by choosing "no".
- If you want to upload the images to your own server or just save them all in case some stop working in the future, download the entire layout as a zip.
Cross-posting to house_cuddy and freelayouts
View it live at irilaytest
- This layout was tested in Firefox, Safari and IE7. It does NOT work properly in IE6 since it relies heavily on the use of PNGs, which IE6 doesn't support. (Basically, it looks ugly)
- Also, I tested it on a paid and a basic account - I have no idea if it works on plus/sponsored accounts or whatever they're called nowadays.
1.) Go to http://www.livejournal.com/customize
2.) Type "Deep Ocean" into the search box
3.) You should get "Deep Ocean", a theme of the "Minimalism" style as result, click apply
4.) Go to http://www.livejournal.com/customize/options.bml?group=customcss
5.) Set both "Use layout's stylesheets" and "Use layout's theme's stylesheet" to "No"
6.) Copy-Paste the following CSS into the "Custom Stylesheet" box:
* { margin:0; padding:0;}
img {border:0;}
hr {display:none;}
.ljuser a b {color:#fff; border-bottom:2px solid #5e9c26;}
.ljuser a:hover b, { color:#5e9c26; border-bottom:2px dotted #f8a63c;}
a.fn, .author .ljuser a {color:#346330; border-bottom:1px dotted #fff;}
.author .ljuser a:hover, a:hover { color:#e0831a;}
a.ico img {position:relative; top:8px;}
a {text-decoration:none; color:#3a8a4b; font-weight:bold; }
.view-entry .entry-linkbar {
text-align:center;
margin:0px 0px 30px 0px;
border:1px solid #bfd7bf;
}
/*-------- General Page Alignment ------*/
body {
background:url(http://img117.imageshack.us/img117/3061/bghb5.jpg) top center;
font-family:Helvetica, sans-serif;
font-size:14px;
color:#3a553f;
}
#page { background:url(http://img184.imageshack.us/img184/3699/bginnerya3.jpg) repeat-x;}
.layout { background:url(http://img166.imageshack.us/img166/8318/bgfotos2ff9.jpg) no-repeat top center; padding:172px 0px 0 0; }
.content {background:url(http://img155.imageshack.us/img155/8867/contentbg2pu5.jpg) no-repeat; width:1032px; margin:auto;}
.content-inner{ width:760px; margin:auto; background:url(http://img156.imageshack.us/img156/226/entrybgsd5.jpg) repeat-y;}
/*------ Header -----*/
.header {
width:760px;
margin:auto;
height:180px;
}
.header-sec h1, .userpic-in, .header-in h2 , .header-in h3 { display:none; }
ul.nav { list-style-type:none; height:180px; margin:0; padding:0;}
.nav-sub { display:none;}
li.item a {
width:190px;
display:block;
float:left;
height:180px;
color:#acd3ab;
font-size:1px;
margin:0;
padding:0;
}
li.item {margin:0; padding:0; height:180px; display:block; float:left;}
li.item-recent a {background:url(http://img291.imageshack.us/img291/3846/entrieshh1.jpg) no-repeat; }
li.item-recent a:hover {background:url(http://img291.imageshack.us/img291/3846/entrieshh1.jpg) no-repeat bottom left;}
li.item-friends a {background:url(http://img134.imageshack.us/img134/8334/friendsoq7.jpg) no-repeat;}
li.item-friends a:hover {background:url(http://img134.imageshack.us/img134/8334/friendsoq7.jpg) no-repeat bottom left;}
li.item-archive a {background:url(http://img229.imageshack.us/img229/9760/archivebx8.jpg) no-repeat;}
li.item-archive a:hover {background:url(http://img229.imageshack.us/img229/9760/archivebx8.jpg) no-repeat bottom left;}
li.item-profile a {background:url(http://img125.imageshack.us/img125/8148/infool9.jpg) no-repeat;}
li.item-profile a:hover {background:url(http://img125.imageshack.us/img125/8148/infool9.jpg) no-repeat bottom left;}
li.item-selected a {background-position:bottom left;}
/*-------Entries-----------*/
.entry-wrap {
width:760px;
background:url(http://img118.imageshack.us/img118/6041/commonentrybgja9.jpg) no-repeat;
}
.entry-wrap:first-child {
background:url(http://img139.imageshack.us/img139/6153/firstentrybgvj7.jpg) no-repeat;
}
.entry { padding:50px 0px 70px 50px;}
.entry-content,
.entry-title,
.entrymenu,
.metadata {
width:490px;
margin:0 190px 0 0;
}
.entry-title, .entry-title a {
color:#3a8a4b;
font-weight:bold;
font-size:24px;
}
.entry-content {
line-height:22px;
margin:20px 0 20px 0;
overflow-x:auto;
overflow-y:visible;
}
.metadata {
width:460px;
margin:10px 0 0px 20px;
border-left:9px solid #99ba99;
padding:0 0 0 10px;
font-size:12px;
color:#789b75;
line-height:17px;
}
.metadata a {
color:#789b75;
}
.meta-music-label,
.meta-location-label,
.meta-mood-label,
.meta-mood-value img{
display:none;
}
.meta-mood-value {
background:url(http://img515.imageshack.us/img515/8853/buttonmoodmoodsj4.png) no-repeat left center;
padding:0 0 0 17px;
}
.meta-music-value {
background:url(http://img129.imageshack.us/img129/549/buttonmoodmusicuh2.png) no-repeat left center;
padding: 0 0 0 17px;
}
.meta-location-value {
background:url(http://img129.imageshack.us/img129/6269/buttonmoodlocationta6.png) no-repeat left center;
padding: 0 0 0 17px;
}
.entry-content a:hover {
border-bottom:1px solid #3a553f;
}
blockquote {
margin:0 0 0 20px;
padding:10px;
border:1px solid #8fb98c;
}
blockquote:first-letter
{font-size: 20px; font-weight:bold;}
.entry-content ol, .entry-content ul {
line-height:15px;
padding:0 0 0 40px;
border:2px dotted #fff;
width:300px;
margin:0 0 0 20px;
}
.entry-content ol li { list-style-type:decimal-leading-zero; font-weight:bold;}
.entry-content ol li:hover, .entry-content ul li:hover { color:#fff;}
.entry-content ul { padding:0 0 0 20px; line-height:15px; }
.entry-content ul li {
list-style-type:none;
background:url(http://img233.imageshack.us/img233/5180/listunorderedrz7.png) no-repeat center left;
padding:0 0 0 20px;
font-weight:bold;
}
.entry-content table td{ padding:10px; border:1px dotted #fff;}
.entry-content table td:hover { border:1px solid #3a553f;}
.entrymenu ul{ list-style-type:none;}
/*-----comment buttons------*/
a.btn {
display:block;
width:44px;
height:46px;
font-size:1px;
color:#a2c1a1;
margin:0 0px 0 0px;
}
li.postcomment a.btn {background:url(http://img83.imageshack.us/img83/6274/addcommentph7.png) no-repeat;}
li.edit_entry a.btn {background:url(http://img73.imageshack.us/img73/6206/editrr0.png) no-repeat;}
li.edit_tags a.btn {background:url(http://img83.imageshack.us/img83/42/tagspp5.png) no-repeat;}
li.mem_add a.btn {background:url(http://img374.imageshack.us/img374/2664/memlz2.png) no-repeat;}
li.watch_comments a.btn {background:url(http://img513.imageshack.us/img513/1289/trackpd4.png) no-repeat;}
li.tell_friend a.btn {background:url(http://img261.imageshack.us/img261/89/tellfriendzh5.png) no-repeat;}
li.mem_add a.btn:hover,
li.edit_tags a.btn:hover,
li.postcomment a.btn:hover,
li.watch_comments a.btn:hover,
li.edit_entry a.btn:hover,
li.tell_friend a.btn:hover {
background-position:bottom left;
}
.comments a.btn {
background:url(http://img147.imageshack.us/img147/6946/commentsry8.png) no-repeat top left;
font-size:18px;
color:#fff;
text-align:center;
padding:17px 0 0 0;
height:29px;
margin:0 10px 0 0;
}
a.btn:hover {background-position:bottom left;}
.comments a.btn:hover {color:#407614;}
.entrymenu {clear:both;}
.entrymenu ul { float:right;}
.entrymenu li { display:block; float:left; font-size:10px;}
.entry-date {
background:url(http://img518.imageshack.us/img518/5556/datebgnm8.png);
;){kind=link}
height:25px;
padding:10px 0 0 0;
margin:5px 0 0 0;
}
.updated {border:0; font-size:12px; }
.author {
float:right;
width:189px;
text-align:center;
margin:-40px 0 0 0;
}
.author dt {
background:url(http://img179.imageshack.us/img179/6017/iconbgld2.jpg) no-repeat;
width:128px;
height:115px;
margin:auto;
padding:13px 0px 0px 0px;
}
dd.username { padding:0px 5px 5px 5px; }
.ljtags {
background:url(http://img89.imageshack.us/img89/7148/tagentryic9.png) no-repeat top left;
width:184px;
padding: 15px 0 3px 40px;
font-size:12px;
color:#536f56;
line-height:16px;
margin:20px 0 0 0;
}
.ljtags a { color:#536f56; }
/*--------Sidebar-----*/
div.sidebar {
margin:80px 0 0 0;
background:url(http://img53.imageshack.us/img53/7415/sidebarbgkm6.jpg) repeat-x #1d5731;
width:100%;
padding:0px 0 30px 0;
text-align:center;
}
div.sidebar-inner {
margin:auto;
width:95%;
}
dl.sidebar-block {
border-right:1px solid #154423;
float:left;
display:block;
text-align:left;
margin:30px 0px 0px 0px;
}
.sidebar-summary, .sidebar-tags {
width:23%;
}
.sidebar-summary { font-size:13px; }
dl.sidebar-summary { width:25%; }
.sidebar-summary .vcard { display:none;}
.sidebar-summary li {
margin:5px 0 5px 0;
color:#96a79a;
}
.sidebar-summary li a { color:#96a79a;}
.sidebar-summary ul, .sidebar-links dd, .tags{
list-style-type:none;
margin:0;
padding:0px 25px 0px 25px;
}
.sidebar-powered {
width:100%;
height:1px!important;
font-size:0px;
clear:both;
float:none;
}
.sidebar-block dt{
font-size:24px;
color:#226e3d;
margin:0 15px 20px 15px;
}
.calendar-wrap table {
margin:0 10px 0 10px;
}
.calendar-wrap th {
text-align:center;
font-weight:normal;
color:#175128;
}
.calendar-wrap td {
background:url(http://img227.imageshack.us/img227/5347/calendarnoposton4.png) no-repeat center center;
padding:10px;
text-align:center;
font-size:12px;
color:#175128;
}
.calendar-wrap td a {
background:url(http://img70.imageshack.us/img70/2912/calendarposteq7.png) no-repeat center center;
display:block;
padding:10px;
margin:-10px;
color:#0c3216;
}
.calendar-wrap td a:hover { color:#fff; }
.sidebar-links dd a {
color:#96a79a;
font-weight:bold;
display:block;
padding: 7px 0px 7px 30px;
background:url(http://img525.imageshack.us/img525/5808/singlelinkaxx4.png) no-repeat left center;
}
.sidebar-custom {color:#226e3d; width:15%;}
.sidebar-custom dd {padding:0 15px;}
.sidebar-links dd a:hover {
background:url(http://img82.imageshack.us/img82/968/singlelinkahoverwe2.png) no-repeat left center;
}
.sidebar-tags dt {
padding:0 0 0 30px;
background:url(http://img384.imageshack.us/img384/5002/sidebartagvg2.png) no-repeat left center;
}
.sidebar-links dt {
padding:0 0 0 32px;
background:url(http://img244.imageshack.us/img244/8320/linkstv0.png) no-repeat left center;
}
.sidebar-cal dt {
padding:0 0 0 36px;
background:url(http://img262.imageshack.us/img262/9494/sidebararchiveda9.png) no-repeat center left;
}
.sidebar-summary dt {
background:url(http://img147.imageshack.us/img147/8051/summaryxy5.png) no-repeat center left;
padding:0 0 0 26px;
}
/*-------Page Navigation--------*/
.page-nav {
width:550px;
text-align:right;
height:50px;
}
ul.page-nav, ul.page-nav li {
padding:10px;
margin:0;
list-style-type:none;
}
li.prev, li.next {width:40px;}
li.prev {float:left;}
li.next {float:right;}
li.prev a {float:left;}
li.prev a, li.next a {
display:block;
background:url(http://img99.imageshack.us/img99/8893/previousdj7.png) no-repeat top left;
width:40px;
height:32px;
font-size:1px;
color:#8db18b;
}
li.next a {float:right; background:url(http://img397.imageshack.us/img397/7634/nextfz6.png) no-repeat top right;}
li.prev a:hover, li.next a:hover {background-position:bottom left;}
/*-------Comment Pages----*/
.comment-wrap {
margin:20px 0 20px 0;
padding:7px 0 20px 15px;
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
}
.comment-head {
float:right;
width:189px;
text-align:center;
}
.comment-upic {
background:url(http://img179.imageshack.us/img179/6017/iconbgld2.jpg) no-repeat;
width:128px;
height:115px;
margin:auto;
padding:13px 0px 0px 0px;
text-align:center;
}
.comment-head-in { float:left; }
a.comment-permalink {
background:url(http://img518.imageshack.us/img518/5556/datebgnm8.png) no-repeat;
height:25px;
padding:13px 0 0 0;
display:block;
width:188px;
color:#3a553f;
font-weight:normal;
font-size:12px;
margin:10px 0 5px 0;
}
.comment-head-in label { display:none; }
.comment-menu {
clear:both;
margin:0 220px 0px 0;
text-align:right;
}
.comment-text {
margin:0 220px 0 0;
padding:20px;
}
/*--------Reply Thingies--------*/
#qrform, #postform { margin:0 210px 0 0;}
#qrform table {
padding:10px;
border:0px solid #fff!important;
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
}
#qrform table .textbox, #postform table .textbox {
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
padding:5px;
font-size:14px;
font-family:Helvetica, sans-serif;
color:#3a553f;
}
#postform table td {padding:3px;}
#postform font b { color:#3a553f;}
#commenttext.textbox { width:100%;}
.entry-comments-text table {text-align:center; width:500px;}
span.replylink {
width:500px;
text-align:center;
display:block;
margin:0px 0px 20px 0px;
}
input, select, textarea {
font-family:Helvetica, sans-serif;
border:0;
}
input, select {
background:url(http://img99.imageshack.us/img99/7425/commentsbglu3.png) no-repeat;
padding:4px;
color:#fff;
font-family:Helvetica, sans-serif;
font-weight:bold;
font-size:13px;
border:1px solid #fff;
}
select { color:#3a553f; }
input:focus, textarea:focus, select:focus { border:1px solid #3a553f;}
/*-------Calendar Pages-------*/
.entry-text .calendar-wrap table { width:500px;}
.entry-text .calendar-wrap caption { padding:10px 10px 10px 20px; font-size:24px; text-align:left; margin: 20px 0 0 0; }
.view-archive .entry-text ul { width:400px; margin:20px 0 0 40px; border:1px solid #99be99; padding:10px; list-style-type:none; color:#e0831a;}
/*---- Tag Pages --*/
.content-tags { margin:0 220px 0 0;}
.content-tags ul {list-style-type:none;}
.content-tags ul li { list-style-type:none; background:url(http://img233.imageshack.us/img233/5180/listunorderedrz7.png) no-repeat center left; padding:10px 0 7px 20px; font-weight:bold; border-bottom:1px solid #a0c197; }
.content-tags ul li:hover { background:#fff;}
/*----------Image Replacement --------*/
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
/* so that IE users will still see an image */
background-image: url(http://img504.imageshack.us/img504/6449/userud0.png);
;){kind=link}
padding: 10px 10px 15px 12px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://img504.imageshack.us/img504/6449/userud0.png);
padding: 10px 10px 15px 12px !important;
}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-image: url(http://img142.imageshack.us/img142/5843/communityiu6.png);
;){kind=link}
padding: 10px 10px 15px 12px !important;
}
.entry-title img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width:0;
height:0;
padding:27px 10px 0px 20px;
background:url(http://img218.imageshack.us/img218/4381/lockedet4.png) center left no-repeat;
}
dt.entry-linkbar a img, div.comment-head-in a img { width:0; height:0; }
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_memories.gif"]{ padding:20px 0px 21px 36px; background:url(http://img374.imageshack.us/img374/2664/memlz2.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_track.gif"]{padding:20px 0px 21px 36px; background:url(http://img513.imageshack.us/img513/1289/trackpd4.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_next.gif"]{ padding:11px 0px 21px 40px; background:url(http://img397.imageshack.us/img397/7634/nextfz6.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_prev.gif"]{ padding:11px 0px 21px 40px; background:url(http://img99.imageshack.us/img99/8893/previousdj7.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_edit.gif"]{ padding:11px 0px 29px 40px; background:url(http://img73.imageshack.us/img73/6206/editrr0.png) no-repeat top left;}
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_edittags.gif"]{ padding:22px 0px 21px 40px; background:url(http://img83.imageshack.us/img83/42/tagspp5.png) no-repeat top left; }
dt.entry-linkbar a img[src="http://p-stat.livejournal.com/img/btn_tellfriend.gif"]{ padding:27px 0px 10px 40px; background:url(http://img261.imageshack.us/img261/89/tellfriendzh5.png) no-repeat top left;}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_del.gif"] { padding:20px 0px 0px 22px; background:url(http://img147.imageshack.us/img147/4200/buttoncommentdeletedt9.png); }
;){kind=link}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_freeze.gif"] { padding:20px 0px 0px 22px; background:url(http://img239.imageshack.us/img239/5369/buttoncommentfreezeqi4.png);}
;}){kind=link}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_unfreeze.gif"] { padding:20px 0px 0px 22px; background:url(http://img161.imageshack.us/img161/514/buttoncommentunfreezesz7.png);}
;}){kind=link}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_track.gif"] { padding:20px 0px 0px 22px; background:url(http://img239.imageshack.us/img239/6048/buttoncommenttracksh6.png);}
;}){kind=link}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_edit.gif"] { padding:20px 0px 0px 22px; background:url(http://img530.imageshack.us/img530/339/buttoncommenteditge6.png);}
;}){kind=link}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_scr.gif"] { padding:20px 0px 0px 22px; background:url(http://img133.imageshack.us/img133/8245/screenek9.png);}
;}){kind=link}
div.comment-head-in a img[src="http://p-stat.livejournal.com/img/btn_unscr.gif"] { padding:20px 0px 0px 22px; background:url(http://img152.imageshack.us/img152/6447/unscreenad6.png);}
;}){kind=link}
dt.entry-linkbar a:hover img {background-position:bottom left;}
7.) Click on "Save Changes", and you're done.
TIPS:
- If you'd like to have links or other important stuff somewhere farther up than the sidebar at the bottom, you can add a sticky post here: http://www.livejournal.com/customize/options.bml?group=text
- If you don't like the page summary being displayed, you can un-display it here (http://www.livejournal.com/customize/options.bml?group=sidebars) by choosing "no".
- If you want to upload the images to your own server or just save them all in case some stop working in the future, download the entire layout as a zip.
Cross-posting to house_cuddy and freelayouts