Flexible Squares: Neon Rainbow

Jun 15, 2010 20:14

Title: Neon Rainbow by street_of_mercy
Style: S2 Flexible Squares
Accounts: Basic, Paid, and Sponsored
Features: Custom Comment Pages, Mini Icons and Sidebar
Browser: Firefox & Internet Explorer

Live Preview: HERE with header | HERE without header




how to do & what to do

Stylesheet with header

/*------------------------------------------------

LAYOUT: "Original - Neon Rainbow (with header)"
BY: Mercy @ street_of_mercy
STYLE: S2 Flexible Squares
NOTE: Mini icons by street_of_mercy

------------------------------------------------*/

/* ------ MAIN ------ */

body {
background-image: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_background.png);
background-position: left top;
background-repeat: repeat;
color: #666666;
font-family: "Arial";
font-size: 12px;
margin: 0px;
}

a, a:link, a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #5bb5da;
text-decoration: none;
}

a:hover {
color: #999999;
text-decoration: none;
}

b {
color: #9ada5b;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

i {
color: #e2477a;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

u {
color: #e2b13c;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

s {
color: #bbbbbb;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

blockquote {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #888888;
padding: 10px;
background-color: #eeeeee;
border-left: 6px solid #e2477a;
border-right: 6px solid #9ada5b;
}

blockquote:first-letter {
font-family: "Georgia", sans-serif;
font-size: 14px;
font-style: italic;
color: #5bb5da;
}

::-moz-selection {
color: #222222;
background: #e2b13c;
}

input, textarea {
background-color: #f7f7f7;
color: #666666;
}

h2 {
padding: 10px;
font-family: Palatino Linotype, Palatino, serif;
font-size: 14px;
font-style: italic;
text-transform: uppercase;
color: #e2477a;
}

p, td {
}

code, kbd, pre, tt {
font-family: monospace;
}

/* ------ CONTAINING ELEMENTS ------ */

#content-outer
{
width: 100%;
margin: 0 auto;
padding: 0px;
background-color: #e9e9e9;
background-image: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_background.png);
background-position: left top;
background-repeat: repeat-x;
}

#content {
width: 860px;
background-color: #e9e9e9;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
text-align: justify;
}

#maincontent {
font-family: "Arial";
font-size: 12px;
color: #666666;
text-align: center;
margin-left: 270px;
margin-top: 20px;
}

#sidebar {
padding: 0px 5px 0px 5px;
margin-top: 8px;
font-family: "Arial";
font-size: 12px;
color: #666666;
width: 240px;
float: left;
text-align: left;
}

#header {
width: 100%;
position: relative;
background-image: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_background.png);
background-position: left top;
background-repeat: repeat-x;
border-bottom: 30px solid #e9e9e9;
position: relative;
color: #cccccc;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
padding: 8px 0px 5px 0px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
clear: both;
}

#footer
{
width: 100%;
bottom: 0px;
padding: 5px 0px 5px 0px;
text-align: center;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
color: #5bb5da;
z-index: 100;
}

/* ------ HEADER ------ */

div#header a, div#header a:link, div#header a:visited {
color: #aaaaaa;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover {
color: #222222 !Important;
background-color: #bbbbbb;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

ul.navheader
{
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
}

/* ------ HEADER NAV ------ */

div#header a[href*=".livejournal.com/"] {
color: #aaaaaa;
border-bottom: 4px solid #5bb5da !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*=".livejournal.com/"], body.lj-view-recent div#header li.view {
color: #222222 !Important;
background-color: #5bb5da !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="/calendar"] {
color: #aaaaaa;
border-bottom: 4px solid #9ada5b !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="/calendar"], body.lj-view-archive div#header li.view {
color: #222222 !Important;
background-color: #9ada5b !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="/friends"] {
color: #aaaaaa;
border-bottom: 4px solid #e2477a !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="/friends"], body.lj-view-friends div#header li.view {
color: #222222 !Important;
background-color: #e2477a !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="/profile"] {
color: #aaaaaa;
border-bottom: 4px solid #e2b13c !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="/profile"] {
color: #222222 !Important;
background-color: #e2b13c !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="http://community.livejournal.com/street_of_mercy/"] {
color: #aaaaaa;
border-bottom: 4px solid #bbbbbb !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="http://community.livejournal.com/street_of_mercy/"] {
color: #222222 !Important;
background-color: #bbbbbb !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

