Kubrick for free LJ users: lj

Kubrick is one of the most common and most popular themes for Wordpress. While there is a version for paying LiveJournal users, I have yet to see it ported for free accounts due to the limited templating options available.

So here you go, Kubrick for free users based on S2 and Smooth Sailing.

Installation:

Go to the Customize Journal page.
Under Basics, select the New System (S2) style system.
Under Look and Feel, select the Smooth Sailing layout.
Under Custom Options, click on Custom CSS. Select No for all 3 questions. Copy the following under Custom Stylesheet:
/* Kubrick v1.2.5 for WordPress 1.2 http://binarybonsai.com/kubrick/ This theme was designed and built by Michael Heilemann, whose blog you will find at http://binarybonsai.com/ The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php *** REGARDING IMAGES *** All CSS that involves the use of images, can be found in the 'index.php' file. This is to ease installation inside subdirectories of a server. Have fun, and don't be afraid to contact me if you have questions. */ /* modified for livejournal by aileron (http://aileron.livejournal.com/) */ /* Begin Typography & Colors */ body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; background-color: #d5d6d7; color: #333; text-align: center; } .pageblock { background-color: white; border: 1px solid #959596; text-align: left; } .pageheaderblock { background-color: #73a0c5; } .entryText { font-size: 1.2em } .entryText { line-height: 1.4em; } .sidebar .postmetadata { text-align: center; } .pagefooterblock { background-color: #eee; } small { font-family: Arial, Helvetica, Sans-Serif; font-size: 0.9em; line-height: 1.5em; } .entryHeaderDate { font-family: Arial, Helvetica, Sans-Serif; font-size: 0.9em; } h1, h2, h3, .header-title, .entryHeaderSubject { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; font-weight: bold; } h1 { font-size: 4em; text-align: center; } .header-title { font-size: 4em; text-align: center; font-style: italic; } .header-subtitle { font-size: 1.2em; text-align: center; font-style: italic; } h2, .entryHeaderSubject { font-size: 1.6em; font-weight:bold; margin: 10px 0 5px 0; } h2.pagetitle { font-size: 1.6em; } .sideboxTitle { font-family: 'Lucida Grande', Verdana, Sans-Serif; font-size: 1.2em; font-weight: bold; } h3 { font-size: 1.3em; } h1, h1 a, h1 a:hover, h1 a:visited, .header-title, .header-subtitle { text-decoration: none; color: white; } h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, .entryHeaderSubject, .entryHeaderSubject a, .entryHeaderSubject a:visited { color: #333; } h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, .sideboxTitle, #wp-calendar caption, cite, .entryHeaderSubject { text-decoration: none; } .entryText p a:visited { color: #b85b5a; } .commentlist li, #commentform input, #commentform textarea { font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif; } .commentlist li { font-weight: bold; } .commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal; font-size: 1.1em; } .commentlist p { font-weight: normal; line-height: 1.5em; text-transform: none; } #commentform p { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } .commentmetadata { font-weight: normal; } .sidebar { font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif; } small, .sidebar ul ul li, .sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike, .summarylist, .entryHeaderDate { color: #777; } code { font: 1.1em 'Courier New', Courier, Fixed, Monospace; } acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; } a, h2 a:hover, h3 a:hover, .entryHeaderSubject a:hover { color: #06c; text-decoration: none; } a:hover { color: #147; text-decoration: underline; } /* End Typography & Colors */ /* Begin Structure */ body { margin: 0; padding: 0; } .pageblock { background-color: white; margin: 20px auto; padding: 0; width: 760px; border: 1px solid #959596; } .pageheaderblock { margin: 0 auto; height: 200px; width: 100%; background-color: #73a0c5; } .body-title { margin: 0px 0px 15px 30px; color: #fff; } .entryHolder { margin: 0 0 40px 30px; text-align: justify; width: 550px; } .widecolumn .entryHolder { margin: 0; } .bodyblock .entryLinkbar { padding-top: 5px; } .widecolumn .entryLinkbar { margin: 30px 0; } .pagefooterblock { padding: 20px 0; margin: 0 auto; width: 760px; text-align: center; clear: both; } /* End Structure */ /* Begin Headers */ h1, .header-title { padding-top: 70px; margin: 0; } .header-subtitle { text-align: center; } h2, .entryHeaderSubject { margin: 30px 0 0; } h2.pagetitle { margin-top: 30px; text-align: center; } .sideboxTitle { margin: 20px 0 3px 0; padding: 0; } h3 { padding: 0; margin: 30px 0 0; } h3.comments { padding: 0; margin: 40px auto 20px ; } /* End Headers */ /* Begin Images */ p img { padding: 0; max-width: 100%; } /* Using 'class="alignright"' on an image will (who would've thought?!) align the image to the right. And using 'class="centered', will of course center the image. This is much better than using align="center", being much more futureproof (and valid) */ img.centered { display: block; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; } .alignright { float: right; } .alignleft { float: left } /* End Images */ /* Begin Lists Special stylized non-IE bullets Do not work in Internet Explorer, which merely default to normal bullets. */ html>body .entryText ul { margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px; text-indent: -10px; } html>body .entryText li { margin: 7px 0 8px 10px; } .entryText ul li:before, .sidebar ul ul li:before, .summarylist { content: "\00BB \0020"; } .entryText ol { padding: 0 0 0 35px; margin: 0; } .entryText ol li { margin: 0; padding: 0; } .entryLinkbar ul { text-align: right; } .entryLinkbar li { display: inline; list-style-type: none; list-style-image: none; padding: 0px 5px 0px 5px; } .sidebar ul, .sidebar ul ol, .summarylist { margin: 0; padding: 0; } .sidebar ul li, .summarylist { list-style-type: none; list-style-image: none; margin-bottom: 15px; } .sidebar ul p, .sidebar ul select, .summarylist { margin: 5px 0 8px; } .sidebar ul ul, .sidebar ul ol, .summarylist { margin: 5px 0 0 10px; } .sidebar ul ul ul, .sidebar ul ol, .summarylist { margin: 0 0 0 10px; } ol li, .sidebar ul ol li, .summarylist { list-style: decimal outside; } .sidebar ul ul li, .sidebar ul ol li, .summarylist { margin: 3px 0 0; padding: 0; } .bodynavblock ul li { display: inline; text-align:center; margin-right: 10px; } /* End Entry Lists */ /* Begin Sidebar */ .sidebar { width: 170px; } .sidebar form { margin: 0; } .sidebox { margin-right: 10px; width: 150px; } .sidebox #profile, sidebox #latestmonth, .sidebox #search { text-align: center; } .sidebox #systemlinks { text-align: left; } .sidebox #latestmonth table{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 4px; } .sidebox #tags_sidebox, .sidebox #systemlinks, .sidebox #summary { margin-left:10px; } .sidebox #tags_sidebox { height: 205px; width: 150px; overflow: auto; } /* End Sidebar */ /* Begin Menu */ .header-menu { margin-top: 45px; text-align: center; } .header-menu ul { padding: 0; margin: 0; } .header-menu ul li { display: inline; margin: 0; } .header-menu ul li a { font: 1em 'Century Gothic', 'Lucida Grande', Arial, Sans-Serif; text-transform: lowercase; color: #fff; margin: 0px; padding: 5px 10px 6px 10px; } .header-menu ul li a:hover { background: #fff; color: #4040FF !important; text-decoration: none; } .header-menu ul li.current_page_item a, .header-menu ul li.current_page_item a:hover { background: #fff; color: #4040FF !important; text-decoration: none; } /* End Menu */ /* Begin Various Tags & Classes */ acronym, abbr, span.caps { cursor: help; } acronym, abbr { border-bottom: 1px dashed #999; } blockquote { margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px solid #ddd; } blockquote cite { margin: 5px 0 0; display: block; } .center { text-align: center; } hr { display: none; } a img { border: none; } .navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 60px; } /* End Various Tags & Classes*/ /* Begin Other LJ-specific Tags */ .month { width: 300px; margin-left: 50px; } .daytitles { font-weight:bold; } .day-count { font-style: italic; } .entryUserinfo { float: left; margin: 0 10px 10px 0; width: 50px; } .entryUserinfo { color: #fff; } .ljuser { color: #000; } /* End Other LJ-Specific Tags */ /* "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you. It won't be a stylish marriage, I can't afford a carriage. But you'll look sweet upon the seat of a bicycle built for two." */ /* BEGIN IMAGE CSS */ /* To accomodate differing install paths of WordPress, images are referred only here, and not in the wp-layout.css file. If you prefer tso use only CSS for colors and what not, then go right ahead and delete the following lines, and the image files. */ body { background: url("http://tinypic.com/6qdtoj.jpg"); } .pageblock { background: url("http://tinypic.com/jt6umo.jpg") repeat-y top; border: none; } .pageheaderblock { background: url("http://tinypic.com/6qduzb.jpg") no-repeat bottom center; } .pagefooterblock { background: url("http://tinypic.com/6qduyx.jpg") no-repeat bottom; border: none;} /* Because the template is slightly different, size-wise, with images, this needs to be set here If you don't want to use the template's images, you can also delete the following two lines. */ .pageheaderblock { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; } .headertitle { margin: 7px 9px 0; height: 192px; width: 740px; } /* END IMAGE CSS */

Dev Notes:

The stylesheet validates as CSS but it is by no means clean. I'll try to clean up the clutter some other time hehe.
The main text area is set at 500 pixels. Having images wider than that will ruin the layout in IE. Either a) use LJ-cuts or b) get Firefox :)
I tested this using Firefox and IE only so I have no idea how this looks in other browsers.
Images are hosted at TinyPic and downtimes may occur sporadically.

Known Issues:

Under your User Info, make sure you have something written under "Journal Subtitle" (even a blank space will do) or else the menu will "float."
The main text area is set at 500 pixels. Having images wider than that will ruin the layout in IE. Either a) use LJ-cuts or b) use another browser :)

Thanks to:

Michael Heilemann for Kubrick
masterslacker for Smooth Sailing

Post a new comment
Error

Anonymous comments are disabled in this journal
We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

Anonymously

switch

LiveJournal

Facebook

Twitter

OpenId

Google

MailRu

VKontakte

Anonymously

default userpic

Your reply will be screened

Your IP address will be recorded

Preview comment

Help
42 comments

Post a new comment
42 comments

Log in

Kubrick for free LJ users

Error