[LJ Layout] S2 Flexible Squares: Flying Cat

May 29, 2012 18:31

Finally! My 2nd LJ layout. :]

Flying Cat was made BY A REQUEST. The background image was by yesrushdt-san at Mi9.com as part of "A Girl's Fairy Tale" wallpapers series. Although the appearance of this layout was inspired by Malionette-san's "Mini Heart" at FruitStyle(LJ) or Malionette.org, the CSS overrides codes was by me (I didn't use Malionette-san's).

OVERVIEW
Style : S2 Flexible Squares
TESTED ON
Account : Plus
Resolution : 1280x800
Browser : Firefox (best), Google Chrome, IE
Credit : itisleezone (LEE)

PREVIEW :


Full Image | Live Preview (temporary)

INSTRUCTIONS :

Installation

1.)  Go to the Journal Style. If you're still 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, type "FLEXIBLE SQUARES" and click the "Search" button..after the result appears, select any layout with that theme you prefer. 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). Then SAVE CHANGES. And, click "APPLY LAYOUT" button to "2 Column (sidebar on RIGHT)". Then SAVE CHANGES.

4.)  Now, go to Customize Your Theme..and open Custom CSS option on the left sidebar. 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 02 .::Flying Cat::. LEEhartanto @ ItisLEEZone.LiveJournal.com Inspired by: . Malionette's "Mini Hearts" @ FruitStyle.LiveJournal.com or @ Malionette.org ----------------------------------------- */ /* ----------------------------------------- = G L O B A L S E T T I N G = ----------------------------------------- */ BODY {margin:0; background:#a1a748; font-family:Tahoma, sans-serif; font-size:11px;} .headerimage {display:none;} #content-outer {background:url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/flying-cat_1088x680_yesrushdt_mi9.jpg) center no-repeat; width:1088px; height:680px; margin:0 auto;} #content {margin:20px 32px; padding:10px;} /* ------------------------------- = H E A D E R = ------------------------------- */ #header {position:absolute; width:250px; margin:27px 0 0 550px; color:#e88474; font-size:20px; font-weight:bold; text-align:right; text-transform:uppercase; letter-spacing:2pt; line-height:13px;} div#header a {color:#95777d; font-size:11px; line-height:10px;} div#header a:hover {color:#ddab97;} ul.navheader {margin:0; padding:0;} ul.navheader li {display:list-item; list-style:none;} .title, .subtitle {display:none;} /* ----------------------------------------- = M A I N C O N T E N T = ----------------------------------------- */ #maincontent {width:510px; height:587px; overflow:auto; margin:27px 10px 10px 7px; padding:5px; border:dotted 5px #c0da55; border-radius:15px;} .subcontent {background:url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/FlyingCat-EntryBgImg.png);} .datesubject {background-color:#5496cd; color:#e1e1e1; text-align:left; padding:3px;} .date {font-size:9px; border-top:dashed 1px #f3f1ac;} .subject {font-size:13px; font-weight:bold; letter-spacing:2pt; border-bottom:dashed 1px #f3f1ac; padding-bottom:5px;} .subject a {color:#e1e1e1;} .subject a:hover {color:#88c1f0;} .entry {color:#636363; margin:0 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;} a {text-decoration:none; color:#c0da55;} a:hover {color:#a67c52;} p, td {text-align:justify;} blockquote, cite {font-size:9px; text-align:justify; border:dotted 1px #5496cd; padding:3px;} code, kbd, pre, tt {font-family:"Courier New", Courier, monospace;} .userpic {position:relative; float:right; z-index:15; margin:10px; padding:3px; background-color:#e1e1e1; border:dashed 1px #ba695c;} .userpic img {width:65px; height:65px;} .userpicfriends {position:relative; float:right; z-index:15; margin:10px; padding:3px; background-color:#e1e1e1 !important; border:dashed 1px #ba695c; text-align:center; color:#555555; font-weight:bold;} .userpicfriends img {width:65px; height:65px;} .userpicfriends font {font-size:9px;} .userpicfriends a font {color:#e88474; font-weight:lighter;} .userpicfriends a:hover font {color:#deaf7b; font-weight:lighter;} .currentmood, .currentmusic, .currentlocation {color:#e88474; font-size:9px; border-top:dashed 1px #ba695c;} .currentmusic {margin-bottom:-17px;} div.currentlocation a {color:#e88474;} div.currentlocation a:hover {color:#deaf7b;} .ljtags {color:#e88474; font-size:9px; font-weight:bold; text-transform:uppercase; margin-top:5px; border-top:dashed 1px #ba695c;} div.ljtags a {color:#e88474; font-weight:lighter;} div.ljtags a:hover {color:#deaf7b;} .comments {color:#5496cd; background-color:#c0da55; text-align:right; padding:7px; position:relative; top:20px;} div.comments a {color:#5496cd;} div.comments a:hover {color:#e1e1e1;} /* ----------------------------------------- = C O M M E N T P A G E = ----------------------------------------- */ .skiplinks {text-align:right; color:#e1e1e1; font-size:9px; font-weight:bold; margin-bottom:5px;} div.skiplinks a {color:#e1e1e1;} div.skiplinks a:hover {color:#a1a1a1;} .box {color:#e1e1e1; font-size:9px; border-top:dashed 1px #e1e1e1; margin:0; padding:7px;} div.box a {color:#e1e1e1;} div.box a:hover {color:#a1a1a1;} .commentbox {background:url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/FlyingCat-EntryBgImg.png); margin-top:10px; font-size:11px; line-height:10px;} .datesubjectcomment {color:#e88474; text-align:right; margin-bottom:5px; padding:3px 5px 5px 0; border-bottom:solid 1px #5496cd;} span.ljuser.with-alias-value.ljuser-name_ a {color:#c0da55 !important;} span.ljuser.with-alias-value.ljuser-name_ a:hover {color:#a67c52 !important;} div.commentreply {color:#636363 !important; padding:0 5px;} .userpiccomment {position:relative; float:left; z-index:15; margin:5px; padding:3px; background-color:#e1e1e1; border:dashed 1px #ba695c; width:65px; height:65px;} div.commentbox.ljcmt_full div {color:#e88474; padding-right:5px;} div.commentbox.ljcmt_full div a {color:#e88474;} div.commentbox.ljcmt_full div a:hover {color:#deaf7b;} form#postform, form#qrform {background:url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/FlyingCat-EntryBgImg.png); margin-top:10px; color:#e88474;} form#postform a, form#qrform a {color:#e88474;} form#postform a:hover, form#qrform a:hover {color:#deaf7b;} form#postform i {font-style:normal;} input {background-color:#a1a1a1; color:#e1e1e1; font-size:11px;} select, textarea {background-color:#e1e1e1; color:#636363; font-size:11px;} textarea.textbox {width:90% !important; font-family:Tahoma, sans-serif;} /* ------------------------------- = F O O T E R = ------------------------------- */ #footer {position:absolute; width:250px; margin:-250px 0 0 550px; color:#e88474; font-weight:bold; text-align:right; text-transform:lowercase; letter-spacing:2pt;} div#footer a {color:#95777d;} div#footer a:hover {color:#ddab97;} ul.navfooter {margin:0; padding:0;} ul.navfooter li {display:list-item; list-style:none;} .clearfoot {display:none;} /* ------------------------------- = S I D E B A R = ------------------------------- */ #sidebar {width:175px; height:430px; float:right; margin:27px 7px 10px 10px; padding:3px; background:url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/FlyingCat-EntryBgImg.png); color:#636363; font-size:9px; text-align: left; border:dotted 5px #c0da55; border-radius:15px;} div#sidebar a {color:#636363;} div#sidebar a:hover {color:#c0da55;} .sbarbody {padding:0 5px;} .defaultuserpic, .sbarbody2 {display:none;} ul.sbarlist {padding:0; list-style:none;} div#sidebar_tags ul.sbarlist.sbarcontent, div#sidebar_linklist ul.sbarlist.sbarcontent {height:39px; overflow:auto;} div#sidebar_summary ul.sbarlist.sbarcontent {height:100px; overflow:auto} li.sbartitle {font-size:13px; letter-spacing:1pt; text-transform:uppercase; background-color:#e88474; padding-left:3px;} li.sbaritem {border-bottom:dashed 1px #e88474;} table.calendar {margin:0 auto; color:#5496cd; font-size:10px;} .sbarcalendar {background-color:#c0da55; text-align:center; padding:2px;} .sbarcalendarposts {background-color:#7aa7cc; text-align:center; vertical-align:middle;} /* ----------------------------------------- = A R C H I V E P A G E = ----------------------------------------- */ ul.year {text-align:center; margin:0 auto;} ul.year li {display:inline; color:#e88474; font-weight:bold; font-size:20px;} table.yeartable {margin:0 auto;} td.yearmonth {color:#636363; font-weight:bold;} td.yearmonth a, td.yearmonth a:hover {float:right;} td.yearday {text-align:center; background-color:#5496cd; color:#e1e1e1;} td.yeardate {text-align:right; background:url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/FlyingCat-EntryBgImg.png); color:#636363; border:solid 1px #636363;} td.yeardate a, td.yeardate a:hover {font-weight:bold;} /* ----------------------------------------- = M O N T H L Y P A G E = ----------------------------------------- */ .lj-view-month center {background-color:#5496cd; padding:7px; color:#e1e1e1; margin-top:13px; margin-bottom:-17px;} .lj-view-month center br {display:none;} .lj-view-month center a {color:#e1e1e1;} .lj-view-month center a:hover {color:#a1a1a1;} .lj-view-month div.entry {border-top:dashed 1px #ba695c;} dt a {color:#e88474;} dt a:hover {color:#deaf7b;} /* ----------------------------------------- = T A G L I S T P A G E = ----------------------------------------- */ h2 {background-color:#5496cd; color:#e1e1e1; font-weight:lighter; letter-spacing:2pt; padding:5px;} ul.ljtaglist {background:url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/FlyingCat-EntryBgImg.png); color:#636363; border:dashed 1px #ba695c; padding:5px; list-style:inside url(http://i398.photobucket.com/albums/pp68/leehartanto/Private%20Section/FC-taglistmarker-10x10.png);} /* ----------------------------------------- = M I S C E L L A N E O U S = ----------------------------------------- */ .clear {display:none;} .separator {height:20px;} ::-moz-selection {background:#fff799; color:#b7b7b7;}

