Hokuto [springtime in muted colors]
Series: Tokyo Babylon
Character(s): Hokuto
--
Style: S2 -- Flexible Squares
Sidebar: None
Website: Not required
Resolution: best in 1280x1024, 1024x768
Browser: tested in Firefox and IE
Working Preview: hokutolayout

Since LJ decided to go all wanky and take away the option of creating new basic accounts, the working preview account has ads. Sorry about that--for some tips on getting rid of ads/making them look better with your layout, look below.

Good news is that now you can preview the custom comments page. :D



/* --- BASIC --- */ body { background-color: #793a36; background-image: url(''); background-repeat: repeat; background-position: top-left; background-attachment: fixed; text-align: center; font-size: 10px; color: #3d2116; font-family: "verdana", sans-serif; margin-top: 0px; } p, td, blockquote { font-size: 10px; } #sidebar { display: none; } .headerimage { position: relative; width: 625px; height: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; background-image: url('http://i195.photobucket.com/albums/z209/ookii-neko/springtime_header.jpg'); background-repeat: no-repeat; } #maincontent { padding: 5px; font-family: "arial", sans-serif; font-size: 15px; line-height: 15px; background-color: #eae0c2; color: #3d2116; margin-right: 0px; margin-left: 0px; margin-top: 10px; text-align: justify; } #content { width: 595px; margin-left: auto; margin-right: auto; background-color: #eae0c2; padding: 15px; text-align: justify; } ::-moz-selection { background: #dcb9a3; color: #333333; } /* --- LINKS --- */ a, a:link, a:visited { color: #916d9a; text-decoration: none; } a:hover { color: #ac99b1; text-decoration: none; } /* --- HEADER --- */ #header { width: auto; padding-top: 3px; padding-bottom: 3px; line-height: 15px; background-color: #eae0c2; font-family: "arial", sans-serif; font-size: 11px; font-weight: normal; text-transform: uppercase; color: #dcb9a3; text-align: center; letter-spacing: 1px; border-width: 0px; } div#header a, div#header a:link, div#header a:visited, div#header a:active { padding: 10px; font-size: 12px; font-weight: normal; text-transform: uppercase; color: #a95b4f; text-align: center; letter-spacing: 1px; background-color: #eae0c2; } div#header a:hover { padding:10px; color: #dcb9a3; background-color: #eae0c2; border-bottom: 0px dashed; } ul.navheader { padding: 5px; margin: 5px; } ul.navheader li { display: inline; padding: 5 3px 5 3px; } .title { display: none; text-align: center; color: #4876a7; font-family: "arial", sans-serif; font-size: 0px; letter-spacing: 0pt; text-transform: uppercase; } .subtitle { display: none; text-align: center; color: #4876a7; font-family: "arial", sans-serif; font-size: 0px; letter-spacing: 0pt; line-height: 0pt; text-transform: lowercase; } /* --- FOOTER --- */ #footer { width: auto; padding-top: 3px; padding-bottom: 3px; line-height: 15px; background-color: #eae0c2; font-family: "arial", sans-serif; font-size: 11px; font-weight: normal; text-transform: none; color: #dcb9a3; text-align: center; letter-spacing: 1px; border-width: 0px; } div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active { color: #a95b4f; font-size: 12px; text-transform: uppercase; font-weight: normal; } div#footer a:hover { color: #dcb9a3; font-weight: normal; } ul.navfooter { padding: 10px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 0px 0 0px; } .clearfoot { display: none; clear: both; } /* --- ENTRIES --- */ .subcontent { background-color: #eae0c2; } .entry { margin: 5px 5px 5px 5px; padding: 2px; color: #a95b4f; background-color: #eae0c2; font-family: "verdana", sans-serif; text-align: justify; line-height: 10pt; font-size: 10px; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } .userpic { position: relative; float: left; padding: 5px; margin-right: 5px; margin-left: 5px; z-index: 15; background-color: #f0ead8; background-image: url(''); background-repeat: repeat; } .userpicfriends { position: relative; float: left; margin: 5px; padding: 5px; text-align: center; font-family: "arial", sans-serif; font-size: 9px; z-index: 15; background-color: #f0ead8 !important; background-image: url(''); background-repeat: repeat; } .date { line-height: 200%; top: 3px; font-family: "verdana", sans-serif; font-size: 9px; color: #c1b591; text-align: left; letter-spacing: 1px; font-weight: none; text-transform: none; background-color: transparent; } .subject { padding: 2px; font-weight: light; font-size: 14px; color: #916d9a; font-family: "verdana", sans-serif; text-align: left; border-bottom: 1px #dcb9a3 solid; text-transform: none; background-color: #eae0c2; background-image: url(''); background-repeat: repeat; letter-spacing: 1pt; } .datesubject { background-color: #eae0c2; padding: 2px; } .currents, .currentmood, .currentmusic { font-family: "verdana", sans-serif; font-size: 9px; color: #a95b4f; } .comments { font-family: "arial", sans-serif; font-size: 11px; text-align: right; font-weight: none; padding: 10px; position: relative; top: 10px; border-top: 1px #dcb9a3 solid; background-color: #eae0c2; text-transform: uppercase; letter-spacing: 1pt; } div.comments a, div.comments a:link, div.comments a:visited{ color: #a95b4f; font-size: 11px; padding: 2px; font-weight: lighter; } div.comments a:hover { font-size: 11px; font-weight: lighter; color: #c57b70; background: ; background-image: url(''); padding: 2px; } .separator { background: transparent; height: 25px; } .ljtags { font-family: "verdana", sans-serif; font-size: 9px; color: #a95b4f; margin-top: 15px; font-weight: none; text-transform: lowercase; position: left; } input, textarea { background-color: #eae0c2; color: #a95b4f; } textarea.textbox { width: 100% !important; } /* --- COMMENTS PAGE -- PLUS/PAID ACCOUNTS ONLY!! --- */ .datesubjectcomment { background-color: #dcb9a3; padding: 3px; margin-top: 20px; } .userpiccomment { position: relative; background-color: #a95b4f; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left; } .box { padding: 8px; clear: right; } .reply { position: relative; margin: 10px 5px 5px 30px; padding: 15px 5px 5px 5px; text-align: left; font-family: "verdana", sans-serif; font-size: 10px; line-height: 100%; background-color: #eae0c2; color: #a95b4f; } .commentreply { position: relative; margin: 10px; font-size: 10px; font-family: "verdana", sans-serif; color: #a95b4f; } .commentbox { border-color: #dcb9a3; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #eae0c2; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #916d9a; } .datesubjectcomment a:hover { color: #ac99b1; } .commentinfo { background-color: #eae0c2; margin-top: 12px; width: 100%; }

Please keep in mind that this layout does not follow my old tutorial in anyway. The instructions for installing this layout are very simple:


1. Go to Journal-->Customize Journal
2. Switch to S2 style if necessary; if you are already on this style, ignore this step.
3. Be sure that your theme is set to Flexible Squares. The color scheme doesn't matter.
4. Click 'customize your theme' in the upper-ish right corner.
5. Go to the 'Custom CSS' page.
6. 'Use layout's style sheet(s)' ---> NO
7. Paste the codes into the white box, save your changes.



Tips for Plus Accounts and Ads

1. First things first--customize the color of your ads. You have to go to the colors page and do this yourself. HERE IS AN EXAMPLE.

2. For Firefox users:
- Download the Greasemonkey extension. Then...
- Download the LJ Ads Butler script.
Now all you should have left in place of the ads are empty boxes!


This layout works with all account types. However, the custom comments page will only work with a paid or plus account.

If you have any questions, feel free to ask. :)

Please credit!