Fairy boy - Flexible Squares
Layout featuring Link from the Legend of Zelda game series. I made various headers so you can choose your favourite, you can see them behind the cut ^^
Click the thumbnail to preview the layout.
Resolution: 1024x768 or up
Tested on IE8, Firefox and Google Chrome
S2 Flexible Squares Style
Basic, plus and paid accounts
NOTE: looks weird with navstrip! Please disable it
Questions and problems
I always create this section if someone points out a doubt or problem they have. Please read the instructions on this post before asking any questions. Additionally, read this if you think there's a problem with the layout, and let me know if you find a bug or something, thank you!
→ Advertisements on plus accounts pushing down the header
→ LJ navigation strip pushing down the header, please disable it for the layout to work properly.
Headers
→Find .headerimage on the overrides and paste your header url where you see "YOURHEADERURL.PNG".
→Please do NOT hotlink. Upload the headers to your own server (use photobucket, imgur or imageshack?)
Images
This layout has other images that you need to download in case the images get deleted or the links die.
You can do so here.
Tiny icons are by p.yusukekamiyamane.com
IMPORTANT notes
→For PLUS users:Set the ads to VERTICAL or BETWEEN ENTRIES.
TIP: if your ads are showing horizontally on the comments or tags page, change the ads to VERTICAL, save, and then change them back to BETWEEN ENTRIES again. That should solve the problem.
→Blockquote is customized, also comment pages are customized for paid/plus users.
→Includes tiny icons, feel free to delete that section or change them to your own.
→Contextual popup shit thing is disabled. I hate it. D:
------------------
Instructions
Help installing a layout - Screencaps
1)Selecting a style 2)Ad placement and page set up 3)Pasting the overrides, setting up your sidebar and links list
①Go to the customize page and set your style to S2 if you hadn't. Then save changes.
②Type on the SEARCH/TEXT BOX "Flexible Squares" and hit enter. Select the S2 Flexible Squares layout. Scroll down the page and set the SIDEBAR ON RIGHT theme.
③Go to customize your theme. Scroll down the page and click on custom CSS. Set all options to NO.
Now copy and paste the layout overrides into the textbox and save the changes.
Don't forget to put the url of your header!
④This layout has a topbar. The topbar shows your blurb only. Go to sidebar on the customization page and set up your blurb.
DOUBTS/PROBLEMS/QUESTIONS
Overrides
→Paste this on your profile as credit for the layout:
Layout by
If you make any changes to the stylesheet, remember to make a note about it and still credit me.
/* Fairy boy
S2 Flexible Squares
By inconformista.livejournal.com */
body {
background: #FFFFFF;
background-image: url('http://i.imgur.com/s2iEH.png');
background-position: top left;
background-repeat: repeat-x;
padding: 0;
margin: 0;
font: 12px'Lucida Sans Unicode', sans-serif;
color: #979797;
text-align: justify;
line-height: 18px;
}
a, a:link, a:visited {
color: #55A184;
font-family: Georgia;
text-decoration: none;
}
a:hover {
color: #979797;
text-decoration: none;
}
blockquote {
color: #A3BAB0;
padding: 6px;
font: 12px 'Georgia', sans-serif;
border-top: 1px dashed #C8E8DC;
}
p, td, {
font-size: 10px;
}
h1, h2 {
font-family: 'Georgia', sans-serif;
}
#content {
margin: 0;
padding: 0;
width: 800px;
background: transparent;
text-align: justify;
}
#maincontent {
margin: 0 0 0 40px;
padding: 3px;
width: 800px;
background: transparent;
text-align: justify;
}
/* ---------------------------------
HEADER IMAGE: TO CHANGE THE HEADER, REPLACE THE IMAGE URL WITH YOUR OWN.
---REMEMBER TO ALSO CHANGE THE WIDTH AND HEIGHT TO THE ONES OF YOUR HEADER!!---
------------------------------------ */
.headerimage {
position: relative;
width: 800px;
height: 339px;
margin: 0;
margin-top: 0px;
background-image: url('YOURHEADERURL.PNG');
background-position: top left;
background-repeat: no-repeat;
}
.title {
display: none;
}
.subtitle {
display: none;
}
#header {
position: absolute;
width: 620px;
margin: -250px 0 0 255px;
padding: 10px 0;
text-align: left;
background: transparent;
z-index: 15;
}
div#header a, div#header a:link, div#header a:visited {
color: #FFFFFF;
font: 25px 'Georgia', sans-serif;
text-transform: lowercase;
padding: 4px 3px;
margin: 0 0 0 5px;
}
div#header li.view {
color: #FFFFFF;
font: 25px 'Georgia', sans-serif;
text-transform: lowercase;
padding: 4px 3px;
margin: 0 0 0 5px;
}
div#header a:hover {
color: #E0FCF1;
font: 25px 'Georgia', sans-serif;
text-transform: lowercase;
padding: 4px 3px;
margin: 0 0 0 5px;
}
ul.navheader {
padding: 0;
margin: 0 15px;
}
ul.navheader li {
list-style: none;
margin: 0;
display: inline;
}
#footer {
padding: 5px 0 40px;
margin: 0 auto;
text-align: left;
background: transparent;
clear: both;
}
ul.navfooter {
padding: 20px;
margin: 0 auto;
}
ul.navfooter li {
display: inline;
margin: 0 20px;
}
div#footer a:link, div#footer a:active, div#footer a:visited {
color: #55A184;
font: 16px'Georgia', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px;
margin: 0;
}
div#footer a:hover {
color: #979797;
}
.clearfoot {
display: none;
}
#sidebar{
position: absolute;
width: 580px;
margin: -170px 0 0 270px;
text-align: justify;
background: transparent;
}
.sbarbody2 {
padding: 8px;
margin: 0 auto;
color: #FFFFFF;
font: 12px 'Georgia', sans-serif;
text-align: justify;
}
li.sbartitle, .sbarbody#sidebar_tags, #sidebar_calendar, #sidebar_summary, .sbarblank, .defaultuserpic, ul.sbarlist{
display:none;
}
.subcontent {
margin: 40px 0 0 0;
}
.entry {
padding: 10px;
margin: 0 0 0 125px;
}
.entry ul {
padding: 0;
margin: 10px;
list-style: none;
}
.entry ul li {
padding: 5px 10px;
margin: 2px 0;
}
.userpic {
position: relative;
float: left;
background-color: transparent!important;
background-image: url('http://i.imgur.com/mwkR2.png');
background-position: center;
background-repeat: no-repeat;
margin-top: 0px;
padding: 20px;
margin: 0 4px 0 0;
}
.userpicfriends {
position: relative;
float: left;
margin-top: 0px;
color: #55A184;
background-color: transparent!important;
background-image: url('http://i.imgur.com/mwkR2.png');
background-position: center;
background-repeat: no-repeat;
text-align:center;
font-family: "Verdana", sans-serif;
font-size: 8pt;
padding: 20px;
margin: 0 4px 0 0;
}
.userpic img, .userpicfriends img {
margin-left: -4px;
}
.userpicfriends font {
color: #55A184!important;
text-transform: lowercase;
}
.userpicfriends a, .userpicfriends a:hover, .userpicfriends a:visited{
color: #55A184;
font: 11px 'Lucida Sans Unicode', sans-serif;
}
.userpicfriends br {
display: block;
height: 0;
}
.date {
font: 18px 'Georgia', 'Times New Roman', serif;
line-height: 8px;
color: #BFE4D5;
margin: 0 0 0 15px;
}
.subject {
font: 24px 'Georgia', Times New Roman, serif !important;
color: #55A184;
margin: 0 0 0 15px;
}
.subject a, .subject a:hover {
color: #55A184;
}
.datesubject {
padding: 5px;
margin: 0 0 0 15px;
}
.ljtags {
background: url('http://i52.tinypic.com/292v3fq.jpg') 0 2px no-repeat;
padding: 0 0 0 16px;
margin: 20px 0 0 0;
text-transform: lowercase;
}
.currents strong {
display: none;
}
.currents {
text-transform: lowercase;
margin: -25px 0 0 0;
}
.currentmood {
background: url('http://i52.tinypic.com/5lrnmf.jpg') 0 2px no-repeat;
padding: 0 0 0 16px;
}
.currentmusic {
background: url('http://i52.tinypic.com/2yxp07a.jpg') 0 2px no-repeat;
margin-left: -4px;
padding: 0 0 0 16px;
}
.currentlocation {
background: url('http://i52.tinypic.com/2ih9gsn.jpg') 0 2px no-repeat;
padding: 0 0 0 16px;
}
.currentmood img {
display: none;
}
ul.year {
padding: 20px;
margin: 0 auto;
width: 500px;
letter-spacing: 1pt;
background: transparent;
line-height: 18px;
}
ul.year li {
display: inline;
font: 12px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
table.yeartable {
margin: 0 auto;
font: 11px 'Georgia', Arial, sans-serif;
color: #979797;
width: 526px;
background: transparent;
padding: 20px;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
}
table.yeartable td.yearday {
background: #B3E2CF;
color: #FFFFFF;
text-align: center;
}
td.yearmonth {
border: 0;
}
ul.ljtaglist {
background: transparent;
padding: 15px;
}
ul.ljtaglist li {
padding: 0;
margin: 0;
list-style: none;
}
.comments {
text-align: right;
margin-bottom: 20px;
padding: 5px;
color: #FFFFFF;
font: 12px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
position: relative;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #55A184;
padding: 5px;
font: 18px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
div.comments a:hover {
color: #979797;
padding: 5px;
font: 18px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
.datesubjectcomment {
color: #979797;
margin: 0 0 5px 0;
}
.userpiccomment {
display: block;
padding: 3px;
float: left;
}
input, textarea {
background: transparent;
padding: 3px;
border: 1px solid #B3E2CF;
font: 12px 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
color: #676767;
}
textarea.textbox {
width: 90% !important;
}
.box {
padding: 0;
margin: 0 auto;
width: 500px;
line-height: 18px;
}
.commentbox {
background: transparent;
border: 1px solid #B3E2CF;
padding: 5px;
margin: 0 20px 20px 0;
}
#qrform table {
border: none !important;
}
#lj_controlstrip
{
display: none !important;
}
div.ContextualPopup {
display: none;
}
/* Generated by Malionette's Tiny Icon Generator
http://malionette.org/generator/tinylite.php */
img[src*="img/userinfo.gif"] {width: 0 !important; vertical-align: middle !important; margin:
0 auto; height: 0 !important;
background: transparent url(http://i54.tinypic.com/2vcuk1x.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/community.gif"] {width: 0 !important; vertical-align: middle !important; margin:
0 auto; height: 0 !important;
background: transparent url(http://i51.tinypic.com/6h4as8.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; vertical-align: middle !important;
margin: 0 auto; height: 0 !important;
background: transparent url(http://i37.tinypic.com/33eugco.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; vertical-align: middle !important;
margin: 0 auto; height: 0 !important;
background: transparent url(http://i33.tinypic.com/2sblxs8.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; vertical-align: middle !important;
margin: 0 auto; height: 0 !important;
background: transparent url(http://i34.tinypic.com/2h2qxph.jpg) no-repeat; padding: 16px 0 0
16px !important; }
-Comments are really nice.
-You must credit inconformista on your profile if you use this layout.
-Feel free to do changes to the overrides, tweak them or make your own layout (it would be nice if you asked first). But don't use my overrides to create and redistribute any layouts around the internet, they should be for personal use only.
Click the thumbnail to preview the layout.
Resolution: 1024x768 or up
Tested on IE8, Firefox and Google Chrome
S2 Flexible Squares Style
Basic, plus and paid accounts
NOTE: looks weird with navstrip! Please disable it
Questions and problems
I always create this section if someone points out a doubt or problem they have. Please read the instructions on this post before asking any questions. Additionally, read this if you think there's a problem with the layout, and let me know if you find a bug or something, thank you!
→ Advertisements on plus accounts pushing down the header
→ LJ navigation strip pushing down the header, please disable it for the layout to work properly.
Headers
→Find .headerimage on the overrides and paste your header url where you see "YOURHEADERURL.PNG".
→Please do NOT hotlink. Upload the headers to your own server (use photobucket, imgur or imageshack?)
Images
This layout has other images that you need to download in case the images get deleted or the links die.
You can do so here.
Tiny icons are by p.yusukekamiyamane.com
IMPORTANT notes
→For PLUS users:Set the ads to VERTICAL or BETWEEN ENTRIES.
TIP: if your ads are showing horizontally on the comments or tags page, change the ads to VERTICAL, save, and then change them back to BETWEEN ENTRIES again. That should solve the problem.
→Blockquote is customized, also comment pages are customized for paid/plus users.
→Includes tiny icons, feel free to delete that section or change them to your own.
→Contextual popup shit thing is disabled. I hate it. D:
------------------
Instructions
Help installing a layout - Screencaps
1)Selecting a style 2)Ad placement and page set up 3)Pasting the overrides, setting up your sidebar and links list
①Go to the customize page and set your style to S2 if you hadn't. Then save changes.
②Type on the SEARCH/TEXT BOX "Flexible Squares" and hit enter. Select the S2 Flexible Squares layout. Scroll down the page and set the SIDEBAR ON RIGHT theme.
③Go to customize your theme. Scroll down the page and click on custom CSS. Set all options to NO.
Now copy and paste the layout overrides into the textbox and save the changes.
Don't forget to put the url of your header!
④This layout has a topbar. The topbar shows your blurb only. Go to sidebar on the customization page and set up your blurb.
DOUBTS/PROBLEMS/QUESTIONS
Overrides
→Paste this on your profile as credit for the layout:
Layout by
If you make any changes to the stylesheet, remember to make a note about it and still credit me.
/* Fairy boy
S2 Flexible Squares
By inconformista.livejournal.com */
body {
background: #FFFFFF;
background-image: url('http://i.imgur.com/s2iEH.png');
background-position: top left;
background-repeat: repeat-x;
padding: 0;
margin: 0;
font: 12px'Lucida Sans Unicode', sans-serif;
color: #979797;
text-align: justify;
line-height: 18px;
}
a, a:link, a:visited {
color: #55A184;
font-family: Georgia;
text-decoration: none;
}
a:hover {
color: #979797;
text-decoration: none;
}
blockquote {
color: #A3BAB0;
padding: 6px;
font: 12px 'Georgia', sans-serif;
border-top: 1px dashed #C8E8DC;
}
p, td, {
font-size: 10px;
}
h1, h2 {
font-family: 'Georgia', sans-serif;
}
#content {
margin: 0;
padding: 0;
width: 800px;
background: transparent;
text-align: justify;
}
#maincontent {
margin: 0 0 0 40px;
padding: 3px;
width: 800px;
background: transparent;
text-align: justify;
}
/* ---------------------------------
HEADER IMAGE: TO CHANGE THE HEADER, REPLACE THE IMAGE URL WITH YOUR OWN.
---REMEMBER TO ALSO CHANGE THE WIDTH AND HEIGHT TO THE ONES OF YOUR HEADER!!---
------------------------------------ */
.headerimage {
position: relative;
width: 800px;
height: 339px;
margin: 0;
margin-top: 0px;
background-image: url('YOURHEADERURL.PNG');
background-position: top left;
background-repeat: no-repeat;
}
.title {
display: none;
}
.subtitle {
display: none;
}
#header {
position: absolute;
width: 620px;
margin: -250px 0 0 255px;
padding: 10px 0;
text-align: left;
background: transparent;
z-index: 15;
}
div#header a, div#header a:link, div#header a:visited {
color: #FFFFFF;
font: 25px 'Georgia', sans-serif;
text-transform: lowercase;
padding: 4px 3px;
margin: 0 0 0 5px;
}
div#header li.view {
color: #FFFFFF;
font: 25px 'Georgia', sans-serif;
text-transform: lowercase;
padding: 4px 3px;
margin: 0 0 0 5px;
}
div#header a:hover {
color: #E0FCF1;
font: 25px 'Georgia', sans-serif;
text-transform: lowercase;
padding: 4px 3px;
margin: 0 0 0 5px;
}
ul.navheader {
padding: 0;
margin: 0 15px;
}
ul.navheader li {
list-style: none;
margin: 0;
display: inline;
}
#footer {
padding: 5px 0 40px;
margin: 0 auto;
text-align: left;
background: transparent;
clear: both;
}
ul.navfooter {
padding: 20px;
margin: 0 auto;
}
ul.navfooter li {
display: inline;
margin: 0 20px;
}
div#footer a:link, div#footer a:active, div#footer a:visited {
color: #55A184;
font: 16px'Georgia', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px;
margin: 0;
}
div#footer a:hover {
color: #979797;
}
.clearfoot {
display: none;
}
#sidebar{
position: absolute;
width: 580px;
margin: -170px 0 0 270px;
text-align: justify;
background: transparent;
}
.sbarbody2 {
padding: 8px;
margin: 0 auto;
color: #FFFFFF;
font: 12px 'Georgia', sans-serif;
text-align: justify;
}
li.sbartitle, .sbarbody#sidebar_tags, #sidebar_calendar, #sidebar_summary, .sbarblank, .defaultuserpic, ul.sbarlist{
display:none;
}
.subcontent {
margin: 40px 0 0 0;
}
.entry {
padding: 10px;
margin: 0 0 0 125px;
}
.entry ul {
padding: 0;
margin: 10px;
list-style: none;
}
.entry ul li {
padding: 5px 10px;
margin: 2px 0;
}
.userpic {
position: relative;
float: left;
background-color: transparent!important;
background-image: url('http://i.imgur.com/mwkR2.png');
background-position: center;
background-repeat: no-repeat;
margin-top: 0px;
padding: 20px;
margin: 0 4px 0 0;
}
.userpicfriends {
position: relative;
float: left;
margin-top: 0px;
color: #55A184;
background-color: transparent!important;
background-image: url('http://i.imgur.com/mwkR2.png');
background-position: center;
background-repeat: no-repeat;
text-align:center;
font-family: "Verdana", sans-serif;
font-size: 8pt;
padding: 20px;
margin: 0 4px 0 0;
}
.userpic img, .userpicfriends img {
margin-left: -4px;
}
.userpicfriends font {
color: #55A184!important;
text-transform: lowercase;
}
.userpicfriends a, .userpicfriends a:hover, .userpicfriends a:visited{
color: #55A184;
font: 11px 'Lucida Sans Unicode', sans-serif;
}
.userpicfriends br {
display: block;
height: 0;
}
.date {
font: 18px 'Georgia', 'Times New Roman', serif;
line-height: 8px;
color: #BFE4D5;
margin: 0 0 0 15px;
}
.subject {
font: 24px 'Georgia', Times New Roman, serif !important;
color: #55A184;
margin: 0 0 0 15px;
}
.subject a, .subject a:hover {
color: #55A184;
}
.datesubject {
padding: 5px;
margin: 0 0 0 15px;
}
.ljtags {
background: url('http://i52.tinypic.com/292v3fq.jpg') 0 2px no-repeat;
padding: 0 0 0 16px;
margin: 20px 0 0 0;
text-transform: lowercase;
}
.currents strong {
display: none;
}
.currents {
text-transform: lowercase;
margin: -25px 0 0 0;
}
.currentmood {
background: url('http://i52.tinypic.com/5lrnmf.jpg') 0 2px no-repeat;
padding: 0 0 0 16px;
}
.currentmusic {
background: url('http://i52.tinypic.com/2yxp07a.jpg') 0 2px no-repeat;
margin-left: -4px;
padding: 0 0 0 16px;
}
.currentlocation {
background: url('http://i52.tinypic.com/2ih9gsn.jpg') 0 2px no-repeat;
padding: 0 0 0 16px;
}
.currentmood img {
display: none;
}
ul.year {
padding: 20px;
margin: 0 auto;
width: 500px;
letter-spacing: 1pt;
background: transparent;
line-height: 18px;
}
ul.year li {
display: inline;
font: 12px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
table.yeartable {
margin: 0 auto;
font: 11px 'Georgia', Arial, sans-serif;
color: #979797;
width: 526px;
background: transparent;
padding: 20px;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
}
table.yeartable td.yearday {
background: #B3E2CF;
color: #FFFFFF;
text-align: center;
}
td.yearmonth {
border: 0;
}
ul.ljtaglist {
background: transparent;
padding: 15px;
}
ul.ljtaglist li {
padding: 0;
margin: 0;
list-style: none;
}
.comments {
text-align: right;
margin-bottom: 20px;
padding: 5px;
color: #FFFFFF;
font: 12px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
position: relative;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #55A184;
padding: 5px;
font: 18px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
div.comments a:hover {
color: #979797;
padding: 5px;
font: 18px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
.datesubjectcomment {
color: #979797;
margin: 0 0 5px 0;
}
.userpiccomment {
display: block;
padding: 3px;
float: left;
}
input, textarea {
background: transparent;
padding: 3px;
border: 1px solid #B3E2CF;
font: 12px 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
color: #676767;
}
textarea.textbox {
width: 90% !important;
}
.box {
padding: 0;
margin: 0 auto;
width: 500px;
line-height: 18px;
}
.commentbox {
background: transparent;
border: 1px solid #B3E2CF;
padding: 5px;
margin: 0 20px 20px 0;
}
#qrform table {
border: none !important;
}
#lj_controlstrip
{
display: none !important;
}
div.ContextualPopup {
display: none;
}
/* Generated by Malionette's Tiny Icon Generator
http://malionette.org/generator/tinylite.php */
img[src*="img/userinfo.gif"] {width: 0 !important; vertical-align: middle !important; margin:
0 auto; height: 0 !important;
background: transparent url(http://i54.tinypic.com/2vcuk1x.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/community.gif"] {width: 0 !important; vertical-align: middle !important; margin:
0 auto; height: 0 !important;
background: transparent url(http://i51.tinypic.com/6h4as8.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; vertical-align: middle !important;
margin: 0 auto; height: 0 !important;
background: transparent url(http://i37.tinypic.com/33eugco.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; vertical-align: middle !important;
margin: 0 auto; height: 0 !important;
background: transparent url(http://i33.tinypic.com/2sblxs8.jpg) no-repeat; padding: 16px 0 0
16px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; vertical-align: middle !important;
margin: 0 auto; height: 0 !important;
background: transparent url(http://i34.tinypic.com/2h2qxph.jpg) no-repeat; padding: 16px 0 0
16px !important; }
-Comments are really nice.
-You must credit inconformista on your profile if you use this layout.
-Feel free to do changes to the overrides, tweak them or make your own layout (it would be nice if you asked first). But don't use my overrides to create and redistribute any layouts around the internet, they should be for personal use only.