Finally, SAVE CHANGES.

Recommended
(So that the installed layout doesn't go weird!)

1.)  Go to Customize Your Theme..and open Sidebar option on the left sidebar.

On the "SETUP" section, select
- Show the default user picture on the sidebar? : NO
- Show the blurb/free text in the sidebar? : NO
- Title of the blurb sidebar box : (leave it empty!)
- Text to be added to the sidebar : (leave it empty!)
- Show the link list in the sidebar? : YES
- Title of the links sidebar box : (leave it be, or..up to you, but it should be just 1 line!)
- Show tags in the sidebar? : YES
- Display of tags in the sidebar : LIST
- Title of the tags sidebar box : (leave it be, or..up to you, but it should be just 1 line!)
- Show the page summary in the sidebar? : YES
- Title of the page summary sidebar box : (leave it be, or..up to you, but it should be just 1 line!)
- Show the calendar in the sidebar? : YES
- Set sidebar width, in pixels : (leave it be! the default is 160)

On the "ORDERING" section, select
- First box in the sidebar : CALENDAR
- Second box in the sidebar : TAGS
- Third box in the sidebar : PAGE SUMMARY
- Fourth box in the sidebar : LINK LIST
As for the rest..is up to you..

Then, SAVE CHANGES.

2.)  You can customize your LINKS list through Links List option, while the TEXT through Text option (but, it should be short!! if you don't want the installed layout goes weird).

3.)  Please CREDIT this layout to itisleezone (LEE) ! (You can put it in your profile page, at the BIO section.)

EXTRAS :

If you want userpic(s) which is still related to the layout, there are icons I made you can take:
"Flying Cat" Series ICONS
Go higher!  |  to the rainbow village  |  Take me higher!

  
  

And, just in case something bad happen to my links, you can download the files then upload it to your own (if that so, don't forget to adjust the CSS Overrides).
DOWNLOAD (180KB)

Feel free to customize it on your own, but please keep the credit. :]
You also can find it at mintyapple and freelayouts_s2.

s2 flexible squares, icon, lj layout

Previous post Next post
Up