Picture Preview +
Live Preview (temporary) THE DETAILS
Layout Name - The Sun and The Moon
Tested in - Firefox,
Resolution - 1024×768 and up
journal style -
flexible squares, S2,
Basic and Plus, paid
Directions -
Go to
Select Journal Style type flexible squares in the search bar
apply any theme that shows up in the search
IMPORTANT
at the bottom "Choose a Page Setup"
go to "1 COLUMN (NO SIDEBAR)" and hit apply layout
Go to
Customize Journal Style In the CSS section, select the options
1)Use layout's stylesheet(s) - No
2)Use layout's stylesheet(s) when
including custom external stylesheet - No
3)Use external stylesheets - No
4)copy and paste the css code
THE CODE
/*////////////////////////////////////////////*/
/*Layout:the Sun and the Moon*/
/*coded by:synic_trance@lj*/
/*
http://community.livejournal.com/synicstick*//*Flexible Squares, S2, Basic Plus & Paid*/
/*Tested in FireFox*/
body {
background-color: #000000;
height:600px;
background: url("
http://i32.tinypic.com/2cpt1d5.png") top left no-repeat #000000;
text-align: center;
color: #ffffff;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #549397;
text-decoration: none;
font-weight:bold;
}
a:hover {
color: #FF6600;
text-decoration: underline;
font-weight:bold;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content
{
width: 650px;
margin-top: 90px;
margin-left: 150px; margin-right: auto;
background-color: #141416;
border-width: 0px;
padding: 15px;
}
#maincontent {
margin-top: 10px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #ffffff;
border-width: 0px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #141416;
border-width: 0px;
font-size: 11px;
color: #ffffff;
width: 160px;
text-align: left;
}
#header {
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: Georgia;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
border-width: 0px;
background-color: transparent;
color: #adadad;
}
#footer {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent;
color: #adadad;
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: #FF6600;
}
div#header a:hover, div#footer a:hover {
color: #549397;
text-decoration: none;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
.title {
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 200%;
top: 10px;
}
.subtitle{
display:none;
top: 10px;
}
/* maincontent */
.subcontent {
}
.entry {
margin: 0px 50px 10px 30px;
padding: 30px;
background-color: #000000;
color: #adadad;
font-family: georgia;
font-size: 11px;
font-weight: normal;
text-align: center;
border-width: 1px;
border-color: #000000;
border-style: solid;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: right;
background-color: #000000;
padding: 0px;
margin-right: -60px;
margin-left: 0px;
margin-top: 45px;
margin-bottom: 10px;
z-index: 15;
border-width: 4px;
border-color: #141416;
border-style: solid;
}
.userpicfriends {
position: relative;
float: right;
padding: 0px;
margin-right: -60px;
margin-left: 0px;
margin-top: 45px;
margin-bottom: 10px;
text-align: center;
background-color:#141416;
border-style: solid;
border-width: 4px;
border-color: #141416;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}
.date {
line-height: 100%;
top: 5px;
color: #adadad;
text-align:center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.subject {
font-weight: bold;
padding: 5px;
color: #549397;
text-align:center;
font-family: "Verdana", sans-serif;
font-size: 12px;
}
.subject a, .subject a:link, .subject a:visited {
color: #549397;
text-decoration: none;
}
.subject a:hover {
color: #FF6600;
}
.datesubject {
background-color: TRANSPARENT;
padding: 5px;
}
.currents, .currentmood, .currentmusic {
font-family: georgia;
font-size: 11px;
}
.comments {
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: right;
background-color: transparent ;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #549397;
}
div.comments a:hover {
color: #FF6600;
text-decoration: none;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
background-color: #141416;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #141416;
background-color: #141416;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: right;
border-width: 0px;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #222222;
padding: 10px;
clear: right;
}
input, textarea {
background-color: #141416;
color: #888888;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: georgia;
font-size: 11px;
line-height: 125%;
background-color: #141416;
color: #888888;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #888888;
}
.commentbox {
border-color: #222222;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #000000;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #549397;
}
.datesubjectcomment a:hover {
color: #FF6600;
}
.commentboxpartial {
border-color: #222222;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #141416;
}
.commentinfo {
background-color: #141416;
margin-top: 10px;
width: 100%;
}
/* maincontent -- year/achive pages */
ul.year {
text-align: center;
padding-bottom: 40px;
color: #444444;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
color: #444444;
font-weight:bold;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #222222;
color: #444444;
}
table.yeartable td.yearday {
background-color: #141416;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* footer */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 15px;
}
.skiplinks {
text-align: center;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
* 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: #222222;
background-color: #141416;
}
/*////////////////////////////////////////////*/
THE IMAGES
To prevent annoying BANDWITH EXCEEDED IMAGES
Save the image(s) and upload them onto you own image host.
like
Tinypic,
Photobucket or
Imageshack Background Image find this section at the begining of the css code
and replace the Image url with your own
body {
background-color: #000000;
height:600px;
background: url("
http://i32.tinypic.com/2cpt1d5.png")
top left no-repeat #000000;
text-align: center;
color: #ffffff;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
♣FOR MORE GO TO
synicstick♣
Comment and Credit and you will be loved forever :D