Greening - Flexible Squares
Click the thumbnail to preview the layout.
Resolution: 1024x768 or up (best viewed in 1024x768)
Tested on IE8, Firefox and Google Chrome.
S2 Flexible Squares Style
Basic, plus and paid accounts
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:
------------------
-How to add a header to this layout
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.
④The sidebar is hidden for this layout, but your journal title will show up (right of the navigation). Also for the navigation it's better if you keep it single words (webpage, entries, friends, archive, profile) so the green rectangles stay even in width.
DOUBTS/PROBLEMS/QUESTIONS
Images
Userpic background, quote background and entry divider. The tiny icons are made by p.yusukekamiyamane.com, in case the links die.
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.
/* Greening
S2 Flexible Squares
By inconformista.livejournal.com */
body {
background: #FFFFFF;
padding: 0;
margin: 0;
font: 12px'Lucida Sans Unicode', sans-serif;
color: #919191;
text-align: justify;
line-height: 18px;
}
a, a:link, a:visited {
color: #96BD41;
text-decoration: none;
}
a:hover {
color: #919191;
text-decoration: none;
}
blockquote {
background-image: url('http://i54.tinypic.com/2qwg11y.jpg');
background-position: top center;
background-repeat: no-repeat;
color: #798955;
padding: 12px 26px 0 26px;
font: 14px 'Georgia', sans-serif;
font-style: italic;
}
p, td, {
font-size: 10px;
}
#content {
margin: 0;
padding: 0;
width: 100%;
background: transparent;
text-align: justify;
}
#maincontent {
margin-left: 48px;
padding: 3px;
width: 600px;
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-left: 48px;
margin-top: 0px;
background-image: url('');
background-position: center;
background-repeat: no-repeat;
}
.title {
position: absolute;
padding: 3px;
margin: -80px 0 0 560px;
font: 34px'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
color: #CBE592;
text-align: justify;
}
.subtitle {
display: none;
}
#header {
margin-left: 48px;
padding: 10px 0;
text-align: left;
background: transparent;
z-index: 15;
}
div#header a, div#header a:link, div#header a:visited {
color: #798955;
background: #CBE592;
font: 14px'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 130px 15px 15px 15px;
margin: 0 0 0 5px;
}
div#header li.view {
color: #798955;
background: #CBE592;
font: 14px'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 130px 15px 15px 15px;
margin: 0 0 0 5px;
}
div#header a:hover {
color: #798955;
background: #DDEEB8;
font: 14px'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 130px 15px 15px 15px;
margin: 0 0 0 5px;
}
ul.navheader {
padding: 130px 3px 3px 3px;
margin: -20px 0 0 0;
}
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: #96BD41;
font: 14px'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px;
margin: 0;
}
div#footer a:hover {
color: #919191;
}
.clearfoot {
display: none;
}
#sidebar{
display: none;
}
.subcontent {
margin: 40px 0 0 0;
}
.entry {
padding: 10px;
background-image: url('http://i53.tinypic.com/35na7m1.jpg');
background-position: bottom left;
background-repeat: no-repeat;
}
.entry ul {
padding: 0;
margin: 10px;
list-style: none;
}
.entry ul li {
padding: 5px 10px;
margin: 2px 0;
}
.userpic {
position: relative;
float: right;
margin-right: -135px;
background-color: transparent!important;
margin-top: 0px;
z-index: 15;
}
.userpicfriends {
position: relative;
float: right;
margin-right: -135px;
margin-top: 0px;
color: #FFFFFF;
z-index: 15;
background-color: transparent!important;
text-align:center;
font-family: "Verdana", sans-serif;
font-size: 8pt;
}
.userpic img, .userpicfriends img {
background-image: url('http://i54.tinypic.com/25h0ro5.jpg');
background-repeat: no-repeat;
background-position: center;
padding: 50px;
}
.userpicfriends font {
color: #96BD41!important;
text-transform: lowercase;
}
.userpicfriends a, .userpicfriends a:hover, .userpicfriends a:visited{
color: #96BD41;
font: 11px 'Lucida Sans Unicode', sans-serif;
border-bottom: 0px solid #000000;
}
.userpicfriends br {
display: block;
height: 0;
}
.date {
font: 12px 'Georgia', 'Times New Roman', serif;
color: #A8A8A8;
text-transform: lowercase;
}
.subject {
font: 16px 'Georgia', 'Times New Roman', serif;
font-style: italic;
color: #96BD41;
}
.subject a {
color: #96BD41;
}
.datesubject {
padding: 5px;
}
.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;
border-bottom: 1px solid #DDDDDD;
}
ul.year li {
display: inline;
text-transform: lowercase;
}
table.yeartable {
margin: 0 auto;
color: #BABABA;
width: 500px;
background: transparent;
padding: 20px;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
}
table.yeartable td.yearday {
background: #EFEFEF;
color: #A8A8A8;
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;
margin-right: 40px;
color: #FFFFFF;
font: 13px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
position: relative;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #96BD41;
padding: 5px;
font: 13px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
div.comments a:hover {
color: #919191;
padding: 5px;
font: 13px 'Georgia', Arial, sans-serif;
text-transform: lowercase;
}
.datesubjectcomment {
color: #A8A8A8;
margin: 0 0 5px 0;
}
.userpiccomment {
display: block;
padding: 3px;
float: left;
}
input, textarea {
background: #EFEFEF;
padding: 3px;
border: 1px solid #C1C1C1;
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: #EFEFEF;
padding: 5px;
margin: 0 20px 20px 0;
}
#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.