/* ------ FOOTER ------ */

div#footer a, div#footer a:link, div#footer a:visited {
color: #e2477a;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#footer a:hover {
color: #9ada5b;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
margin: 0px;
display: inline;
}

.clearfoot {
clear: both;
}

/* ------ TITLE -- SUBTITLE ------ */

.title
{
display: none;
}

.subtitle
{
display: none;
}

/* ------ SIDEBAR MAIN ------ */

.defaultuserpic {
padding: 10px 10px 10px 10px;
text-align: center;
display: none;
}

.defaultuserpic img{
padding: 10px;
background-color: #F8F8F8;
display: none;
}

li.sbartitle, #sidebar_calendar li.sbartitle, #sidebar_linklist li.sbartitle, #sidebar_tags li.sbartitle, #sidebar_summary

li.sbartitle {
background-color: #222222;
font-family: "Georgia", sans-serif;
font-size: 16px;
font-style: italic;
color: #cccccc;
text-align: center;
padding: 10px 0px 10px 5px;
}

.sbartitle:first-letter {
color: #5bb5da;
font-size: 20px;
}

#sidebar_linklist li.sbartitle:first-letter {
color: #e2477a;
font-size: 20px;
}

#sidebar_tags li.sbartitle:first-letter {
color: #9ada5b;
font-size: 20px;
}

#sidebar_summary li.sbartitle:first-letter {
color: #e2b13c;
font-size: 20px;
}

#sidebar_calendar, #sidebar_linklist, #sidebar_tags, #sidebar_summary {
margin: 20px 0px 0px 0px;
}

.sbarheader {
background-color: #222222;
padding: 0px;
}

.sbarbody {
background-color: #f7f7f7;
padding: 0px 0px 5px 0px;
}

.sbarbody2 {
background-color: #f7f7f7;
padding: 0px 5px 5px 12px;
}

li.sbaritem {
font-family: "Tahoma", sans-serif;
font-size: 12px;
border-bottom: 1px solid #dddddd;
text-align: left;
text-transform: lowercase;
list-style: none;
margin: 3px 5px 0px 5px;
padding: 3px 2px 2px 0px;
}

li.sbaritem a
{
list-style: none;
color: #5bb5da;
}

li.sbaritem a:hover
{
list-style: none;
color: #999999;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

/* ------ SIDEBAR CALENDAR ------ */

#sidebar_calendar
{
display: none;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

.sbarcalendar, .sbarcalendarposts {
text-align: center;
border: 1px solid #dddddd;
padding: 2px 2px 2px 10px;
}

#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, #sidebar .sbarcalendarposts a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #aaaaaa;
padding: 0px;
text-align: center;
}

#sidebar .sbarcalendarposts a:hover {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #999999;
padding: 0px;
text-align: center;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

/* ------ SIDEBAR FREE BOX ------ */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #5bb5da;
padding: 3px 5px 2px 3px;
text-decoration: none;
}

div#sidebar a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
}

/* ------ SIDEBAR LINK LIST ------ */

div#sidebar_linklist a, div#sidebar_linklist a:link, div#sidebar_linklist a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
padding: 3px 5px 2px 3px;
color: #e2477a;
}

div#sidebar_linklist a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
}

/* ------ SIDEBAR TAGS ------ */

div#sidebar_tags a, div#sidebar_tags a:link, div#sidebar_tags a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
padding: 3px 5px 2px 3px;
color: #9ada5b;
text-decoration: none;
}

div#sidebar_tags a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
text-decoration: none;
}

#sidebar_tags ul.sbarcontent {
}

/* ------ SIDEBAR SUMMARY ------ */

div#sidebar_summary a, div#sidebar_summary a:link, div#sidebar_summary a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
padding: 3px 5px 2px 3px;
color: #e2b13c;
text-decoration: none;
}

