A good end (Tiger and Bunny header)
This was requested and I finally finished it. It has a prestablished header, but feel free to change it for your own ♥
Click the thumbnail to preview the layout.
Resolution: 800x600 or up
Tested on IE8, Firefox and Google Chrome
S2 Flexible Squares Style
Basic, plus and paid accounts
Plus accounts: Set ads HORIZONTALLY!
Images
This layout has a header 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 VERTICAL, save, and then change them back to BETWEEN ENTRIES again. That should solve the problem.
→Navstrip is disabled for this layout! As it will shift down the header and I can't fix it any other way.
→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.
------------------
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.
/* A good end
S2 Flexible Squares
By inconformista.livejournal.com */
body {
background-color: #FFFFFF;
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: #32aab6;
text-decoration: none;
}
a:hover {
color: #979797;
text-decoration: none;
}
.ljuser a b {
font-weight: normal;
font-family: Consolas, serif;
color: #32aab6;
font-size: 11px;
text-transform: uppercase;
}
b {
color: #FF1A72;
}
blockquote {
color: #666666;
padding: 3px;
border-left: 15px solid #d8e97d;
font: 12px 'Consolas', sans-serif;
text-transform: uppercase;
}
p, td, {
font-size: 10px;
}
h1, h2 {
font-family: 'Lucida Sans Unicode', sans-serif;
}
/* Removes LJ NavStrip from pages. */
html body
{
padding-top: 0 !important;
}
#lj_controlstrip_new
{
display: none !important;
}
#content {
margin: 0 auto;
padding: 0;
width: 100%;
background: transparent;
text-align: justify;
}
#maincontent {
margin: 0 auto;
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: 640px;
height: 425px;
margin: 0 auto;
margin-top: 0px;
background-image: url('http://i.imgur.com/rEGG0.png');
background-position: center;
background-repeat: no-repeat;
padding: 5px;
}
.title {
display: none;
}
.subtitle {
display: none;
}
#header {
width: 640px;
padding: 10px 0;
text-align: center;
background: transparent;
margin: 0 auto;
z-index: 15;
}
div#header a, div#header a:link, div#header a:visited {
color: #bcd341;
background-color: #f2f2f2;
font: 16px 'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 20px 15px 20px 15px;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
}
div#header li.view {
color: #bcd341;
background-color: #f2f2f2;
font: 16px 'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 20px 15px 20px 15px;
}
div#header a:hover {
color: #FFFFFF;
background-color: #cbe734;
font: 16px 'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 20px 15px 20px 15px;
-webkit-transition: background 2s ease;
-moz-transition: background 2s ease;
-ms-transition: background 2s ease;
-o-transition: background 2s ease;
transition: background 2s ease;
}
ul.navheader {
padding: 0;
}
ul.navheader li {
list-style: none;
margin: 0 5px 0 5px;
display: inline;
}
#footer {
width: 640px;
padding: 5px 0 40px;
margin: 0 auto;
text-align: center;
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: #cbe734;
font: 14px'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
padding: 4px;
margin: 0;
}
div#footer a:hover {
color: #666666;
}
.clearfoot {
display: none;
}
#sidebar{
display: none;
width: 100%;
margin: 0 auto;
text-align: justify;
background: #dedddd;
}
.sbarbody2 {
width: 600px;
padding: 8px;
margin: 0 auto;
color: #666666;
font: 11px 'Courier New', sans-serif;
text-align: justify;
}
li.sbartitle, .sbarbody#sidebar_tags, #sidebar_calendar, #sidebar_summary,
.sbarblank, .defaultuserpic, ul.sbarlist{
display:none;
}
.subcontent {
margin: 10px 0 0 0;
}
.entry {
padding: 5px;
margin: 0 0 0 110px;
}
.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;
margin-top: 0px;
padding: 3px;
margin: 0 4px 0 0;
}
.userpicfriends {
position: relative;
float: left;
margin-top: 0px;
color: #FFFFFF;
background-color: transparent!important;
text-align:center;
font-family: "Verdana", sans-serif;
font-size: 8pt;
padding: 3px;
margin: 0 4px 0 0;
}
.userpic img, .userpicfriends img {
margin-left: -14px;
padding: 10px;
background-color: #d8e97d;
}
.userpicfriends font {
color: #32aab6!important;
text-transform: lowercase;
}
.userpicfriends a, .userpicfriends a:hover, .userpicfriends a:visited{
color: #32aab6;
font: 11px 'Consolas', sans-serif;
}
.userpicfriends br {
display: block;
height: 0;
}
.date {
font: 12px 'Consolas', 'Times New Roman', serif;
color: #979797;
text-transform: lowercase;
margin: 0 0 0 15px;
}
.subject {
font: 18px 'Lucida Sans Unicode', serif !important;
text-transform: uppercase;
color: #bbd434;
margin: 0 0 0 15px;
}
.subject a, .subject a:hover {
color: #bbd434;
}
.datesubject {
padding: 5px;
margin: 0 0 0 15px;
}
.ljtags {
background: url('http://i51.tinypic.com/2u436vd.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: 11px '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: #cbe734;
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;
font-weight: normal;
font-family: Consolas, serif;
color: #FFFFFF;
text-transform: uppercase;
position: relative;
border-bottom: 1px dashed #e3e2e2;
}
div.comments a, div.comments a:link, div.comments a:visited {
padding: 5px;
font-weight: normal;
font-family: Consolas, serif;
color: #32aab6;
text-transform: uppercase;
}
div.comments a:hover {
padding: 5px;
font-weight: normal;
font-family: Consolas, serif;
color: #32aab6;
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 #cbe734;
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 {
width: 100%;
background: #f2efef;
border-left: 10px solid #cbe734;
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
tiny icons by p.yusukekamiyamane.com */
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/8bqQO.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/bzzHa.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, they should be for personal use only.
Click the thumbnail to preview the layout.
Resolution: 800x600 or up
Tested on IE8, Firefox and Google Chrome
S2 Flexible Squares Style
Basic, plus and paid accounts
Plus accounts: Set ads HORIZONTALLY!
Images
This layout has a header 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 VERTICAL, save, and then change them back to BETWEEN ENTRIES again. That should solve the problem.
→Navstrip is disabled for this layout! As it will shift down the header and I can't fix it any other way.
→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.
------------------
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.
/* A good end
S2 Flexible Squares
By inconformista.livejournal.com */
body {
background-color: #FFFFFF;
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: #32aab6;
text-decoration: none;
}
a:hover {
color: #979797;
text-decoration: none;
}
.ljuser a b {
font-weight: normal;
font-family: Consolas, serif;
color: #32aab6;
font-size: 11px;
text-transform: uppercase;
}
b {
color: #FF1A72;
}
blockquote {
color: #666666;
padding: 3px;
border-left: 15px solid #d8e97d;
font: 12px 'Consolas', sans-serif;
text-transform: uppercase;
}
p, td, {
font-size: 10px;
}
h1, h2 {
font-family: 'Lucida Sans Unicode', sans-serif;
}
/* Removes LJ NavStrip from pages. */
html body
{
padding-top: 0 !important;
}
#lj_controlstrip_new
{
display: none !important;
}
#content {
margin: 0 auto;
padding: 0;
width: 100%;
background: transparent;
text-align: justify;
}
#maincontent {
margin: 0 auto;
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: 640px;
height: 425px;
margin: 0 auto;
margin-top: 0px;
background-image: url('http://i.imgur.com/rEGG0.png');
background-position: center;
background-repeat: no-repeat;
padding: 5px;
}
.title {
display: none;
}
.subtitle {
display: none;
}
#header {
width: 640px;
padding: 10px 0;
text-align: center;
background: transparent;
margin: 0 auto;
z-index: 15;
}
div#header a, div#header a:link, div#header a:visited {
color: #bcd341;
background-color: #f2f2f2;
font: 16px 'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 20px 15px 20px 15px;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
}
div#header li.view {
color: #bcd341;
background-color: #f2f2f2;
font: 16px 'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 20px 15px 20px 15px;
}
div#header a:hover {
color: #FFFFFF;
background-color: #cbe734;
font: 16px 'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
padding: 20px 15px 20px 15px;
-webkit-transition: background 2s ease;
-moz-transition: background 2s ease;
-ms-transition: background 2s ease;
-o-transition: background 2s ease;
transition: background 2s ease;
}
ul.navheader {
padding: 0;
}
ul.navheader li {
list-style: none;
margin: 0 5px 0 5px;
display: inline;
}
#footer {
width: 640px;
padding: 5px 0 40px;
margin: 0 auto;
text-align: center;
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: #cbe734;
font: 14px'Lucida Sans Unicode', sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
padding: 4px;
margin: 0;
}
div#footer a:hover {
color: #666666;
}
.clearfoot {
display: none;
}
#sidebar{
display: none;
width: 100%;
margin: 0 auto;
text-align: justify;
background: #dedddd;
}
.sbarbody2 {
width: 600px;
padding: 8px;
margin: 0 auto;
color: #666666;
font: 11px 'Courier New', sans-serif;
text-align: justify;
}
li.sbartitle, .sbarbody#sidebar_tags, #sidebar_calendar, #sidebar_summary,
.sbarblank, .defaultuserpic, ul.sbarlist{
display:none;
}
.subcontent {
margin: 10px 0 0 0;
}
.entry {
padding: 5px;
margin: 0 0 0 110px;
}
.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;
margin-top: 0px;
padding: 3px;
margin: 0 4px 0 0;
}
.userpicfriends {
position: relative;
float: left;
margin-top: 0px;
color: #FFFFFF;
background-color: transparent!important;
text-align:center;
font-family: "Verdana", sans-serif;
font-size: 8pt;
padding: 3px;
margin: 0 4px 0 0;
}
.userpic img, .userpicfriends img {
margin-left: -14px;
padding: 10px;
background-color: #d8e97d;
}
.userpicfriends font {
color: #32aab6!important;
text-transform: lowercase;
}
.userpicfriends a, .userpicfriends a:hover, .userpicfriends a:visited{
color: #32aab6;
font: 11px 'Consolas', sans-serif;
}
.userpicfriends br {
display: block;
height: 0;
}
.date {
font: 12px 'Consolas', 'Times New Roman', serif;
color: #979797;
text-transform: lowercase;
margin: 0 0 0 15px;
}
.subject {
font: 18px 'Lucida Sans Unicode', serif !important;
text-transform: uppercase;
color: #bbd434;
margin: 0 0 0 15px;
}
.subject a, .subject a:hover {
color: #bbd434;
}
.datesubject {
padding: 5px;
margin: 0 0 0 15px;
}
.ljtags {
background: url('http://i51.tinypic.com/2u436vd.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: 11px '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: #cbe734;
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;
font-weight: normal;
font-family: Consolas, serif;
color: #FFFFFF;
text-transform: uppercase;
position: relative;
border-bottom: 1px dashed #e3e2e2;
}
div.comments a, div.comments a:link, div.comments a:visited {
padding: 5px;
font-weight: normal;
font-family: Consolas, serif;
color: #32aab6;
text-transform: uppercase;
}
div.comments a:hover {
padding: 5px;
font-weight: normal;
font-family: Consolas, serif;
color: #32aab6;
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 #cbe734;
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 {
width: 100%;
background: #f2efef;
border-left: 10px solid #cbe734;
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
tiny icons by p.yusukekamiyamane.com */
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/8bqQO.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/bzzHa.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, they should be for personal use only.