Image |
Live 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 vertical. (This hides the ad)
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-image: url(
http://i40.tinypic.com/fdyntc.png); background-attachment: scroll;
text-align: center;
color: #999;
font-family: arial;
font-size: 11px;
margin: 50px;
line-height: 150%
}
a, a:link, a:visited {
color: #BFBFBF;
text-decoration: none;
}
a:hover {
color: #ccc;
text-decoration: none;
}
b, i, s, u, emphasise, abbr, strong, strike { color: #444;}
blockquote {
font-size: 11px;
color: #444;
border: #1a1a1a solid 1px;
font-family: courier new;
padding: 10px;
background-color: #000;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content
{
margin: auto;
background-image: url(); background-attachment: scroll;
width: 650px;
margin-right: auto:
margin-left: auto;
}
#maincontent {
width: 650px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#sidebar {
display: none;
}
#header {
padding: 10px 0px 0px 0px;
width: 650px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: arial;
font-size: 27px;
text-transform: uppercase;
letter-spacing: -2px;
color: #444;
display: block;
font-weight: bold;
}
div#header li.view { color: #333333; margin-top: 10px; padding: 11px; color: #fff; font-style: italics; }
#footer {
padding: 50px 0;
text-align: center;
font-family: georgia;
font-style: italic;
font-weight: normal;
letter-spacing: 1px;
background-color: #0D0D0D;
color: #333;
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{
color:#CC6666;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #333;
padding: 15px;
text-decoration: none;
}
div#header a:hover{
color:#D27979;
}
div#footer a:hover{
color: #8C8C8C;}
ul.navheader
{
padding: 0px;
display: inline;
margin: 0px;
}
ul.navheader li {
display: inline;
padding-bottom: 0px;
margin: 2px 2px 2px 2px;
}
.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 { display:none;}
}
.sbarheader {
padding: 0 5px 0 5px;
}
.sbarbody {
padding: 0 5px 0 5px;
}
.sbarbody2 {
font-family: georgia;
width: 500px;
letter-spacing: 1px;
font-size: 9px;
margin-left: 100px;
margin-right: auto;
padding:15px 7px 7px 15px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
display: none;
}
.sbarcalendarposts {
padding: 3px;
border: 1px solid #f0f0f0;
background: #f7f7f7;
text-align: center;
}
li.sbaritem
{
border-right: 1px solid #1A1A1A;
padding: 5px;
margin-left: 0px;
list-style: none;
text-align: left;
width: 500px;
margin-left: auto;
margin-right: auto;
text-transform: lowercase;
display: inline;
}
li.sbartitle
{
display: none;
}
#sidebar_linklist
{
font-family: Georgia, Times New Roman, Book Antiqua, serif;
text-align: left;
padding:2px 0px;
background: #1A1A1A;
}
/* maincontent */
.subcontent {
padding: 10px;
margin-top: 8px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: #000;
}
.entry {
margin: 15px 10px 0px 10px;
padding: 5px 15px;
background-color: #000;
color: #999;
font-family: arial;
font-size: 11px;
text-align: left;
}
.entry_text {
padding-right: 0px;
background-color: #000; }
.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: left;
padding: 5px;
color: #fff;
margin-right: 5px;
margin-left: 20px;
text-align: center;
margin-top: 5px;
z-index: 15;
border: 1px solid #1a1a1a;
background: #1a1a1a;
}
.userpic img {
width: 50px;
height: 50px;}
.userpicfriends {
position: relative;
float: left;
color: #fff;
margin-left: 20px;
margin-right: 10px;
text-align: center;
margin-top: 5px;
z-index: 15;
background: #000!important;
}
.userpicfriends font {color: #4D4D4D!important;}
.userpicfriends img {padding: 5px; border: 1px solid #1a1a1a; background: #1a1a1a!important; width: 50px; height: 50px;}
.date {
text-transform: uppercase;
color: #CC6666;
font-size: 6pt;
letter-spacing: 7px;
word-spacing: 8px;}
.subject {
color: #333;
background-color: transparent;
font-size: 18pt;
text-transform: lowercase;
line-height: 100%;
letter-spacing: -2px;
}
.subject a, .subject a:link, .subject a:visited {text-decoration: bold; color: #333;}
.datesubject {
text-align: left;
width: 540px;
margin-left: auto;
margin-right: auto;
background-image: url();
background: #000;
border-bottom: #1a1a1a solid 1px;
padding-top: 5px;
padding-bottom: 5px;
}
.currents div { display: block; }
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #858585;
display:none;
font-weight: lighter;
font-family: arial;
text-transform: lowercase;
margin-right: 5px;
}
.currentmusic {padding: 2px 5px 2px 20px; background: transparent url(
http://i36.tinypic.com/xbb9lv.jpg) no-repeat scroll 0% 50%; }
.currentmood {padding: 2px 5px 2px 20px; background: transparent url(
http://i38.tinypic.com/2cqmlu8.jpg) no-repeat scroll 0% 50%; margin-left: 5px;}
.ljtags {text-align: left; padding: 2px 2px 2px 15px; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 11px; color: #888888; background: transparent url(
http://i38.tinypic.com/2latzc3.jpg) no-repeat scroll 0% 50%; margin-left: 0px;
margin-bottom: -30px;}
.ljtags a, .ljtags a:link, .ljtags a:hover, .ljtags a:visited {
color: #ccc;
text-transform: lowercase;
font-weight: bold; }
.currents, .currentmood, .currentmusic {
font-size: 11px;
margin-left: 0px;
line-spacing: -1px;
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: uppercase;
font-size: 10px;
color: #000;
text-align: right;
padding: 10px 15px 10px 15px;
position: relative;
margin-right: auto;
width: 550px;
background: url('
http://i42.tinypic.com/2hs572o.jpg') no-repeat center right;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-family: arial;
color:#444;
padding: 5px;
font-size: 11px;
}
div.comments a:hover { color:#ccc; }
/* maincontent -- entry, reply pages */
.datesubjectcomment {
background-color: #0D0D0D;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: #0D0D0D;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
background-color: #0D0D0D;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #0D0D0D;
color: #fff;
}
textarea.textbox {
width: 95% !important;
background-color: #0D0D0D;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #0D0D0D;
color: #000;
}
.replytosubject {
font-weight: bold;
background-color: #0D0D0D;
}
.commentreply {
background-color: #0d0d0d;
position: relative;
margin: 10px;
font-size: 11px;
font-family: arial ;
color: #444;
}
.commentbox {
border-color: #0D0D0D;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #0D0D0D;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #444;
}
.datesubjectcomment a:hover {
color: #000000;
}
.commentboxpartial {
border-color: #0D0D0D;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #0D0D0D;
}
.commentinfo {
background-color: #0D0D0D;
margin-top: 10px;
width: 100%;
}
/* maincontent -- year/achive pages */
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #ffffff;
}
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 {
padding: 10px;
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 15px;
}
.skiplinks {
border: 1px solid #000;
background-color: #000;
margin: 30px 0px -15px 0px;
margin-top: 10px;
padding-left: 3px;
text-align: center;
color: #000;
text-transform: lowercase;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 15px;
}
* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}
* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
background-color: #fff;
}
#footer .viewing { display:none; }
/*----------------------------------------------------
Tiny Icons
----------------------------------------------------------------*/
.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://i44.tinypic.com/xmn9e0.png); padding: 13px 13px 0 10px;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(
http://imgboot.com/images/estiloamor/pillicon.png); padding: 16px 17px 2px 2px !important;
}
.ljuser img[src*="
http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(
http://imgboot.com/images/estiloamor/pillicon.png)!important;background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}
.ljuser img[src*="
http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(
http://imgboot.com/images/estiloamor/cakeicon.png)!important;background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}
.ljuser img[src="
http://l-stat.livejournal.com/img/syndicated.gif"] {
background-image: url(
http://i31.tinypic.com/16h3r6u.gif); 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 { font-weight: none; padding: 2px 0 2px 0; color: #ccc ; background:
#transparent; }
span.ljuser a:hover { font-weight: none; padding-top: 2px; padding-bottom: 2px; color:
#f0f0f0;
background: #transparent;}
span.ljuser a b, b a, a b {
padding: 2px;
font-weight: lighter;
}
/* replace default protected entry icon */
.subject img[src="
http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(
http://i35.tinypic.com/neb4gw.png); }
.subject img[src="
http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(
http://i35.tinypic.com/15n4ln5.jpg); }
/*--- MAKING ALL IMAGES SEE-THROUGH ON HOVER ---*/
img:hover {
filter: alpha(opacity=70);
moz-opacity: .70;
opacity: .70;
}
span.ljuser a b { font-weight: lighter; padding: 2px 0 2px 0; color: #ccc ; background:#transparent; }
span.ljuser a:hover { font-weight: lighter; padding-top: 2px; padding-bottom: 2px; color: #f0f0f0; }
I decided to make a really edgy dark layout when I was pissed... ahha enjoy<3 If my instructions were terrible then give me feedback, I hate when others make them confusing to understand. MAKE AD PLACEMENT "VERTICAL" TO HAVE AN AD FREE LAYOUT!