div#sidebar_summary a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
text-decoration: none;
}

/* ------ MAINCONTENT ------ */

ul.ljtaglist li {
list-style: none;
text-align: justify;
margin-bottom: 5px;
margin-left: 10px;
}

ul.ljtaglist {
background-color: #f7f7f7;
border-top: 10px solid #222222;
color: #666666;
font-family: "Arial", sans-serif;
font-size: 12px;
padding: 12px 0px 12px 20px;
}

.subcontent {
background-color: #f7f7f7;
min-height: 120px;
}

.entry {
padding: 15px 15px 0px 15px;
color: #666666;
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: justify;
}

hr {
color: transparent;
height: 1px;
border-style : none;
border-bottom: 2px dotted #CCCCCC;
}

.entry ul li, ol li, li
{
padding-left: 0px;
margin-left: 0px;
}

/* ------ USERPICS ------ */

.userpic
{
position: relative;
float: right;
margin: 0px -130px 10px 10px;
z-index: 15;
border: 10px solid #222222;
background-color: #222222 !important;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: center;
}

.userpic a font, .userpic a:link font, .userpic a:visited font
{
color: #bbbbbb !important;
text-align: center !important;
}

.userpic a:hover font
{
color: #999999 !important;
text-decoration: none;
}

.userpicfriends
{
position: relative;
float: right;
margin: 0px -130px 10px 10px;
border: 10px solid #222222;
background-color: #222222 !important;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
text-align: center;
}

.userpicfriends a font, .userpicfriends a:link font, .userpicfriends a:visited font
{
color: #bbbbbb !important;
text-align: center !important;
}

.userpicfriends a:hover font
{
color: #999999 !important;
text-decoration: none;
}

/* ------ DATE SUBJECT ------ */

.date {
padding: 5px 5px 0px 0px;
text-align: right;
color: #9ada5b;
top: 5px;
font-family: Palatino Linotype, Palatino, serif;
font-size: 12px;
font-style: italic;
text-transform: lowercase;
letter-spacing: 1px;
background-color: #222222;
}

.subject, .subject a, .subject a:link, .subject a:visited, .subject a:hover {
padding: 0px 0px 5px 6px;
color: #e2477a;
font-family: "Georgia", sans-serif;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
background-color: #222222;
}

.datesubject {
background-color: transparent;
padding: 0px;
text-align: left;
}

/* ------ CURRENTS ------ */

.ljtags
{
margin-top: 20px;
color: #888888;
font-weight: lighter;
text-transform: lowercase;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
padding: 5px 0px 5px 0px;
border-top: 1px solid #e2b13c;
border-bottom: 1px solid #e2b13c;
}

.currentlocation
{
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_location.png) no-repeat left

center;
padding: 8px 0px 0px 18px;
}

.currentmood
{
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_mood.png) no-repeat left

center;
padding: 8px 0px 0px 18px;
}

.currentmusic
{
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_music.png) no-repeat left

center;
padding: 8px 0px 0px 18px;
}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong
{
display: none;
color: #777777;
font-weight: lighter;
text-transform: lowercase;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
padding: 4px 0 4px 0;
}

