Cleo - Flexible Squares
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
Images
This layout has a background image that you need to download in case it gets deleted or the link dies.
You can do so here.
Tiny icons are by p.yusukekamiyamane.com
IMPORTANT notes
→For PLUS users:Set the ads to HORIZONTAL or BETWEEN ENTRIES.
TIP: if your ads are showing vertically on the comments or tags page, change the ads to HORIZONTAL, 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.
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.
/* CLEO
S2 Flexible Squares
By inconformista.livejournal.com */
body {
background: #FFFFFF;
background-image: url('http://i.imgur.com/HA6XS.png');
background-position: top left;
background-repeat: repeat;
padding: 0;
margin: 10px 0 0 0;
font: 12px'Lucida Sans Unicode', sans-serif;
color: #979797;
text-align: justify;
line-height: 18px;
}
a, a:link, a:visited {
color: #16C1EB;
text-decoration: none;
}
a:hover {
color: #B6B6B6;
text-decoration: none;
}
blockquote {
color: #B6B6B6;
padding: 6px;
font: 12px 'Courier New', sans-serif;
border-top: 1px dotted #16C1EB;
}
p, td, {
font-size: 10px;
}
h1, h2 {
font-family: 'Courier New', sans-serif;
}
#content {
margin: 0 auto;
padding: 0;
width: 600px;
background: transparent;
text-align: justify;
}
#maincontent {
margin: 15px 0 0 0;
padding: 3px;
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: 0px;
height: 0px;
margin: 0 auto;
margin-top: 0px;
background-image: url('');
background-position: center;
background-repeat: no-repeat;
}
.title {
display: none;
}
.subtitle {
display: none;
}
#header {
position: absolute;
width: 180px;
margin: 0 0 0 -200px;
padding: 10px 0;
text-align: left;
background: transparent;
}
div#header a, div#header a:link, div#header a:visited {
display: block;
color: #16C1EB;
font: 12px 'Courier New', sans-serif;
text-transform: uppercase;
padding: 4px;
margin: 0 0 0 5px;
}
div#header li.view {
color: #16C1EB;
font: 12px 'Courier New', sans-serif;
text-transform: uppercase;
padding: 4px;
margin: 0 0 0 5px;
}
div#header a:hover {
color: #1CABCF;
font: 12px 'Courier New', sans-serif;
background: #D9EAEF;
filter:alpha(opacity=50);
opacity: 0.50;
text-transform: uppercase;
padding: 4px;
margin: 0 0 0 5px;
}
ul.navheader {
padding: 0;
margin: 0 15px;
}
ul.navheader li {
list-style: none;
margin: 0;
}
#footer {
padding: 5px 0 15px;
margin: 0 auto;
text-align: right;
background: transparent;
clear: both;
}
ul.navfooter {
padding: 10px;
margin: 0 auto;
}
ul.navfooter li {
display: inline;
margin: 0;
}
div#footer a:link, div#footer a:active, div#footer a:visited {
color: #16C1EB;
font: 16px'Courier New', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px;
margin: 0;
}
div#footer a:hover {
color: #979797;
}
.clearfoot {
display: none;
}
#sidebar{
display: none;
}
.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: 5px 0 0 150px;
background: #FFFFFF;
-moz-box-shadow: 0 0 11px #DFDEDE;
}
.entry {
padding: 10px;
background: transparent;
margin: 0;
}
.entry ul {
padding: 0;
margin: 10px;
list-style: none;
}
.entry ul li {
padding: 5px 10px;
margin: 2px 0;
}
.userpic {
position: relative;
background-color: transparent!important;
float: left;
margin-left: -149px;
margin-top: -3px;
padding: 3px;
}
.userpicfriends {
position: relative;
float: left;
color: #FFFFFF;
background-color: transparent!important;
text-align:center;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 8pt;
padding: 3px;
margin-left: -149px;
margin-top: -3px;
}
.userpic img, .userpicfriends img {
border: 15px solid #FFFFFF;
-moz-box-shadow: 0 0 11px #DFDEDE;
}
.userpicfriends font {
color: #16C1EB!important;
text-transform: lowercase;
}
.userpicfriends a, .userpicfriends a:hover, .userpicfriends a:visited{
color: #16C1EB;
font: 11px 'Lucida Sans Unicode', sans-serif;
}
.userpicfriends br {
display: block;
height: 0;
}
.date {
font: 11px 'Lucida Sans Unicode', Arial, serif;
color: #16C1EB;
margin: 0 0 0 15px;
}
.subject {
font: 18px 'Lucida Sans Unicode', Times New Roman, serif !important;
color: #ABABAB;
margin: 0 0 0 15px;
}
.subject a, .subject a:hover {
color: #ABABAB;
}
.datesubject {
padding: 5px;
background: #FFFFFF;
margin: 0;
}
.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 'Courier New', Arial, sans-serif;
text-transform: lowercase;
}
table.yeartable {
margin: 0 auto;
font: 11px 'Courier New', Arial, sans-serif;
color: #979797;
width: 526px;
background: transparent;
padding: 20px;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
}
table.yeartable td.yearday {
background: #FFFFFF;
color: #16C1EB;
text-align: center;
}
td.yearmonth {
border: 0;
}
ul.ljtaglist {
background: #FFFFFF;
-moz-box-shadow: 0 0 11px #DFDEDE;
padding: 15px;
}
ul.ljtaglist li {
padding: 0;
margin: 0;
list-style: none;
}
.comments {
text-align: center;
margin: 55px 0 0 -161px;
padding: 5px;
color: #FFFFFF;
font: 1px 'Courier New', Arial, sans-serif;
text-transform: uppercase;
position: relative;
width: 130px;
}
div.comments a, div.comments a:link, div.comments a:visited {
background: #FFFFFF;
-moz-box-shadow: 0 0 11px #DFDEDE;
display: block;
color: #16C1EB;
padding: 5px;
font: 11px 'Courier New', Arial, sans-serif;
text-transform: uppercase;
}
div.comments a:hover {
color: #979797;
padding: 5px;
font: 11px 'Courier New', Arial, sans-serif;
text-transform: uppercase;
}
.datesubjectcomment {
color: #979797;
margin: 0 0 5px 0;
}
.userpiccomment {
display: block;
padding: 3px;
float: left;
}
input, textarea {
background: #FFFFFF;
padding: 3px;
border: 1px solid #16C1EB;
font: 12px '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: #FFFFFF;
-moz-box-shadow: 0 0 11px #DFDEDE;
border-left: 1px solid #16C1EB;
padding: 5px;
margin: 0 20px 20px 0;
}
#qrform table {
border: none !important;
}
.entry_text img{
max-width: 400px;
height:auto;
}
#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://i.imgur.com/XbgMG.png) 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://i.imgur.com/bab0P.png) 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.