Layout: Organic.
Image | CMNT PG | Temp. Live
LAYOUT: ORGANIC
INFORMATION
Title: Organic.
Style: S2 Flexible Squares
Accounts: Basic & Paid (Plus was not tested)
Browsers: Firefox, Safari (IE was not tested. I know the round edges for comments will not work in IE, but everything else should work.)
CSS
/*
CREDIT: EPHEE @ COMMUNITY.LIVEJOURNAL.COM/EP_IC
TITLE: NEUTRAL
STYLE: S2, FLEXIBLE SQUARES
*/
/* Cleaned CSS: */
body {
background: #eccfac url(http://i44.tinypic.com/21e7zer.png) repeat scroll;
text-align: center;
color: #605549;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #998774;
text-decoration: none;
}
a:hover {
color: #998774;
text-decoration: underline;
}
blockquote {
font-size: 9pt;
padding: 10px;
margin: 15px;
background: #e5dccf;
}
code, kbd, pre, tt {
font-family: monospace;
}
li {
font-size: 9pt;
padding: 0px 5px 0px 5px;
margin: 0px 10px 0px 10px;
}
#content {
width: 950px;
margin-left: auto; margin-right: auto;
background-color: transparent;
border: 0px solid #999999;
padding: 10px;
margin-top: 90px;
}
#maincontent {
padding-top: 0px;
margin-top: 20px;
margin-left: 110px;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
background: transparent;
color: #605549;
border: 0px solid #999999;
text-align: justify;
width: 600px;
}
#sidebar {
position: relative;
margin-top: -80px;
border: 0px;
font-size: 9pt;
font-family: Helvetica, Arial, sans-serif;
color: #605549;
width: 230px;
float: right;
text-align: justify;
}
#header {
width: 100%;
padding: 0px;
margin-top: -75px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 16pt;
font-weight: bold;
letter-spacing: -0.5px;
color: #605549;
text-transform: uppercase;
}
#footer {
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
font-size: 16pt;
font-weight: bold;
color: #605549;
letter-spacing: -0.5px;
border-width: 0px;
z-index: 100;
clear: both;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #605549;
font-weight: bold;
font-size: 16pt;
}
div#header a:hover, div#footer a:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 4px solid #605549;
font-weight: bold;
font-size: 16pt;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
li.view {
color: #ffffff;
font-size: 16pt;
}
.title {
display: none;
font-family: Arial, sans-serif;
font-size: 24pt;
font-weight: bold;
line-height: 200%;
text-align: left;
top: 10px;
margin-top: -20px;
}
.subtitle{
display: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
font-weight: normal;
top: 10px;
}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #998774;
}
div#sidebar a:hover {
color: #998774;
text-decoration: underline;
}
.defaultuserpic {
display: none;
text-align: center;
}
.sbarheader {
display: none;
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
background: #ffffff;
border: 0px solid #ffffff;
padding: 5px;
width: 210px;
margin-left: 5px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
background: #e5dccf;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
padding: 5px;
}
.sbarcalendarposts {
background: #e5dccf;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
padding: 2px;
}
ul.sbarlist {
background: #ffffff;
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding-left: 15px;
list-style: none;
}
li.sbartitle {
text-align: center;
list-style: none;
padding: 5px;
margin-top: 10px;
margin-bottom: -13px;
font-size: 14pt;
color: #605549;
background: transparent!important;
font-family: Helvetica, Arial, sans-serif;
}
/* maincontent */
.subcontent {
}
.entry {
margin: -10px 5px 10px 5px;
padding: 10px;
background: #ffffff;
color: #605549;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
text-align: justify;
}
.entry a, .entry a:link, .entry a:visited {
color: #998774;
text-decoration: none;
}
.entry a:hover {
color: #998774;
text-decoration: underline;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.entry_text {
min-height: 80px;
padding-bottom: 5px;
}
.entry img {
max-width: 500px;
overflow: hidden;
}
.userpic {
position: absolute;
float: left;
margin: 10px 10px 10px -110px;
padding: 5px;
background:transparent!important;
}
.userpicfriends {
position: absolute;
float: left;
margin: 10px 10px 10px -110px;
padding: 5px;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
color: transparent!important;
z-index: 15;
background:transparent!important;
text-transform: uppercase;
font-size: 7pt;
font-weight: bold;
}
.userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited, .userpicfriends a:hover, .userpicfriends a font, .userpicfriends a:link font, .userpicfriends a:visited font, .userpicfriends a:hover font {
font-family: Helvetica, Arial, sans-serif;
font-size: 7pt;
color: #605549;
font-weight: bold;
}
.date {
margin-top: -10px;
padding: 0px 10px 5px 10px;
color: #605549;
font-family: Arial, Verdana, sans-serif;
font-size: 8pt;
background: transparent;
text-transform: uppercase;
text-align: right;
}
.subject {
font-weight: bold;
padding: 10px;
color: #605549;
font-family: Helvetica, Arial, sans-serif;
font-size: 12pt;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
background: #ffffff;
}
.subject a, .subject a:link, .subject a:visited {
color: #605549;
}
.subject a:hover {
color: #605549;
}
.datesubject {
padding: 5px;
}
.currents, .currentmood, .currentmusic {
font-family: Helvetica, Arial, sans-serif;
font-size: 7pt;
}
.comments {
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
font-weight: bold;
font-style: italic;
text-align: right;
padding: 0px 20px 10px 20px;
margin: 0px -10px 0px -10px;
position: relative;
background: #ffffff;
color: #ffffff;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #605549;
}
div.comments a:hover {
color: #605549;
text-decoration: none;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
-moz-border-radius-topleft: 2%;
-moz-border-radius-topright: 2%;
padding: 10px;
margin-top: 10px;
background: #ffffff;
}
.userpiccomment {
position: relative;
float: left;
padding: 5px;
margin: -10px 0px 0px -130px;
z-index: 15;
background:transparent!important;
max-width: 75;
}
.box {
padding: 0px;
clear: left;
color: #605549;
}
input, textarea, select {
font-family: Arial, sans serif;
background-color: #e5dccf;
border: 1px solid #605549;
font-size: 7pt;
color: #605549;
padding: 5px;
margin: 5px;
}
textarea.textbox {
width: 80% !important;
}
form#qrform {
color: #605549 !important;
background: #ffffff !important;
border: 0px;
padding: 5px;
}
form#qrform table {
border: 0 !important;
}
form#qrform tbody a, form#postform tbody a {color: #998774;}
form#qrform tbody a:hover, form#postform tbody a:hover {color: #605549;}
form#postform {
background: #;
margin: 5px 0 10px 0;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
line-height: 125%;
background-color: #ffffff;
color: #605549;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 0px;
padding: 0px 10px 15px 10px;
font-size: 8pt;
font-family: Helvetica, Arial, sans-serif;
color: #605549;
background: #ffffff;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}
.commentbox {
padding: 10px ;
margin: 10px;
background: transparent url(http://i44.tinypic.com/k1v3vp.png) no-repeat 0% 40px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #998774;
}
.datesubjectcomment a:hover {
color: #605549;
}
.commentboxpartial {
color: #605549;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background: #ffffff;
}
.commentinfo {
background-color: #d4dce8;
margin-top: 10px;
width: 100%;
}
/* maincontent -- year/achive pages */
ul.year {
text-align: center;
background: #ffffff;
width: 500px;
padding: 10px 0 10px 0;
margin-left: auto;
margin-right: auto;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
background: #ffffff;
padding: 10px;
width: 500px;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 0px;
background: #e5dccf;
}
table.yeartable td.yearday {
background-color: #ded1bd;
text-align: center;
font-color: #ffffff!important;
}
td.yearmonth {
border-style: none;
}
table.yeartable a, table.yeartable a:link, table.yeartable a:visited {
color: #998774;
}
table.yeartable a:hover {
color: #998774;
}
/* footer */
ul.navfooter{
padding: 0px;
margin: 0px;
color: #605549;
font-size: 16pt;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
color: #605549;
font-size: 16pt;
}
.clearfoot {
clear: both;
}
/* lj tags page*/
h2 {
background: #ffffff;
padding: 10px 0 5px 10px;
width: 500px;
}
.ljtaglist {
width: 500px;
background: #ffffff;
padding: 5px;
margin-top: -20px;
list-style: none;
}
/* misc */
.clear {
height: 0px;
}
.skiplinks {
font-color: #605549!important;
text-align: center;
padding: 5px 0 5px 0;
margin: 0 0 10px 0;
}
.headerimage {
/* for formatting header image */
position: relative;
width: px; /* Width of the banner, in pixels */
height: px; /* Height of the banner, in pixels */
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
background-image: url();
background-repeat: no-repeat;
}
.separator{
/* for formatting separators between entries */
height: 30px;
}
/* icons for ljuser, community, locked, private, rss, .ljcmt, .box, etc. */
/* Icon for users */
img[src*="userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i43.tinypic.com/2rnhmqv.jpg) !important;
padding: 16px 16px 0 0 !important;
}
/* Icon for communities */
img[src*="community.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i42.tinypic.com/vyv051.png) !important;
padding: 16px 16px 0 0 !important;
}
/* Icon for sponsored communities */
img[src*="sponcomm.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i42.tinypic.com/vyv051.png) !important;
padding: 16px 16px 0 0 !important;
}
/* Icon for syndicated feeds */
img[src*="syndicated.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i44.tinypic.com/5lpd6o.png) !important;
padding: 16px 16px 0 0 !important;
}
/* Icon for Open ID users */
img[src*="openid-profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i42.tinypic.com/vyv051.png) !important;
padding: 16px 16px 0 0 !important;
}
/* Icon for the news community */
img[src*="newsinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i42.tinypic.com/vyv051.png) !important;
padding: 16px 16px 0 0 !important;
}
/*Icons for entries that are locked, private, protected, etc.*/
img[src*="icon_protected.gif"] {
width: 0;
height: 0;
padding: 0 19px 16px 0;
background-repeat: no-repeat!important;
background: url(http://i42.tinypic.com/sc4ysl.png);
;){kind=link}
}
img[src*="icon_private.gif"] {
width: 0;
height: 0;
padding: 0 19px 16px 0;
background-repeat: no-repeat!important;
background: url(http://i44.tinypic.com/348rpl0.png);
;){kind=link}
}
img[src*="icon_groups.gif"] {
width: 0;
height: 0;
padding: 0 19px 16px 0;
background-repeat: no-repeat!important;
background: url(http://i42.tinypic.com/sc4ysl.png);
}
/*Icons for misc. comment page*/
img[src*="btn_del.gif"]{
width:0; height:0;
padding: 0 12px 12px 0;
background: url(http://i44.tinypic.com/313nhoy.png);
;){kind=link}
}
img[src*="btn_scr.gif"]{
width:0; height: 0;
padding: 0 12px 12px 0;
background:
url(http://i44.tinypic.com/313nhoy.png);
}
img[src*="btn_freeze.gif"], img[src*="btn_unscr.gif"]{
width: 0; height: 0;
padding: 0 12px 12px 0;
background: url(http://i44.tinypic.com/313nhoy.png);
}
img[src*="btn_edit.gif"]{
width: 0; height: 0;
padding: 0 12px 12px 0;
background: url(http://i44.tinypic.com/313nhoy.png);
}
img[src*="btn_track.gif"]{
width: 0; height: 0;
padding: 0 12px 12px 0;
background: url(http://i44.tinypic.com/313nhoy.png);
}
.box img[src*="anonymous.gif"]{
width: 0; height: 0;
padding: 0 12px 12px 0;
background: url(http://i44.tinypic.com/313nhoy.png);
}
.box img[src*="openid-profile.gif"]{
width: 0; height: 0;
padding: 0 12px 12px 0;
background: url(http://i44.tinypic.com/313nhoy.png);
}
.box img[src*="help.gif"]{
width: 0; height: 0;
padding: 0 12px 12px 0;
background: url(http://i44.tinypic.com/313nhoy.png);
}
INSTALLING
TIP BEFORE YOU START
Always click "Save Changes" after each section
SELECTING THEME
Go to Customize Page
Select a Flexible Squares Theme, doesn't matter which one
CUSTOM CSS
Make sure all drop down menus say "No"
Copy & Paste CSS code located in first section
AFTER INSTALLING
UPLOAD IMAGES
It is not required for you to upload the images located in this style to your own site. However, it is recommended. If a lot of people end up using this, then it will eventually run out of bandwidth and may mess up your layout.
(This site is available for free: http://tinypic.com)
CREDIT
Credit ephee somewhere public, ie. your profile is the best place.
FAQ & ETC.
MY RESOURCES
Icons
Background Images
Flexible Squares CSS Source
ADDING A HEADER
Find .headerimage in the CSS Code & adjust it to your needs.
Here is a tutorial @ s2flexisquares
THANK YOU FOR VIEWING MY LAYOUT
COMMENT
Please comment here if taking, I'd love to see who enjoys this layout.
WATCH
Feel free to WATCH me at my community ep-ic for future updates.
QUESTIONS?
Please post all questions about this layout HERE (at my community ep-ic) so I can respond to them.
HELLO! I hope I'm not posting too many layouts for your liking. (It's really the best I can contribute to this community.) I'm letting you all have an opportunity to inspire me. Post websites with a design you particularly enjoy!