.currents, .currentmood, .currentmusic, .currentlocation {
color: #888888;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #e2b13c;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #9ada5b;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.currentmusic a, .currentmusic a:link, .currentmusic a:visited
{
color: #5bb5da;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.ljtags a:hover, .currentlocation a:hover, .currentmusic a:hover
{
color: #999999;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

/* ------ COMMENTS ------ */

.comments
{
line-height: .2;
font-style: italic;
font-family: "Georgia", sans-serif;
font-size: 14px;
color: #f7f7f7;
text-align: right;
padding: 0px 0px 10px 0px;
position: relative;
margin: 0 -150px 0 0;
text-transform: lowercase;
clear: right;
border: 0px;
}

div.comments a, div.comments a:link, div.comments a:visited
{
line-height: 2;
padding: 1px 10px;
display: block;
color: #5bb5da;
background-color: #222222;
width: 100px;
margin: 0 3px 0 auto;
border-right: 4px solid #9ada5b;
}

div.comments a:hover
{
color: #e2477a;
border-right: 4px solid #e2b13c;
}

/* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */

.datesubjectcomment {
margin-top: 20px;
text-align: left;
padding: 5px;
color: #cccccc;
background-color: #222222;
}

.userpiccomment {
border: 5px #222222 solid;
background-color: #222222 !important;
position: relative;
top: -30px;
left: 0px;
padding: 5px;
margin: 25px 10px -20px 10px;
z-index: 15;
float: right;
}

.box {
width: 650px;
margin-left: auto;
margin-right: auto;
padding: 10px;
margin-top: 0px;
text-align: left;
clear: right;
}

form div.box {
text-align:center;
}

div#content input, div#content textarea, div#content select {
color: #666666;
}

.reply {
background-color: #f7f7f7;
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 12px;
line-height: 125%;
color: #666666;
border: 0px;
}

.replytosubject {
padding: 10px 0px 3px 6px;
color: #e2477a;
font-family: "Georgia", sans-serif;
font-size: 12px;
letter-spacing: 1px;
background-color: #222222;
}

.replytoposter {
color: #666666;
background-color: #222222;
text-transform: lowercase;
padding: 5px;
}

/* ------MAINCONTENT -- COMMENTS ------ */

.commentreply {
text-align: justify;
position: relative;
margin: 10px;
font-family: "Arial", sans-serif;
font-size: 12px;
color: #666666;
}

.commentbox {
padding: 0px;
margin: 0px;
text-align: left;
background-color: #f7f7f7;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #5bb5da;
}

.datesubjectcomment a:hover {
color: #999999;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f7f7f7;
}

.commentinfo {
margin-top: 10px;
width: 100%;
}

/* ------ MAINCONTENT -- YEAR/ACHIVE PAGES ------ */

ul.year {
text-align: center;
padding: 20px 0 20px 0;
}

ul.year li {
display: inline;
}

table.yeartable {

background-color: #f7f7f7;
padding: 20px;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px #999999 solid;
color: #666666;
}

table.yeartable td.yearday {
text-align: center;
color: #e2477a;
}

td.yearmonth {
color: #9ada5b;
border-style: none;
}

/* ------ MISC ------ */

.clear {
height: 10px;
font-size: 0.01px;
}

.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 10px 0 10px 0;
}

.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
/*so that IE users will still see an image*/
background: transparent url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_user.png)

no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_user.png)

no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

.ljuser img[src*="community.gif"] {
background: transparent url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_community.png)

no-repeat scroll 0 0 !important;
padding: 16px 0px 0px 17px !important;
}

span.ljuser a b {
padding: 2px 0 2px 0;
color: #5bb5da;
font-weight: lighter;
}

span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #999999;
font-weight: lighter;
}

img[src*="icon_protected.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_lock.png);
}

table#lj_controlstrip td
{
border: 1px solid #777777;
background-color: #222222;
color: #9ada5b;
border-left: none;
}

#lj_controlstrip input
{
background-color: #282828;
color: #999999;
}

#lj_controlstrip a
{
color: #e2477a;
}

#lj_controlstrip_statustext
{
color: #777777;
}

#lj_controlstrip.ljuser a b
{
color: #5bb5da;
}

#lj_controlstrip_userpic
{
display:none;
}

.headerimage {
position: relative;
width: 100%;
height: 207px; /* the height of your header */
margin-left: auto;
margin-right: auto;
margin-top: 0px;
background-image: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_header.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.separator {
margin: 10px 0px 10px 0px;
}

Stylesheet without header

/*------------------------------------------------

LAYOUT: "Original - Neon Rainbow (with header)"
BY: Mercy @ street_of_mercy
STYLE: S2 Flexible Squares
NOTE: Mini icons by street_of_mercy"

------------------------------------------------*/

/* ------ MAIN ------ */

body {
background-image: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_background.png);
background-position: left top;
background-repeat: repeat;
color: #666666;
font-family: "Arial";
font-size: 12px;
margin: 0px;
}

a, a:link, a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #5bb5da;
text-decoration: none;
}

