LJ Layout: Kanjani8 in Colors

[erotopia37564]

Scans are by me. Brushes used are by yunhe.
This layout took me a total of five hours to make. From the header all the way down to coding. The header took an hour, I actually made one version and scrapped it for the one in this layout. The coding took four hours because this is the first time I ever actually tried to alter flexible squares to fit the layout's image.

This layout looks best with Mozilla Firefox and on a resolution of 1280 x 1024. Do not come back complaining that your layout looks all screwed up because I told you what it looks best in. This is a layout for FLEXIBLE SQUARES, an S2 styling system. It is good for all three account status, free/paid/plus. Please read the instructions and terms below:
1. Go to Customize Your Journal Style/Theme
2. Find Flexible Squares, this layout will not work with any other layout BUT flexible squares.
3. Go to the Custom CSS option and select NO for everything: Use Layout Stylesheet, Use Layout Style Sheet When Including Custom blahblahblah, Use External blahblahblah.
4. Click on Save Changes then go to your journal and see the magic happen.

TERMS:
1. Do not alter this layout in anyway. Seriously. Don't. It took me a long time to make the graphics and code it, I appreciate if you don't alter it. If you want alterable layouts, check out Minty Peach for 50+ Flexible Squares layouts (that you can edit).
2. If you like it and are using it, a comment would be nice so I can see how it looks on your blog :DDDDDDDDDDD
3. If you are going to repost this layout, link them to this entry. Do not repost this layout on your own journal and do not claim it as your own work.
4. Credit is really really nice, so give credit where credit is do. Anywhere is nice \:D/
5. And yes, you can use the layout. You do not have to ask. If anyone askes me " can I use this layuot? " i won't bother responding.
the layout in action here (will probably end up changing if I'm working on a new layout)

/* layout designed by ladymercury - lady_mercury.livejournal.com for flexible squares: paid, plus and free do not edit below and comment if taking this layout! */ BODY { margin-top: 0px; margin-bottom: 0px; background-color: #696866; background-image: url(''); background-repeat: repeat; background-position: top-left; background-attachment: scroll; text-align: left; font-size: 10pt; color: #343434; font-family: "Verdana", sans-serif; } a, a:link { font-family: "Verdana", sans-serif; color: #d37654; text-decoration: none; } a:hover{ font-family: "Verdana", sans-serif; color: #000000; } a:visited { font-family: "Verdana", sans-serif; color: #cfbf9b; text-decoration: none; } blockquote { margin: 0px 20px 0px 20px; padding: 13px; color: #000000; font-size: 7pt; border: 1px solid #a8a9c8; background: #e6e6e6; text-align: justify; } p, td { font-size: 10pt; } code, kbd, pre, tt { font-family: monospace; } #content { width: 980px; height: auto; background-image: url(''); background-position: bottom; margin-left: 64px; margin-right: 160px; float: left; } #maincontent { margin: 0px 220px 0px 140px; margin-bottom: 0px; } #sidebar { width: 204px; padding: 5px; background-color: #ffffff ; background-image: url(''); background-repeat: repeat; background-position: right; color: #343434; font-family: "verdana" Helvetica, sans-serif; font-size: 7pt; line-height: 14pt; text-align: justify; float: right; border-left: 1px solid #e9e9e9; border-right: 5px solid #b8b7b5; } /**************************************************** HEADER LINKS - NOT THE HEADERIMAGE **************************************************/ #header { float: left; width: auto; text-align: right; padding: 10px 0px 10px 0px; clear: both; } div#header a, div#header a:link, div#header a:visited { width: 80px; margin: 10px 0px 10px 0px; display: block; background-color: #b8b7b6; font-size: 9px; color: #ffffff; padding: 13px; } div#header a:hover { width: 80px; margin: 10px 0px 10px 0px; display: block; background-image: url('http://i33.tinypic.com/2hweo1t.jpg'); background-position:left; font-size: 9px; color: #ffffff; padding: 13px; } ul.navheader { padding: 6px; margin: 3px; } ul.navheader li { display: inline; list-style: none; padding: 0; } div#header li.view { width: 80px; margin: 10px 0px 10px 0px; display: block; background-image: url('http://i33.tinypic.com/2hweo1t.jpg'); background-position:left; font-size: 9px; color: #ffffff; padding: 13px; } /******************************************** FOOTER LINKS ********************************************/ #footer { width: auto; height: 0px; text-align: center; background-color: #e5e5e5; background-image: url(''); color: #000000; font-family: "Verdana", sans-serif; font-size: 8pt; text-transform: lowercase; letter-spacing: -1px; } div#footer a, div#footer a:link, div#footer a:visited { color: #000000; font-family: "Verdana", sans-serif; font-size: 8pt; text-transform: lowercase; letter-spacing: -1px; padding: 7px 10px 7px 10px; } div#footer a:hover { color: #222222; font-family: "Verdana", sans-serif; font-size: 8pt; text-transform: lowercase; letter-spacing: -1px; padding: 7px 10px 7px 10px; } div#footer li.viewing { color: #000000; font-family: "Verdana", sans-serif; font-size: 8pt; text-transform: lowercase; letter-spacing: -1px; } ul.navfooter { padding: 0px; margin: 5px; } ul.navfooter li { display: inline; } /************************************************************* TITLE AND SUBTITLE ************************************************************/ .title { display: none; font-size: 1pt; letter-spacing: 2pt; line-height: 0pt; } .subtitle { display: none; font-size: 1pt; letter-spacing: 2pt; line-height: 0pt; } /*********************************************** SIDEBAR LINKS, COLORS, FONTS, CALENDAR, ETC. ******************************************/ div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #cfbf9b; } div#sidebar a:hover { color: #b8b7b6; } .defaultuserpic { text-align: center; border-color: 10px solid transparent; } .sbarheader { padding: 0 5px 0 5px; } .sbarbody { padding: 0 3px 0 3px; } .sbarbody2 { padding: 0 6px 0 6px; } table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { padding: 1px; border: 1px solid #b8b7b6; background: transparent; text-align: right; font-family: "Verdana", Helvetica, sans-serif; color: #343434; font-size: 7pt; } .sbarcalendarposts { padding: 1px; border: 1px solid #b8b7b6; background: #e0e0e0; text-align: right; font-family: "Verdana", Helvetica, sans-serif; color: #343434; font-size: 7pt; } ul.sbarlist { margin-left: 0px; list-style: none; padding-left: 0px; } li.sbaritem { margin: 2px 3px 2px 3px; padding: 2px 3px 2px 3px; list-style: none; background-color: transparent; background-image: url(''); background-repeat: repeat; border-bottom: 1px solid #e9e9e9; border-right: 5px solid #e9e9e9; } li.sbaritem:hover { color: #000000; background-image: url(''); background-repeat: repeat; border-bottom: 1px solid #b8b7b6; border-right: 5px solid #b8b7b6; } li.sbartitle { list-style: none; margin-bottom: 2px; margin-top: 10px; text-align: left; font-weight: normal; padding-left: 1px; padding-bottom: 2px; border-bottom: 1px solid #e9e9e9; background: url('') 0px 0px no-repeat; font-size: 8pt; text-transform: lowercase; letter-spacing: -1px; color: #cfbf9b; } ul.ljtaglist li{ padding: 0px; margin: 5px; list-style: decimal-leading-zero; list-style-position: outside; } /*********************************************** TAGS PAGE LAYOUT ******************************************/ .ljtaglist { list-style-type: none; padding: 0px; margin: -1px 2px 0px 2px; margin-left: 70px; width: 50%; text-transform: lowercase; text-align: left; } .ljtaglist li { border-bottom: 1px solid #cccccc; padding: 5px 2px 5px 2px; color: #888888; } H2 { margin: 30px 0px 10px 90px; text-align: left; padding: 2px 2px 2px 10px; font-weight: normal; font-style: italic; font-size: 12px; text-transform: lowercase; font-family: arial; color: #888888; background: url('') 0px 2px no-repeat; } /*********************************************** ENTRY, TAGS LIST, SUB CONTENT, EXTRA ******************************************/ ul.ljtaglist { color: #bbb; font-family: "Tahoma", Helvetica, sans-serif; font-size: 8pt; padding: 8px 8px 8px 0px; text-align: left; margin-right: auto; margin-left: auto; } .subcontent { padding-right: 10px; background-color: #FFFFFF; background-image: url(''); } .entry{ margin: 10px; padding: 5px; color: #343434; font-family: "verdana" Helvetica, sans-serif; font-size: 8pt; text-align: justify; } .entry ul li { list-style: decimal-leading-zero; list-style-position: outside; } .entry ol li { list-style: decimal-leading-zero; list-style-position: outside; } /*********************************************** USERPICS IN THE MAIN ENTRIES AND FRIEND PAGES ******************************************/ .userpic { position: relative; float: left; padding: 0px; margin: 0px 20px 20px 0px; z-index: 15; } .userpicfriends { position: relative; float: left; padding: 0px; margin: 0px 20px 20px 0px; z-index: 15; background-color: #ffffff !important; text-align: center; background-image: url(''); font-family: "Verdana", sans-serif; font-size: 7pt; } .userpicfriends font { color: #333333 !important; text-transform: lowercase; } .userpicfriends br { display: block; } /*********************************************** DATE, SUBJECT, LJ TAGS, COMMENTS ******************************************/ .date{ text-align: right; font-weight: normal; color: #ffffff; font-family: "arial" Helvetica, sans-serif; font-size: 7pt; text-transform: lowercase; background: url('http://i33.tinypic.com/2e65x7p.jpg') 0px -1px no-repeat; } .subject { text-align: right; font-weight: bold; padding-bottom: 5px; padding-right: 12px; color: #ffffff; font-family: "arial" Helvetica, sans-serif; font-size: 8pt; text-transform: lowercase; background-image: url(''); } .subject a, .subject a:link, .subject a:visited { color: #222222; text-transform: lowercase; } .subject a:hover { color: #999; } .datesubject { padding-top: 15px; background-color: #c7c7c7; } .currents, .currentmood, .currentmusic { font-family: arial; font-size: 7pt; } .currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong { color: #333333; padding-left: 13px; font-size: 7pt; text-transform: lowercase; margin-top: 5px; font-family: "arial" Helvetica, sans-serif; background: url('http://i34.tinypic.com/308jhqg.png') 0px 0px no-repeat; } .ljtags { margin-top: 35px; color: #cfbf9b; padding-left: 13px; text-transform: lowercase; font-family: "arial" Helvetica, sans-serif; background: url('http://i35.tinypic.com/119p2cx.png') 0px 3px no-repeat; } .ljtags a, .ljtags a:link, .ljtags a:visited { color: #cfbf9b; text-transform: none; } .currentlocation a, .currentlocation a:link, .currentlocation a:visited { color: #cfbf9b; text-transform: lowercase; } .currentlocation a:hover, .ljtags a:hover { color: #cfbf9b; text-transform: lowercase; text-decoration: none; } .comments { text-align: right; color: #444444; font-family: "arial" Helvetica, sans-serif; font-size: 7pt; text-transform: lowercase; letter-spacing: -1px; padding: 5px; position: relative; background-color:#ededed; } div.comments a, div.comments a:link, div.comments a:visited { color: #cfbf9b; font-size: 10pt; padding: 5px; text-transform: lowercase; } div.comments a:hover { color: #cfbf9b; padding: 5px; font-size: 10pt; text-transform: lowercase; } /*********************************************** ARCHIVE PAGE/CALENDAR ******************************************/ ul.year{ text-align: center; padding: 10px 10px 10px 10px; border: 0px solid #bbb; } ul.year li { color: #888888; display: inline; } table.yeartable { margin-left: auto; margin-right: auto; padding: 03px; border: 0px solid #444; } table.yeartable td.yeardate, table.yeartable td.yearday { color: #888888; border: 0px solid #333333; } table.yeartable td.yearday { background: #cccccc; text-align: center; } td.yearmonth { color: #999999; border-style: none; } /*********************************************** HEADER IMAGE ******************************************/ .headerimage { position: relative; width: 840px; height: 401px; margin-left: 205px; margin-right: ; margin-bottom: 0px; background-image: url('http://i36.tinypic.com/e63hfo.jpg'); background-repeat: no-repeat; background-position: center; } .separator { height: 0px; } /*********************************************** COMMENT PAGES ******************************************/ .clear { display: none; height: 0px; } .skiplinks { text-align: center; padding: 10pt; color: #cfbf9b; background-color: #ffffff; background-image: url(''); } .datesubjectcomment { text-align: left; font-weight: bold; padding: 12px; color: #444444; font-family: "arial" Helvetica, sans-serif; font-size: 10pt; border: 1px solid #c7c7c7; text-transform: lowercase; background-color: #; }a .userpiccomment { position: relative; top: -30px; margin: 10px 10px -20px 10px; z-index: 15; float: left; padding: 17px; background-image: url(''); background-repeat: no-repeat; background-position: top-left; } .box { padding: 10px; clear: left; background-color:#FFFFFF; } input, textarea, select { font-size: 8pt; margin: 3px 3px; padding: 3px; color: #343434; background: #c7c7c7; text-align: justify; font-family:Arial, Helvetica, sans-serif; font-size:10px; border: none; } textarea.textbox{ width: 350px !important; } .reply{ position: relative; margin: 5px; padding: 10px; text-align: left; font-family: "tahoma"; font-size: 10px; line-height: 125%; color: #343434; } .replytosubject { font-weight: bold; } .commentreply { position: relative; font-size: 10px; font-family: "tahoma"; color: #343434; } .commentbox { border: 1px solid #b8b7b6; padding: 10px; margin: 10px; background-color:#FFFFFF; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #d37654; text-transform: lowercase; } .datesubjectcomment a:hover { color: #cfbf9b; } .commentboxpartial { border-color: #1d8737; border-width: 1px; border-style: dotted; padding: 10px; margin: 10px; } .commentinfo { margin-top: 10px; width: 100%; } /******************** TINY USER PICS **********************/ .subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; padding: 12px 13px 0px 0px !important; background: url(http://i33.tinypic.com/10gxwgp.png); } .subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; padding: 12px 13px 0px 0px !important; background: url(http://i33.tinypic.com/10gxwgp.png); } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; /* so that IE users will still see an image */ background-image: url(http://i34.tinypic.com/xpy3pi.png); padding: 14px 14px 0 2px !important; } .ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] { background-color:transparent; background-image: url(http://i34.tinypic.com/xpy3pi.png); padding: 14px 14px 0 2px !important; } .ljuser img[src="http://stat.livejournal.com/img/community.gif"] { background-color:transparent; background-image: url(http://i36.tinypic.com/2cyquyw.png); padding: 14px 14px 0 2px !important; }

Get more of my layouts here!