minimalism: planet caravan
EDIT 2: Chrome/Safari bug is FIXED! :D
I decided to play around with Minimalism here -- the bar on the side of each entry varies between five different colors, depending on the entry ID. It's actually a lot more randomized than it looks in the preview; it ended up going from darkest -> lightest purely out of coincidence. Surprisingly enough, it didn't break in IE.
(Btw, I'm pretty sure there's one thing I'm forgetting to fix in the stylesheet, or address here, but I can't remember what. I'll edit this once I do. 8|)
layout notes
account types
Basic, Plus, Paid
compatible browsers
Internet Explorer 8, Mozilla Firefox, Opera, Safari, Google Chrome
There are minor alignment issues in IE (as usual).
minimum resolution
1024x768
comment pages
Yes
navstrip
Optional
disabled
Sidebar
css stylesheet
stylesheet
/*---------------------------------------------------
STYLESHEET CREATOR: scythe.livejournal.com
STYLESHEET NAME: Planet Caravan
S2 STYLE: Minimalism
DOWNLOAD: thrashmetal.livejournal.com
****Please remember to credit!****
-----------------------------------------------------*/
body {
background:none repeat scroll 0 0 #FFFFFF;
color:#111111;
font-family:Helvetica,Arial,Sans-serif;
font-size:11px;
margin:0;
}
a, a:visited {
color:#ED303C;
text-decoration:none;
}
a:hover {
color:#F5634A;
text-decoration:underline;
}
blockquote {
border-left:14px solid #111111;
padding-left:10px;
}
a img {
border:medium none;
}
li {
margin:3px 0;
}
.layout {
position:absolute;
text-align:justify;
top:0;
width:100%;
}
hr {
display:none;
}
.entry-title {
font-size:24px;
letter-spacing:-1px;
line-height:27px;
margin-left:4px;
padding:16px 17px;
text-align:left;
}
dt.entry-title a {
color:#111111;
}
dt.entry-title a:hover {
}
.entry-wrap {
margin:0 auto;
width:645px;
}
dd.entry-text {
margin:0;
padding:0 18px;
}
.entry-content {
line-height:17px;
min-height:100px;
padding-bottom:20px;
}
dl#post-sticky .entry-content {
min-height:0;
padding-bottom:15px;
}
.vcard {
float:right;
line-height:13px;
text-align:right;
}
.vcard dd.username .ljuser a b {
font-size:14px;
}
.vcard dd.username .ljuser a:hover {
text-decoration:none;
}
.vcard dt {
float:right;
}
.vcard dt img {
border:19px solid #111111;
margin-left:-710px;
margin-top:-37px;
position:absolute;
}
dd.username img[src*="userinfo.gif"], dd.username img[src*="user_ontd.gif"], dd.username img[src*="userinfo-support.gif"], dd.username img[src*="community.gif"], dd.username img[src*="partnercomm.gif"], dd.username img[src*="newsinfo.gif"], dd.username img[src*="syndicated.gif"] {
background:none repeat scroll 0 0 transparent !important;
height:0;
padding:0 !important;
width:0;
}
abbr.updated {
border:0 none;
}
.metadata {
line-height:15px;
margin-bottom:7px;
margin-left:22px;
}
.metadata dl {
line-height:15px;
margin:0;
padding:0;
}
.metadata dt, .metadata dd {
display:inline;
margin:2px;
}
dd.meta-music-value {
background:url("http://irondevil.org/icon/categories/damniconsmini/musicnote.gif") no-repeat scroll 1px 3px transparent;
padding-left:14px;
}
dd.meta-mood-value {
background:url("http://irondevil.org/icon/categories/damniconsmini/heart.gif") no-repeat scroll 1px 3px transparent;
padding-left:14px;
}
dd.meta-location-value {
background:url("http://irondevil.org/icon/categories/damniconsmini/house.gif") no-repeat scroll 0 1px transparent;
padding-left:14px;
}
dd.meta-groups-value {
background:url("http://irondevil.org/icon/categories/damniconsmini/user.gif") no-repeat scroll 1px 0 transparent;
padding-left:14px;
}
.meta-music-label, .meta-location-label, .meta-mood-label, .meta-groups-label {
display:none !important;
}
.ljtags {
background:url("http://i48.tinypic.com/28nqs7.gif") no-repeat scroll 0 2px transparent;
line-height:13px;
margin-left:17px;
margin-top:16px;
padding-left:12px;
text-transform:lowercase;
}
.ljtags a {
color:#111111;
}
.entrymenu {
background:none repeat scroll 0 0 #111111;
font-size:14px;
margin:0 0 0 4px;
padding:15px 4px;
}
dd.entrymenu ul {
margin:0;
padding:0;
}
dd.entrymenu ul li a {
color:#FFFFFF;
margin-left:8px;
text-transform:lowercase;
}
dd.entrymenu li {
display:inline;
}
dd.entrymenu li.comments {
background:url("http://irondevil.org/icon/categories/icondock%20-%20marker%20icons%20WHITE/comment.png") no-repeat scroll 0 0 transparent;
display:block;
float:right;
height:32px;
line-height:19px;
margin-top:-7px;
padding:3px 6px 5px 0;
text-align:center;
width:32px;
}
dd.entrymenu li.comments a {
color:#FFFFFF;
font-size:12px;
font-weight:bold;
letter-spacing:-1px;
margin:0;
padding:5px;
}
dd.entrymenu li.comments a:hover {
color:#AAAAAA;
text-decoration:none;
}
dd.entrymenu li.postcomment {
background:url("http://irondevil.org/icon/categories/icondock%20-%20marker%20icons%20WHITE/pencil.png") no-repeat scroll 0 0 transparent;
display:block;
float:right;
height:32px;
margin-right:5px;
margin-top:-7px;
width:32px;
}
dd.entrymenu li.postcomment a {
color:#000000;
display:block;
font-size:0;
margin-left:0;
padding:16px 5px;
}
ul.nav {
display:inline;
margin:0;
padding:0;
text-align:center;
}
.header {
background:none repeat scroll 0 0 #111111;
margin-bottom:4px;
padding:100px 0 28px;
}
.header-in {
text-align:center;
}
.header-sec {
display:inline;
}
.header li {
margin:0;
padding:0;
}
.header ul.nav li.item {
display:inline;
list-style:none outside none;
margin:0 5px;
padding:0;
}
.header li.item a {
color:#FFFFFF;
font-size:24px;
letter-spacing:-2px;
text-transform:lowercase;
}
.header li.item-selected a {
color:#AAAAAA;
}
.header li.item-selected a:hover {
text-decoration:none;
}
ul.nav-sub {
display:inline;
margin:0;
padding:0;
}
ul.nav-sub li {
display:inline;
margin:0 9px 0 0;
}
.userpic {
display:none;
}
.header h2, .header h3, .header h1 {
display:none;
}
.sidebar {
display:none;
}
.ljuser a b {
background:none repeat scroll 0 0 transparent;
text-decoration:none !important;
}
.ljuser a:hover b {
background:none repeat scroll 0 0 transparent;
border-bottom:0 none;
text-decoration:none !important;
}
img[src*="userinfo.gif"], img[src*="userinfo-support.gif"], img[src*="user_ontd.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"] {
background:url("http://irondevil.org/icon/categories/damniconsmini/user.gif") no-repeat scroll 0 0 transparent;
height:0;
padding:15px 8px 0 0 !important;
width:0;
}
#lj_controlstrip img[src*="userinfo.gif"], #lj_controlstrip img[src*="user_ontd.gif"] {
background:url("http://irondevil.org/icon/categories/damniconsmini/user.gif") no-repeat scroll 0 0 transparent;
}
img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-image:url("http://irondevil.org/icon/categories/damniconsmini/house.gif");
background-repeat:no-repeat !important;
height:0;
padding:15px 12px 0 0 !important;
width:0;
}
img[src*="newsinfo.gif"], img[src*="syndicated.gif"] {
background-image:url("http://irondevil.org/icon/categories/damniconsmini/note2.gif") !important;
background-repeat:no-repeat !important;
height:0;
padding:14px 10px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"], img[src*="icon_groups.gif"], img[src*="icon_private.gif"] {
background-image:url("http://irondevil.org/icon/categories/icondock%20-%20marker%20icons/link.png") !important;
background-position:0 0;
background-repeat:no-repeat;
height:0;
padding:1px 31px 28px 0 !important;
width:0;
}
ul.page-nav {
background:none repeat scroll 0 0 #111111;
font-size:14px;
list-style:none outside none;
margin:0;
min-height:10px;
padding:17px;
text-align:center;
}
ul.page-nav li {
display:inline;
margin:0 8px;
padding:0;
}
ul.page-nav li a {
color:#111111;
font-size:0;
}
li.prev a {
background:url("http://irondevil.org/icon/categories/icondock%20-%20marker%20icons%20WHITE/arrow-left.png") no-repeat scroll 0 50% transparent;
padding:17px 0 17px 33px;
}
li.next a {
background:url("http://irondevil.org/icon/categories/icondock%20-%20marker%20icons%20WHITE/arrow-right.png") no-repeat scroll 100% 50% transparent;
padding:17px 0 17px 33px;
}
ul.page-nav a {
color:#FFFFFF;
text-transform:lowercase;
}
dl#post-sticky.entry {
padding-bottom:14px;
}
dl#post-sticky.entry .entry-title {
padding:16px 17px 10px;
}
.view-month .entry-text {
font-size:14px;
}
.view-archive .entry-wrap li {
display:inline;
font-size:14px;
margin-right:3px;
}
.calendar-wrap table {
margin:16px auto;
width:400px;
}
.calendar-wrap td {
background:none repeat scroll 0 0 #DDDDDD;
padding-bottom:24px;
padding-left:6px;
}
a.month {
font-size:24px;
letter-spacing:-2px;
}
a.year {
font-size:24px;
letter-spacing:-2px;
}
.entry-linkbar {
float:right;
padding:10px 12px !important;
}
img[src*="btn_prev.gif"] {
background-image:url("http://i48.tinypic.com/b4g35w.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 15px 0 0 !important;
width:0;
}
img[src*="btn_edit.gif"] {
background-image:url("http://i45.tinypic.com/qrmbtl.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 17px 0 0 !important;
width:0;
}
img[src*="btn_edittags.gif"] {
background-image:url("http://i48.tinypic.com/2wewg8i.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 16px 0 0 !important;
width:0;
}
img[src*="btn_memories.gif"] {
background-image:url("http://i47.tinypic.com/35je874.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:14px 15px 0 0 !important;
width:0;
}
img[src*="btn_track.gif"] {
background-image:url("http://i49.tinypic.com/286wup0.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 15px 0 0 !important;
width:0;
}
img[src*="btn_next.gif"] {
background-image:url("http://i48.tinypic.com/14t0i6e.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 15px 0 0 !important;
width:0;
}
img[src*="http://p-stat.livejournal.com/img/button-flag.gif"] {
background-image:url("http://i49.tinypic.com/2gt2ip5.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 15px 0 0 !important;
width:0;
}
img[src*="btn_del.gif"] {
background-image:url("http://i50.tinypic.com/sw32v7.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 15px 0 0 !important;
width:0;
}
img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"] {
background-image:url("http://i50.tinypic.com/zjcbhc.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 15px 0 0 !important;
width:0;
}
img[src*="btn_freeze.gif"] {
background-image:url("http://i49.tinypic.com/2gt2ip5.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 16px 0 0 !important;
width:0;
}
textarea, input, select {
background:none repeat scroll 0 0 white;
border:1px solid #E9E9E9;
color:#333333;
font-size:12px;
max-width:450px;
}
.comments-links {
background:none repeat scroll 0 0 #111111;
color:#FFFFFF;
font-size:14px;
padding:12px;
text-align:center;
}
.entry-comments-text {
}
.comment-wrap {
margin-bottom:11px;
margin-top:24px;
}
.comment-upic img {
border:14px solid #111111;
float:left;
height:75px;
width:75px;
}
.comment-text {
margin:14px 11px 0 114px;
min-height:72px;
}
a.comment-permalink {
margin:0 4px;
}
.comment-menu {
background:none repeat scroll 0 0 #111111;
color:#000000;
padding:7px;
text-align:right;
}
.comment-menu a, .comments-links a {
color:#FFFFFF;
}
.comment-head-in {
font-size:10px;
padding-left:114px;
}
.comment-head-in p {
display:inline;
}
.comment-head-in .ljuser {
font-size:18px;
}
.comment-head-in img[src*="userinfo.gif"] {
background-image:none !important;
height:0;
padding:0 !important;
width:0;
}
.comment-head-in h3 {
color:#AAAAAA;
font-size:24px;
font-weight:normal;
letter-spacing:-2px;
margin-bottom:0;
}
#qrform table {
border:medium none !important;
}
.content-tags {
padding:10px;
}
div.ContextualPopup img {
border:0 none;
}
div.ContextualPopup div.Inner {
background:none repeat scroll 0 0 transparent !important;
border:0 none;
color:#222222 !important;
font-family:Helvetica,Arial,Sans-Serif;
font-size:11px;
padding:3px;
width:23em;
}
div.ContextualPopup .Content {
background:none repeat scroll 0 0 white;
line-height:1.4;
margin-right:81px;
padding:7px 9px;
}
div.ContextualPopup .Relation {
font-weight:bold !important;
}
div.ContextualPopup .Content .OnlineStatus {
font-weight:bold;
}
div.ContextualPopup .Userpic {
padding:0;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
color:#000000 !important;
font-weight:normal;
text-decoration:none !important;
}
#lj_controlstrip {
background:none repeat scroll 0 0 #111111;
color:#FFFFFF;
}
#lj_controlstrip td {
border-bottom:medium none;
color:#FFFFFF;
}
#lj_controlstrip a {
color:#FFFFFF;
}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic {
border-right:0 none;
}
#lj_controlstrip_login td {
border-bottom:0 none;
}
#lj_controlstrip td td {
border-bottom:0 none;
}
#lj_controlstrip_userpic {
background-image:url("http://stat.livejournal.com/palimg/controlstrip/ljlogo.gif/ptd4dce8000000");
}
#lj_controlstrip_loggedout_userpic {
background-image:url("http://stat.livejournal.com/palimg/controlstrip/ljlogo-loggedout.gif/ptd4dce8000000");
}
#lj_controlstrip input {
background:none repeat scroll 0 0 #333333 !important;
border:medium none;
color:#FFFFFF !important;
}
#lj_controlstrip_search_input_text, #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
background:none repeat scroll 0 0 #333333 !important;
border:medium none;
color:#FFFFFF !important;
}
#lj_controlstrip .ljuser a b {
background:none repeat scroll 0 0 transparent;
color:#FFFFFF;
letter-spacing:0;
text-decoration:none !important;
}
a[st_page*="home"] {
display:none;
}
dl[id^="post"] {
border-left-style:solid;
border-left-width:78px;
margin:0 0 4px;
}
/* Codes for the colors to the left of the entries */
dl[id$="4"], dl[id$="9"] {
border-color:#FAD089;
}
dl[id$="2"], dl[id$="8"] {
border-color:#FF9C5B;
}
dl[id$="3"], dl[id$="6"] {
border-left-color:#F5634A;
}
dl[id$="7"], dl[id$="1"] {
border-color:#ED303C;
}
dl[id$="5"], dl[id$="0"] {
border-color:#FAE589;
}
how to install
select journal style
Type Deep Ocean into the search box and apply the theme.
custom css
Make sure any drop-down boxes are set to No, paste the code into the box, and click Save Changes.
optional
upload imagesThe following icons were uploaded to Tinypic, which I've known to be pretty good with not deleting stuff, but you might want to up them to your own account to ensure that they stick around.
http://i48.tinypic.com/28nqs7.gif
http://i48.tinypic.com/b4g35w.jpg
http://i45.tinypic.com/qrmbtl.jpg
http://i48.tinypic.com/2wewg8i.jpg
http://i47.tinypic.com/35je874.jpg
http://i49.tinypic.com/286wup0.jpg
http://i48.tinypic.com/14t0i6e.jpg
http://i50.tinypic.com/sw32v7.jpg
http://i50.tinypic.com/zjcbhc.jpg
http://i49.tinypic.com/2gt2ip5.jpg
change the colorsAt the end of the stylesheet, you can find this block of code:dl[id$="4"], dl[id$="9"] {
border-color:#FAD089;
}
dl[id$="2"], dl[id$="8"] {
border-color:#FF9C5B;
}
dl[id$="3"], dl[id$="6"] {
border-left-color:#F5634A;
}
dl[id$="7"], dl[id$="1"] {
border-color:#ED303C;
}
dl[id$="5"], dl[id$="0"] {
border-color:#FAE589;
}
Simply change the hex values to your own colors.
appendix
credit and comment
• Please credit thrashmetal somewhere public. (Profile, Links List, Friends Only post, etc.)
• Comments aren't required, but are appreciated!
resources
• Icons by Icon Dock and damnicons.
• Userpic by kush.
• Based on the Maddening Caravan palette.
read the layout faq before asking questions!
commission a custom layout!