a:hover {
color: #999999;
text-decoration: none;
}

b {
color: #9ada5b;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

i {
color: #e2477a;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

u {
color: #e2b13c;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

s {
color: #bbbbbb;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

blockquote {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #888888;
padding: 10px;
background-color: #eeeeee;
border-left: 6px solid #e2477a;
border-right: 6px solid #9ada5b;
}

blockquote:first-letter {
font-family: "Georgia", sans-serif;
font-size: 14px;
font-style: italic;
color: #5bb5da;
}

::-moz-selection {
color: #222222;
background: #e2b13c;
}

input, textarea {
background-color: #f7f7f7;
color: #666666;
}

h2 {
padding: 10px;
font-family: Palatino Linotype, Palatino, serif;
font-size: 14px;
font-style: italic;
text-transform: uppercase;
color: #e2477a;
}

p, td {
}

code, kbd, pre, tt {
font-family: monospace;
}

/* ------ CONTAINING ELEMENTS ------ */

#content-outer
{
width: 100%;
margin: 0 auto;
padding: 0px;
background-color: #e9e9e9;
background-image: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_background.png);
background-position: left top;
background-repeat: repeat-x;
}

#content {
width: 860px;
background-color: #e9e9e9;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
text-align: justify;
}

#maincontent {
font-family: "Arial";
font-size: 12px;
color: #666666;
text-align: center;
margin-left: 270px;
margin-top: 20px;
}

#sidebar {
padding: 0px 5px 0px 5px;
margin-top: 8px;
font-family: "Arial";
font-size: 12px;
color: #666666;
width: 240px;
float: left;
text-align: left;
}

#header {
width: 100%;
position: relative;
background-image: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_background.png);
background-position: left top;
background-repeat: repeat-x;
border-bottom: 30px solid #e9e9e9;
position: relative;
color: #cccccc;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
padding: 8px 0px 5px 0px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
clear: both;
}

#footer
{
width: 100%;
bottom: 0px;
padding: 5px 0px 5px 0px;
text-align: center;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
color: #5bb5da;
z-index: 100;
}

/* ------ HEADER ------ */

div#header a, div#header a:link, div#header a:visited {
color: #aaaaaa;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover {
color: #222222 !Important;
background-color: #bbbbbb;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

ul.navheader
{
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
}

/* ------ HEADER NAV ------ */

div#header a[href*=".livejournal.com/"] {
color: #aaaaaa;
border-bottom: 4px solid #5bb5da !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*=".livejournal.com/"], body.lj-view-recent div#header li.view {
color: #222222 !Important;
background-color: #5bb5da !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="/calendar"] {
color: #aaaaaa;
border-bottom: 4px solid #9ada5b !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="/calendar"], body.lj-view-archive div#header li.view {
color: #222222 !Important;
background-color: #9ada5b !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="/friends"] {
color: #aaaaaa;
border-bottom: 4px solid #e2477a !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="/friends"], body.lj-view-friends div#header li.view {
color: #222222 !Important;
background-color: #e2477a !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="/profile"] {
color: #aaaaaa;
border-bottom: 4px solid #e2b13c !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="/profile"] {
color: #222222 !Important;
background-color: #e2b13c !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a[href*="http://community.livejournal.com/street_of_mercy/"] {
color: #aaaaaa;
border-bottom: 4px solid #bbbbbb !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#header a:hover[href*="http://community.livejournal.com/street_of_mercy/"] {
color: #222222 !Important;
background-color: #bbbbbb !Important;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

/* ------ FOOTER ------ */

div#footer a, div#footer a:link, div#footer a:visited {
color: #e2477a;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

div#footer a:hover {
color: #9ada5b;
padding: 8px 10px 5px 10px;
text-decoration: none;
font-family: Palatino Linotype, Palatino, serif;
font-size: 15px;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
margin: 0px;
display: inline;
}

.clearfoot {
clear: both;
}

/* ------ TITLE -- SUBTITLE ------ */

.title
{
display: none;
}

.subtitle
{
display: none;
}

/* ------ SIDEBAR MAIN ------ */

