S2 Flexible Squares; Fresh Produce
Image | Live
Also available in:
Instructions:
1) You need to be in S2 to do this, so if you haven't done so, switch from S1 to S2.
2) Go under "Journal" and click "Customize Journal Style"
3) Under your "Current Theme" (Which is located to the right of the page), Click "Select Different Theme"
4) Search "Flexible Squares". Once you've found it, choose it for your theme.
5) Then go back to "Select Different Theme" and scroll down to the bottom where it says "Choose Page Setup"
6) Make your ad-placement Between Entries.
7) Make it "2 Column (sidebar on right)"
8) Scroll back up to "Customize your theme", under "Current theme" on the right side of the page.
9) Click "Customize your theme"
10) Click "Custom CSS"
11) Make all the drop-down menu's say "No" above the CSS box!
12) Then paste this code...
/* stylesheet by morirvivo@estiloamor */
body {
background-color: #f7f7f7;
color: #999;
font-family: arial;
font-size: 11px;
margin: 08px 0 08px 0;
}
a, a:link, a:visited {
color: #99CC66;
text-decoration: none;
}
a:hover {
color: #B3D98C;
text-decoration: none;
}
blockquote {
padding: 10px;
line-height: 15px;
color: #999;
border: 1px dashed #f0f0f0;
background: #fff;
text-align: justify;
}
code, kbd, pre, tt {
font-family: tahoma;
font-size: 9px;
background: #fff;
border: 1px solid #ccc;
}
b, i, s, u, emphasise, abbr, strong, strike { color: #A6D279; }
big { font-family: "tahoma", verdana; font-size: 12pt; letter-spacing: -1px; color: #A6D279;}
small { font-size: 8px; font-weight: bold; text-transform: uppercase; color: #A6D279;}
#content
{ padding: 12px 0px 12px 0px;
width: 700px;
margin-left: auto;
margin-right: auto;
background-color: transparent;
padding: 8px;
margin-bottom: 8px;
}
#maincontent {
margin: 8px 0 0 0;
background-color: transparent;
}
#sidebar { width: auto;
padding: 15px 0 11px 0;
margin: 0px;
text-align: justify;
font-family: tahoma;
font-size: 9px;
text-transform: none;
font-weight: lighter;
letter-spacing: 1px;
background-color: #f0f0f0;
color: #858585;
}
#header {
width: auto;
padding: 17px 0 11px 0;
margin: 0px;
text-align: center;
font-family: Trebuchet MS;
font-size: 9px;
text-transform: lowercase;
font-weight: lighter;
letter-spacing: 3px;
background-color: #99CC66;
color: #fff;
border: 0px;
display: block;
}
div#header li.view { color: #333333; margin-top: 10px; padding: 11px; background-color: #f0f0f0; }
#footer {
width: 100%;
height: 100%;
text-align: center;
font-family: "arial", sans-serif;
font-size: 9px;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent;
color: #444;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
#footer .viewing { display:none; }
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited{
color:#fff;
padding:11px;
}
div#footer a, div#footer a:link, div#footer a:visited{
color:#444;
padding:11px;
}
div#header a:hover, div#footer a:hover {
color:;
background: #f0f0f0;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
.title {
display: none;
}
.subtitle{
display: none;
}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color:;
}
div#sidebar a:hover {
color:;
}
.defaultuserpic { margin: 0; padding:0px; text-align:center;}
.defaultuserpic img {padding: 15px 15px 10px 10px; border: 0px solid #eeeeee; margin: 0px 0 10px 10px; width: 80px; height: 80px; float: left; }
.defaultuserpic{ opacity:.60; -moz-opacity: 0.60; filter: alpha(opacity=60); }
.defaultuserpic:hover{ opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);
}
.sbarheader {
padding: 0 5px 0 5px;
}
.sbarbody {
padding: 0 5px 0 5px;
}
.sbarbody2 {
padding: 0 5px 0 5px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
display: none;
}
.sbarcalendarposts {
padding: 3px;
border: 1px solid #f0f0f0;
background: #f7f7f7;
text-align: center;
}
ul.sbarlist
{
padding-left: 0;
margin-left: 0;
}
li.sbaritem
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
text-align: left;
text-transform: lowercase;
}
li.sbartitle
{
display: none;
padding: 5px 5px 5px 0;
list-style: none;
text-align: left;
color: #DEBB9F;
font-family: tahoma;
font-size: 9px;
font-weight: lighter;
margin: 10px 0 10px 0;
text-transform: lowercase;
}
/* maincontent */
#maincontent h2 {
padding: 35px; font-family: tahoma;
font-size: 12pt; font-weight: normal;
text-transform: lowercase;
background-color: #ffffff; margin-top: -4px; margin-bottom: -5px; }
ul.ljtaglist li {
list-style: none;
list-style-position: inside;
padding-left: 5px;
}
ul.ljtaglist {
text-align: left;
padding: 8px 8px 8px 12px;
margin-right: auto;
margin-left: auto;
background-color: #ffffff;
}
.subcontent {
position: relative;
padding: 8px;
background-color: #ffffff;
}
.entry {
padding: 8px 0 8px 8px;
margin-right: 114px;
line-height: 13px;
text-align: justify;
background-color: #ffffff; }
.entry_text {
padding-right: 8px;
border-right: 1px
dotted #fff;
background-color: #ffffff; }
.entry ul li, ol li, li
{
padding-left: 5px;
margin-left: 0;
list-style: decimal-leading-zero;
list-style-position: inside;
}
hr {
height: 1px;
background-color: #ffffff;
border-bottom: 1px solid #ccc; }
.userpic {
position: relative;
float: right;
padding: 5px;
margin-right: 5px;
margin-top: 5px;
z-index: 15;
border: 1px solid #eee;
background: #FFF;
}
.userpicfriends {
position: relative;
float: right;
padding: 9px;
margin-right: 5px;
margin-top: 5px;
padding: 0;
text-align: center;
color: #FFF;
background: #fff!important; z-index: 15;}
.userpicfriends font {color: #A6D279!important;}
.userpic font {color: #B3D98C!important;}
.date {
line-height: 200%;
top: 5px;
color: #D0CFCF;
font-family: tahoma;
text-transform: lowercase;
}
.subject { margin-top: -4px;
padding-bottom: 1px;
color: #858585;
font-size: 12px;
letter-spacing: 3px;
font-family: arial;
font-weight: lighter;
text-transform: lowercase;
font-weight: lighter;
}
.subject a, .subject a:link, .subject a:visited {
color: #858585;
}
.subject a:hover {
color: #858585;
text-decoration: none;
}
.datesubject {
background-color: #fff;
padding: 5px;
border-bottom: 1px solid #f0f0f0;
}
.currents div { display: block; }
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #858585;
font-weight: bold;
text-transform: lowercase;
}
.ljtags {
font-size: 8px;
margin-top: 20px;
color: #858585;
font-weight: bold;
text-transform: lowercase;
margin-bottom: -5px;}
.ljtags a, .ljtags a:link, .ljtags a:hover, .ljtags a:visited {
color: #ccc;
text-transform: lowercase;
font-weight: bold; }
.currents, .currentmood, .currentmusic {
font-size: 9px;
font-weight: lighter;
color: #ccc;
text-transform: lowercase;
}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #ccc;
font-weight: bold;
text-transform: lowercase;
}
.currentlocation a:hover, .ljtags a:hover {
color: #504F4F;
font-weight: bold;
text-transform: lowercase;
}
.comments {
text-transform: lowercase;
font-size: 10px;
color: #fff;
text-align: right;
background-color: #fff;
padding: 10px 10px 10px 0px;
position: relative;
margin-left: -16px;
width: 690px;
top: 20px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color:#858585;
}
div.comments a:hover { color:; }
/* maincontent -- entry, reply pages */
.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: #fff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #d1d1d1;
border-style: dotted;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #fff;
padding: 10px;
clear: left;
background-color: #ffffff;
}
input, textarea {
color: #ccc;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #F7F7F7;
background: #fafafa;
font-size: 9px;
}
select { font-size: 9px; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #F7F7F7; background: #fafafa; color: #ccc;}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: tahoma;
font-size: 9px;
line-height: 125%;
background-color: #ffffff;
color: #999999;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-family: tahoma;
font-size: 9px;
color: #999;
}
.commentbox {
border-color: #F0EEE8;
border-width: 1px;
border-style: solid;
padding: 8px;
margin: 10px;
background-color: #ffffff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #73382B;
}
.datesubjectcomment a:hover {
color: #DEBB9F;
border-bottom: #F0EEE8 1px dotted;
}
.commentboxpartial {
border-color: #fff;
border-width: 1px;
border-style: dotted;
padding: 10px;
margin: 10px;
background-color: #fff;
}
.commentinfo {
background-color: #fff;
margin-top: 10px;
width: 100%;
}
/* maincontent -- year/achive pages */
ul.year {
text-align: center;
padding: 20px 0 20px 0;
border: 0px solid #ffffff;
background: #FFF;
}
ul.year li {
display: inline;
background: #FFF;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 8px;
border: 0px solid #ffffff;
background: #FFF; }
table.yeartable td.yeardate, table.yeartable td.yearday {
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* footer */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li { list-style: none; list-style: decimal inside; }
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 2px;
}
.skiplinks {
display: block;
text-transform: lowercase;
text-align: right;
padding: 8px; color: #f2f2f2;
background: #FFF; margin-bottom: -2px;}
.headerimage {
}
.separator { background: transparent; height: 29px; }
/* replace default ljuser icon */
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://imgboot.com/images/estiloamor/personuser1.png);
;){kind=link}
padding: 13px 13px 0 10px;
}
.ljuser img[src*="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://imgboot.com/images/estiloamor/personuser1.png);
padding: 13px 13px 0 10px;
}
.ljuser img[src*="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://imgboot.com/images/estiloamor/houseuser1.png);
;){kind=link}
padding: 12px 11px 0 11px;
}
.ljuser img[src="http://l-stat.livejournal.com/img/syndicated.gif"] {
background-image: url(http://i31.tinypic.com/16h3r6u.gif);
;){kind=link}
padding: 12px 11px 0 11px;
}
.ljuser img[src="http://l-stat.livejournal.com/img/newsinfo.gif"] {
background-image: url(http://i31.tinypic.com/16h3r6u.gif);
padding: 12px 11px 0 11px;
}
.ljuser img[src="http://stat.livejournal.com/img/openid-profile.gif"] {
background-image: url(http://i31.tinypic.com/16h3r6u.gif);
padding: 12px 11px 0 11px;
}
span.ljuser a b { padding: 2px 0 2px 0; color: #A6D279; background: #transparent; }
span.ljuser a:hover b { padding-top: 2px; padding-bottom: 2px; color: #B3D98C; background: #transparent;}
/* replace default protected entry icon */
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 0 7px 9px 0;
background: url(http://i23.tinypic.com/5k3e34.gif); }
;){kind=link}
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"] {
width: 0;
height: 0;
padding: 0 15px 14px 0;
background: url(http://i2.tinypic.com/6tfqxxv.gif); }
;){kind=link}
.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"] {
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url(http://i31.tinypic.com/wk388h.png); }
;){kind=link}
Available in two other colors!
Image | Download
Image | Download
Sidebar Properties
Under the Setup area make sure these are set under the drop-downs!
Show default userpic: Yes
Show blurb/free text in the sidebar: Yes
Show the link list in the sidebar: No
Links Visibilty: hide
Under the "Text to be added to the sidebar", make sure you don't forget to fill in random stuff which will appear in the sidebar!
!IMPORTANT! Ordering Properties!
Under the Ordering area which is located under the Sidebar properties, make sure the selected drop-down options are set as shown:
First box in the sidebar: Default Userpic
Second box in the sidebar: Blurb
Third box in the sidebar: Calendar
Fourth box in the sidebar: Tags
Fifth box in the sidebar: Tags
Sixth box in the sidebar: Page Summary
---------------------------------
To have links in the sidebar, (as shown in preview) paste this code into your blurbs box underneath your text.
Navigation Links/Blurb:
link - link - link - link - link
Any questions, malfunctions, or comments? Say it here (: And don't forget to credit estiloamor!