[LJ Layout] S2 Flexible Squares: You can go your way. (an EXILE layout)
Finally.......it's DONE!! My 1st LJ layout. Hehee.. ^^v
OVERVIEW
Style : S2 Flexible Squares
TESTED ON
Account : Plus
Resolution : 1280x800
Browser : Firefox, Google Chrome, IE
Credit : itisleezone (LEE) and joongie (Masa-san)
Profile Code : just go HERE!
PREVIEW :
Full Image | Live Preview (temporary)
INSTRUCTIONS :
Installation
1.) Go to the Journal Style. If you're using the old style system (S1), change it to S2. Then SAVE CHANGES. (You can find this option at the bottom of Step 2, "Select a New Theme", left sidebar.)
2.) On the Step 2 "Select a New Theme"..in the SEARCH BOX, search "Flexible Squares" and select any layout you prefer with that theme. Then SAVE CHANGES.
3.) While on the Step 3 "Choose a Page Setup"..set "Ad Placement" to "HORIZONTAL" (but just ignore it if you use a paid account). And, APPLY LAYOUT to "2 Column (sidebar on left)". Then SAVE CHANGES.
4.) Now, go to Customize Your Theme..and open Custom CSS option. In that section, select "NO" in each of the DROPDOWN MENUS! (For detail,
- Use layout's stylesheet(s): NO
- Use layout's stylesheet(s) when including custom external stylesheet: NO
- Use external stylesheets: NO)
Then, in the large section at the bottom that says "CUSTOM STYLESHEET", paste in this following code:
CSS Overrides
/*Do not remove this note!!*/ /* ----------------------------------------- S2 FLEXIBLE SQUARES 01 .::You can go your way. -I always here. I always be with you in your chest.-::. LEEhartanto @ ItisLEEZone.LiveJournal.com Inspired by: . EXILE's "Each Other's Way ~Tabii no Tochuu~" . Masa @ Joongie.LiveJournal.com (Oblivious to the facts. -a disposable lover.-) ----------------------------------------- */ /* ----------------------------------------- = G L O B A L S E T T I N G = ----------------------------------------- */ BODY { margin: 0px; background-color: #ba695c; background-image: url('http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/ljexeowtnt1.png'); background-repeat: repeat; background-attachment: fixed; background-position: top-left; font-family: "tahoma", sans-serif; font-size: 11px; color: #555555; text-align: center; } .headerimage { position: relative; width: 1023px; height: 528px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; background-image: url('http://i398.photobucket.com/albums/pp68/leehartanto/It%20is%20LEE%20Zone/Youcangoyourway-2ndedpastelredver.png'); background-repeat: no-repeat; background-position: center; } a, a:link, a:visited { text-decoration: none; color: #363636; } a:hover { color: #bc9795; } p, td { text-align: justify; } blockquote, cite { text-align: justify; background-color: #ffada1; border: dashed 2px #ba695c; padding: 3px; } code, kbd, pre, tt { text-align: justify; font-family: "courier new", monospace; font-size: 12px; } #content { width: 845px; background-color: #f3f1ac; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 15px; } /* ------------------------------- = H E A D E R = ------------------------------- */ #header { height: 35px; border: dashed 2px #ba695c; padding: 5px; color: #9e0b0f; font-size: 30px; text-transform: lowercase; letter-spacing: 2pt; } div#header a, div#header a:link, div#header a:visited { color: #95777D; font-size: 15px; padding: 5px; } div#header a:hover { color: #DDAB97; } ul.navheader { margin: 0px; padding: 0px; } ul.navheader li { display: inline; } .title { display: none; } .subtitle { display: none; } /* ----------------------------------------- = M A I N C O N T E N T = ----------------------------------------- */ #maincontent { margin-top: 15px; margin-left: 160px; padding: 10px; line-height: 15px; text-align: justify; border: solid 1px #ba695c; border-right: solid 2px #ba695c; border-bottom: dashed 1px #ba695c; } .datesubject { background-color: #ba695c; padding: 3px; } .date { line-height: 150%; color: #e1e1e1; text-align:left; text-transform:lowercase; letter-spacing: 2pt; border-top: dashed 1px #f3f1ac; } .subject { font-size: 13px; font-weight: bold; color: #e1e1e1; text-align:left; letter-spacing: 3pt; border-bottom: dashed 1px #f3f1ac; padding-bottom: 5px; } .subject a, .subject a:link, .subject a:visited { color: #e1e1e1; } .subject a:hover { color: #555555; } .entry { margin: 0px 2px 3px 2px; padding: 5px; line-height: 10px; border: dashed 1px #ba695c; border-top: none; } .entry ul li { margin-left: 15px; padding-left: 5px; } .entry ol li { margin-left: 15px; padding-left: 5px; } .userpic { position: relative; float: right; z-index: 15; margin: 10px; padding: 5px; background-color: #f3f1ac; border: dashed 2px #ba695c; } .userpicfriends { position: relative; float: right; z-index: 15; margin: 10px; padding: 5px; background-color: #f3f1ac !important; border: dashed 2px #ba695c; text-align: center; color: #555555; font-weight: bold; } .userpicfriends a font { color: #95777D; } .userpicfriends a:hover font { color: #DDAB97; } .currents b, strong { color: #555555; } .currents, .currentmood, .currentmusic, .currentlocation { color: #ba695c; } div.currentlocation a, div.currentlocation a:link, div.currentlocation a:visited { color: #ba695c; } div.currentlocation a:hover { color: #707070; } .ljtags { color: #555555; font-weight: bold; text-transform: uppercase; margin-top: 50px; } div.ljtags a, div.ljtags a:link, div.ljtags a:visited { color: #ba695c; font-weight: lighter; } div.ljtags a:hover { color: #707070; } .comments { background-color: #e88474; color: #e1e1e1; text-align: right; padding: 10px; position: relative; top: 20px; } div.comments a, div.comments a:link, div.comments a:visited { color: #e1e1e1; } div.comments a:hover { color: #707070; } /* ----------------------------------------- = C O M M E N T P A G E = ----------------------------------------- */ .datesubjectcomment { color: #e88474; text-align: right; padding: 3px; border-bottom: solid 2px #e88474; } .userpiccomment { position: relative; float: left; z-index: 15; margin-top: -5px; margin-left: -5px; margin-right: 5px; margin-bottom: 5px; padding: 5px; background-color: #f3f1ac; border: dashed 2px #e88474; width: 85px; height: 85px; } .box { border-top: solid 2px #ba695c; margin-top: 10px; margin-bottom: 10px; padding: 10px; } .commentbox { border: solid 1px #e88474; margin-top: 10px; padding: 10px; background-color: #ffc7be; } input { background-color: #e88474; color: #e1e1e1; } select { background-color: #e1e1e1; font-family: "courier new", monospace; font-size: 12px; } textarea { background-color: #e1e1e1; font-family: "courier new", monospace; font-size: 12px; } textarea.textbox { width: 90% !important; } /* ------------------------------- = F O O T E R = ------------------------------- */ #footer { height: 15px; z-index: 100; margin: 0px; padding: 0 0 25px 0; color: #9e0b0f; text-transform: lowercase; letter-spacing: 2pt; } div#footer a, div#footer a:link, div#footer a:visited { color: #95777D; padding: 5px; } div#footer a:hover { color: #DDAB97; } ul.navfooter { margin: 0px; padding: 10px; } ul.navfooter li { display: inline; } .clearfoot { clear: both; } /* ------------------------------- = S I D E B A R = ------------------------------- */ #sidebar { width: 165px; float: left; margin-top: 27px; padding-top: 10px; background-color: #ba695c; line-height: 11px; font-size: 10px; color: #e1e1e1; text-align: left; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #e1e1e1; } div#sidebar a:hover { color: #f3f1ac; } .defaultuserpic { text-align: center; z-index: 15; } .defaultuserpic img { padding: 5px; border: dashed 2px #e1e1e1; } .sbarbody { padding: 0 5px 0 5px; } .sbarbody2 { padding: 0 5px 0 5px; text-align: center; font-size: 11px; } table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { border: solid 1px #e88474; text-align: center; } .sbarcalendarposts { background-color: #e88474; text-align: center; } ul.sbarlist { padding-left: 0px; list-style: none; } li.sbartitle { font-size: 13px; letter-spacing: 1pt; text-transform: uppercase; padding-left: 2px; background-color: #e88474; } li.sbaritem { padding: 0 0 1px 1px; border-bottom: dashed 1px #e88474; border-left: solid 5px #e88474; } li.sbaritem:hover { border-left: solid 5px #f3f1ac; } /* ----------------------------------------- = A R C H I V E P A G E = ----------------------------------------- */ ul.year { text-align: center; padding-bottom: 25px; } ul.year li { display: inline; font-weight: bold; font-size: 25px; } table.yeartable { margin-left: auto; margin-right: auto; } td.yearmonth { font-weight: bold; } table.yeartable td.yearday, table.yeartable td.yeardate { border: solid 1px #ba695c; } table.yeartable td.yearday { text-align: center; background-color: #ba695c; color: #e1e1e1; } table.yeartable td.yeardate { text-align: right; background-color: #ffada1; } /* ----------------------------------------- = M I S C E L L A N E O U S = ----------------------------------------- */ .clear { clear: none; } .separator { height: 25px; } .skiplinks { text-align: right; } ::-moz-selection { background: #749CF8; color: #FFFFFF; }
Finally, SAVE CHANGES.
Further
1.) You can customize the sidebar through Sidebar option. (Don't forget to SAVE CHANGES after you do any changes.)
2.) As for the TAGS, change the "Display of tags in the sidebar" dropdown menu to "LIST". (You can also find this option at SETUP menu of Sidebar option.) Then SAVE CHANGES.
3.) Please CREDIT this layout to itisleezone (LEE) and joongie (Masa-san)! (You can put it in the blurb/free text in your sidebar..or anywhere else you desire, such as your profile page.)
EXTRAS :
Just in case you are interested in only the header image..
Simply just CLICK at the image below.
You can go your way.
Pastel Red Ver. (2nd Ed.) | White Grey (1st Ed.)
OR,
For the 2nd ed., download it here or here.
For the 1st ed., download it here or here.
Feel free to customize it on your own, but please keep the credit. :]
You also can find it at mintyapple and freelayouts_s2.
OVERVIEW
Style : S2 Flexible Squares
TESTED ON
Account : Plus
Resolution : 1280x800
Browser : Firefox, Google Chrome, IE
Credit : itisleezone (LEE) and joongie (Masa-san)
Profile Code : just go HERE!
PREVIEW :
Full Image | Live Preview (temporary)
INSTRUCTIONS :
Installation
1.) Go to the Journal Style. If you're using the old style system (S1), change it to S2. Then SAVE CHANGES. (You can find this option at the bottom of Step 2, "Select a New Theme", left sidebar.)
2.) On the Step 2 "Select a New Theme"..in the SEARCH BOX, search "Flexible Squares" and select any layout you prefer with that theme. Then SAVE CHANGES.
3.) While on the Step 3 "Choose a Page Setup"..set "Ad Placement" to "HORIZONTAL" (but just ignore it if you use a paid account). And, APPLY LAYOUT to "2 Column (sidebar on left)". Then SAVE CHANGES.
4.) Now, go to Customize Your Theme..and open Custom CSS option. In that section, select "NO" in each of the DROPDOWN MENUS! (For detail,
- Use layout's stylesheet(s): NO
- Use layout's stylesheet(s) when including custom external stylesheet: NO
- Use external stylesheets: NO)
Then, in the large section at the bottom that says "CUSTOM STYLESHEET", paste in this following code:
CSS Overrides
/*Do not remove this note!!*/ /* ----------------------------------------- S2 FLEXIBLE SQUARES 01 .::You can go your way. -I always here. I always be with you in your chest.-::. LEEhartanto @ ItisLEEZone.LiveJournal.com Inspired by: . EXILE's "Each Other's Way ~Tabii no Tochuu~" . Masa @ Joongie.LiveJournal.com (Oblivious to the facts. -a disposable lover.-) ----------------------------------------- */ /* ----------------------------------------- = G L O B A L S E T T I N G = ----------------------------------------- */ BODY { margin: 0px; background-color: #ba695c; background-image: url('http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/ljexeowtnt1.png'); background-repeat: repeat; background-attachment: fixed; background-position: top-left; font-family: "tahoma", sans-serif; font-size: 11px; color: #555555; text-align: center; } .headerimage { position: relative; width: 1023px; height: 528px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; background-image: url('http://i398.photobucket.com/albums/pp68/leehartanto/It%20is%20LEE%20Zone/Youcangoyourway-2ndedpastelredver.png'); background-repeat: no-repeat; background-position: center; } a, a:link, a:visited { text-decoration: none; color: #363636; } a:hover { color: #bc9795; } p, td { text-align: justify; } blockquote, cite { text-align: justify; background-color: #ffada1; border: dashed 2px #ba695c; padding: 3px; } code, kbd, pre, tt { text-align: justify; font-family: "courier new", monospace; font-size: 12px; } #content { width: 845px; background-color: #f3f1ac; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 15px; } /* ------------------------------- = H E A D E R = ------------------------------- */ #header { height: 35px; border: dashed 2px #ba695c; padding: 5px; color: #9e0b0f; font-size: 30px; text-transform: lowercase; letter-spacing: 2pt; } div#header a, div#header a:link, div#header a:visited { color: #95777D; font-size: 15px; padding: 5px; } div#header a:hover { color: #DDAB97; } ul.navheader { margin: 0px; padding: 0px; } ul.navheader li { display: inline; } .title { display: none; } .subtitle { display: none; } /* ----------------------------------------- = M A I N C O N T E N T = ----------------------------------------- */ #maincontent { margin-top: 15px; margin-left: 160px; padding: 10px; line-height: 15px; text-align: justify; border: solid 1px #ba695c; border-right: solid 2px #ba695c; border-bottom: dashed 1px #ba695c; } .datesubject { background-color: #ba695c; padding: 3px; } .date { line-height: 150%; color: #e1e1e1; text-align:left; text-transform:lowercase; letter-spacing: 2pt; border-top: dashed 1px #f3f1ac; } .subject { font-size: 13px; font-weight: bold; color: #e1e1e1; text-align:left; letter-spacing: 3pt; border-bottom: dashed 1px #f3f1ac; padding-bottom: 5px; } .subject a, .subject a:link, .subject a:visited { color: #e1e1e1; } .subject a:hover { color: #555555; } .entry { margin: 0px 2px 3px 2px; padding: 5px; line-height: 10px; border: dashed 1px #ba695c; border-top: none; } .entry ul li { margin-left: 15px; padding-left: 5px; } .entry ol li { margin-left: 15px; padding-left: 5px; } .userpic { position: relative; float: right; z-index: 15; margin: 10px; padding: 5px; background-color: #f3f1ac; border: dashed 2px #ba695c; } .userpicfriends { position: relative; float: right; z-index: 15; margin: 10px; padding: 5px; background-color: #f3f1ac !important; border: dashed 2px #ba695c; text-align: center; color: #555555; font-weight: bold; } .userpicfriends a font { color: #95777D; } .userpicfriends a:hover font { color: #DDAB97; } .currents b, strong { color: #555555; } .currents, .currentmood, .currentmusic, .currentlocation { color: #ba695c; } div.currentlocation a, div.currentlocation a:link, div.currentlocation a:visited { color: #ba695c; } div.currentlocation a:hover { color: #707070; } .ljtags { color: #555555; font-weight: bold; text-transform: uppercase; margin-top: 50px; } div.ljtags a, div.ljtags a:link, div.ljtags a:visited { color: #ba695c; font-weight: lighter; } div.ljtags a:hover { color: #707070; } .comments { background-color: #e88474; color: #e1e1e1; text-align: right; padding: 10px; position: relative; top: 20px; } div.comments a, div.comments a:link, div.comments a:visited { color: #e1e1e1; } div.comments a:hover { color: #707070; } /* ----------------------------------------- = C O M M E N T P A G E = ----------------------------------------- */ .datesubjectcomment { color: #e88474; text-align: right; padding: 3px; border-bottom: solid 2px #e88474; } .userpiccomment { position: relative; float: left; z-index: 15; margin-top: -5px; margin-left: -5px; margin-right: 5px; margin-bottom: 5px; padding: 5px; background-color: #f3f1ac; border: dashed 2px #e88474; width: 85px; height: 85px; } .box { border-top: solid 2px #ba695c; margin-top: 10px; margin-bottom: 10px; padding: 10px; } .commentbox { border: solid 1px #e88474; margin-top: 10px; padding: 10px; background-color: #ffc7be; } input { background-color: #e88474; color: #e1e1e1; } select { background-color: #e1e1e1; font-family: "courier new", monospace; font-size: 12px; } textarea { background-color: #e1e1e1; font-family: "courier new", monospace; font-size: 12px; } textarea.textbox { width: 90% !important; } /* ------------------------------- = F O O T E R = ------------------------------- */ #footer { height: 15px; z-index: 100; margin: 0px; padding: 0 0 25px 0; color: #9e0b0f; text-transform: lowercase; letter-spacing: 2pt; } div#footer a, div#footer a:link, div#footer a:visited { color: #95777D; padding: 5px; } div#footer a:hover { color: #DDAB97; } ul.navfooter { margin: 0px; padding: 10px; } ul.navfooter li { display: inline; } .clearfoot { clear: both; } /* ------------------------------- = S I D E B A R = ------------------------------- */ #sidebar { width: 165px; float: left; margin-top: 27px; padding-top: 10px; background-color: #ba695c; line-height: 11px; font-size: 10px; color: #e1e1e1; text-align: left; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #e1e1e1; } div#sidebar a:hover { color: #f3f1ac; } .defaultuserpic { text-align: center; z-index: 15; } .defaultuserpic img { padding: 5px; border: dashed 2px #e1e1e1; } .sbarbody { padding: 0 5px 0 5px; } .sbarbody2 { padding: 0 5px 0 5px; text-align: center; font-size: 11px; } table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { border: solid 1px #e88474; text-align: center; } .sbarcalendarposts { background-color: #e88474; text-align: center; } ul.sbarlist { padding-left: 0px; list-style: none; } li.sbartitle { font-size: 13px; letter-spacing: 1pt; text-transform: uppercase; padding-left: 2px; background-color: #e88474; } li.sbaritem { padding: 0 0 1px 1px; border-bottom: dashed 1px #e88474; border-left: solid 5px #e88474; } li.sbaritem:hover { border-left: solid 5px #f3f1ac; } /* ----------------------------------------- = A R C H I V E P A G E = ----------------------------------------- */ ul.year { text-align: center; padding-bottom: 25px; } ul.year li { display: inline; font-weight: bold; font-size: 25px; } table.yeartable { margin-left: auto; margin-right: auto; } td.yearmonth { font-weight: bold; } table.yeartable td.yearday, table.yeartable td.yeardate { border: solid 1px #ba695c; } table.yeartable td.yearday { text-align: center; background-color: #ba695c; color: #e1e1e1; } table.yeartable td.yeardate { text-align: right; background-color: #ffada1; } /* ----------------------------------------- = M I S C E L L A N E O U S = ----------------------------------------- */ .clear { clear: none; } .separator { height: 25px; } .skiplinks { text-align: right; } ::-moz-selection { background: #749CF8; color: #FFFFFF; }
Finally, SAVE CHANGES.
Further
1.) You can customize the sidebar through Sidebar option. (Don't forget to SAVE CHANGES after you do any changes.)
2.) As for the TAGS, change the "Display of tags in the sidebar" dropdown menu to "LIST". (You can also find this option at SETUP menu of Sidebar option.) Then SAVE CHANGES.
3.) Please CREDIT this layout to itisleezone (LEE) and joongie (Masa-san)! (You can put it in the blurb/free text in your sidebar..or anywhere else you desire, such as your profile page.)
EXTRAS :
Just in case you are interested in only the header image..
Simply just CLICK at the image below.
You can go your way.
Pastel Red Ver. (2nd Ed.) | White Grey (1st Ed.)
OR,
For the 2nd ed., download it here or here.
For the 1st ed., download it here or here.
Feel free to customize it on your own, but please keep the credit. :]
You also can find it at mintyapple and freelayouts_s2.