.defaultuserpic {
padding: 10px 10px 10px 10px;
text-align: center;
display: none;
}

.defaultuserpic img{
padding: 10px;
background-color: #F8F8F8;
display: none;
}

li.sbartitle, #sidebar_calendar li.sbartitle, #sidebar_linklist li.sbartitle, #sidebar_tags li.sbartitle, #sidebar_summary

li.sbartitle {
background-color: #222222;
font-family: "Georgia", sans-serif;
font-size: 16px;
font-style: italic;
color: #cccccc;
text-align: center;
padding: 10px 0px 10px 5px;
}

.sbartitle:first-letter {
color: #5bb5da;
font-size: 20px;
}

#sidebar_linklist li.sbartitle:first-letter {
color: #e2477a;
font-size: 20px;
}

#sidebar_tags li.sbartitle:first-letter {
color: #9ada5b;
font-size: 20px;
}

#sidebar_summary li.sbartitle:first-letter {
color: #e2b13c;
font-size: 20px;
}

#sidebar_calendar, #sidebar_linklist, #sidebar_tags, #sidebar_summary {
margin: 20px 0px 0px 0px;
}

.sbarheader {
background-color: #222222;
padding: 0px;
}

.sbarbody {
background-color: #f7f7f7;
padding: 0px 0px 5px 0px;
}

.sbarbody2 {
background-color: #f7f7f7;
padding: 0px 5px 5px 12px;
}

li.sbaritem {
font-family: "Tahoma", sans-serif;
font-size: 12px;
border-bottom: 1px solid #dddddd;
text-align: left;
text-transform: lowercase;
list-style: none;
margin: 3px 5px 0px 5px;
padding: 3px 2px 2px 0px;
}

li.sbaritem a
{
list-style: none;
color: #5bb5da;
}

li.sbaritem a:hover
{
list-style: none;
color: #999999;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

/* ------ SIDEBAR CALENDAR ------ */

#sidebar_calendar
{
display: none;
font-family: "Tahoma", sans-serif;
font-size: 12px;
}

.sbarcalendar, .sbarcalendarposts {
text-align: center;
border: 1px solid #dddddd;
padding: 2px 2px 2px 10px;
}

#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, #sidebar .sbarcalendarposts a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #aaaaaa;
padding: 0px;
text-align: center;
}

#sidebar .sbarcalendarposts a:hover {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #999999;
padding: 0px;
text-align: center;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

/* ------ SIDEBAR FREE BOX ------ */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
color: #5bb5da;
padding: 3px 5px 2px 3px;
text-decoration: none;
}

div#sidebar a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
}

/* ------ SIDEBAR LINK LIST ------ */

div#sidebar_linklist a, div#sidebar_linklist a:link, div#sidebar_linklist a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
padding: 3px 5px 2px 3px;
color: #e2477a;
}

div#sidebar_linklist a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
}

/* ------ SIDEBAR TAGS ------ */

div#sidebar_tags a, div#sidebar_tags a:link, div#sidebar_tags a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
padding: 3px 5px 2px 3px;
color: #9ada5b;
text-decoration: none;
}

div#sidebar_tags a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
text-decoration: none;
}

#sidebar_tags ul.sbarcontent {
}

/* ------ SIDEBAR SUMMARY ------ */

div#sidebar_summary a, div#sidebar_summary a:link, div#sidebar_summary a:visited {
font-family: "Tahoma", sans-serif;
font-size: 12px;
padding: 3px 5px 2px 3px;
color: #e2b13c;
text-decoration: none;
}

div#sidebar_summary a:hover {
padding: 3px 5px 2px 3px;
color: #999999;
text-decoration: none;
}

/* ------ MAINCONTENT ------ */

ul.ljtaglist li {
list-style: none;
text-align: justify;
margin-bottom: 5px;
margin-left: 10px;
}

ul.ljtaglist {
background-color: #f7f7f7;
border-top: 10px solid #222222;
color: #666666;
font-family: "Arial", sans-serif;
font-size: 12px;
padding: 12px 0px 12px 20px;
}

.subcontent {
background-color: #f7f7f7;
min-height: 120px;
}

.entry {
padding: 15px 15px 0px 15px;
color: #666666;
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: justify;
}

hr {
color: transparent;
height: 1px;
border-style : none;
border-bottom: 2px dotted #CCCCCC;
}

.entry ul li, ol li, li
{
padding-left: 0px;
margin-left: 0px;
}

/* ------ USERPICS ------ */

.userpic
{
position: relative;
float: right;
margin: 0px -130px 10px 10px;
z-index: 15;
border: 10px solid #222222;
background-color: #222222 !important;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: center;
}

.userpic a font, .userpic a:link font, .userpic a:visited font
{
color: #bbbbbb !important;
text-align: center !important;
}

.userpic a:hover font
{
color: #999999 !important;
text-decoration: none;
}

.userpicfriends
{
position: relative;
float: right;
margin: 0px -130px 10px 10px;
border: 10px solid #222222;
background-color: #222222 !important;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
text-align: center;
}

.userpicfriends a font, .userpicfriends a:link font, .userpicfriends a:visited font
{
color: #bbbbbb !important;
text-align: center !important;
}

.userpicfriends a:hover font
{
color: #999999 !important;
text-decoration: none;
}

/* ------ DATE SUBJECT ------ */

.date {
padding: 5px 5px 0px 0px;
text-align: right;
color: #9ada5b;
top: 5px;
font-family: Palatino Linotype, Palatino, serif;
font-size: 12px;
font-style: italic;
text-transform: lowercase;
letter-spacing: 1px;
background-color: #222222;
}

.subject, .subject a, .subject a:link, .subject a:visited, .subject a:hover {
padding: 0px 0px 5px 6px;
color: #e2477a;
font-family: "Georgia", sans-serif;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
background-color: #222222;
}

.datesubject {
background-color: transparent;
padding: 0px;
text-align: left;
}

/* ------ CURRENTS ------ */

.ljtags
{
margin-top: 20px;
color: #888888;
font-weight: lighter;
text-transform: lowercase;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
padding: 5px 0px 5px 0px;
border-top: 1px solid #e2b13c;
border-bottom: 1px solid #e2b13c;
}

.currentlocation
{
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_location.png) no-repeat left

center;
padding: 8px 0px 0px 18px;
}

.currentmood
{
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_mood.png) no-repeat left

center;
padding: 8px 0px 0px 18px;
}

.currentmusic
{
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_music.png) no-repeat left

center;
padding: 8px 0px 0px 18px;
}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong
{
display: none;
color: #777777;
font-weight: lighter;
text-transform: lowercase;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
padding: 4px 0 4px 0;
}

.currents, .currentmood, .currentmusic, .currentlocation {
color: #888888;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #e2b13c;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #9ada5b;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.currentmusic a, .currentmusic a:link, .currentmusic a:visited
{
color: #5bb5da;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

.ljtags a:hover, .currentlocation a:hover, .currentmusic a:hover
{
color: #999999;
font-weight: lighter;
font-family: "Tahoma", sans-serif;
font-size: 11px;
font-style: normal;
}

/* ------ COMMENTS ------ */

.comments
{
line-height: .2;
font-style: italic;
font-family: "Georgia", sans-serif;
font-size: 14px;
color: #f7f7f7;
text-align: right;
padding: 0px 0px 10px 0px;
position: relative;
margin: 0 -150px 0 0;
text-transform: lowercase;
clear: right;
border: 0px;
}

div.comments a, div.comments a:link, div.comments a:visited
{
line-height: 2;
padding: 1px 10px;
display: block;
color: #5bb5da;
background-color: #222222;
width: 100px;
margin: 0 3px 0 auto;
border-right: 4px solid #9ada5b;
}

div.comments a:hover
{
color: #e2477a;
border-right: 4px solid #e2b13c;
}

/* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */

.datesubjectcomment {
margin-top: 20px;
text-align: left;
padding: 5px;
color: #cccccc;
background-color: #222222;
}

.userpiccomment {
border: 5px #222222 solid;
background-color: #222222 !important;
position: relative;
top: -30px;
left: 0px;
padding: 5px;
margin: 25px 10px -20px 10px;
z-index: 15;
float: right;
}

.box {
width: 650px;
margin-left: auto;
margin-right: auto;
padding: 10px;
margin-top: 0px;
text-align: left;
clear: right;
}

form div.box {
text-align:center;
}

div#content input, div#content textarea, div#content select {
color: #666666;
}

.reply {
background-color: #f7f7f7;
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 12px;
line-height: 125%;
color: #666666;
border: 0px;
}

.replytosubject {
padding: 10px 0px 3px 6px;
color: #e2477a;
font-family: "Georgia", sans-serif;
font-size: 12px;
letter-spacing: 1px;
background-color: #222222;
}

.replytoposter {
color: #666666;
background-color: #222222;
text-transform: lowercase;
padding: 5px;
}

/* ------MAINCONTENT -- COMMENTS ------ */

.commentreply {
text-align: justify;
position: relative;
margin: 10px;
font-family: "Arial", sans-serif;
font-size: 12px;
color: #666666;
}

.commentbox {
padding: 0px;
margin: 0px;
text-align: left;
background-color: #f7f7f7;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #5bb5da;
}

.datesubjectcomment a:hover {
color: #999999;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f7f7f7;
}

.commentinfo {
margin-top: 10px;
width: 100%;
}

/* ------ MAINCONTENT -- YEAR/ACHIVE PAGES ------ */

ul.year {
text-align: center;
padding: 20px 0 20px 0;
}

ul.year li {
display: inline;
}

table.yeartable {

background-color: #f7f7f7;
padding: 20px;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px #999999 solid;
color: #666666;
}

table.yeartable td.yearday {
text-align: center;
color: #e2477a;
}

td.yearmonth {
color: #9ada5b;
border-style: none;
}

/* ------ MISC ------ */

.clear {
height: 10px;
font-size: 0.01px;
}

.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 10px 0 10px 0;
}

.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
/*so that IE users will still see an image*/
background: transparent url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_user.png)

no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_user.png)

no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

.ljuser img[src*="community.gif"] {
background: transparent url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_community.png)

no-repeat scroll 0 0 !important;
padding: 16px 0px 0px 17px !important;
}

span.ljuser a b {
padding: 2px 0 2px 0;
color: #5bb5da;
font-weight: lighter;
}

span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #999999;
font-weight: lighter;
}

img[src*="icon_protected.gif"] {
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
background: url(http://i9.photobucket.com/albums/a56/mercscilla/Layouts/rainbow_lock.png);
}

table#lj_controlstrip td
{
border: 1px solid #777777;
background-color: #222222;
color: #9ada5b;
border-left: none;
}

#lj_controlstrip input
{
background-color: #282828;
color: #999999;
}

#lj_controlstrip a
{
color: #e2477a;
}

#lj_controlstrip_statustext
{
color: #777777;
}

#lj_controlstrip.ljuser a b
{
color: #5bb5da;
}

#lj_controlstrip_userpic
{
display:none;
}

.headerimage {
height: 50px;
}

.separator {
margin: 10px 0px 10px 0px;
}

Images

header | background


-> user |
-> community |
-> locked entry


-> mood |
-> music |
-> location

Please upload the images to your own account, copy the code into a simple text editor and do a Find&ReplaceAll for every URL (see grrliz's tutorial).

Sidebar

This layout has the sidebar on the left side.

The sidebar-calendar and user-picture are disabled.

Ads

Set the ads placement to between entries.

Navbar

Works with or without the navigation bar.

Installation

Find the instructions for the set-up guide HERE.

Website Link

In the section of the code named HEADER NAV, put your website link between the quotation marks of

div#header a[href*="YOUR-URL-HERE"] and div#header a:hover[href*="YOUR-URL-HERE"]

If my website link is http://mercscilla.livejournal.com/, it would look like:

div#header a[href*="http://mercscilla.livejournal.com/"]

FAQ

Should you encounter any problems, please don't hesitate and ask me. :)

enjoy!

style: flexible squares

Previous post Next post
Up