s2, Flexible Squares: The Sun and The Moon

Sep 02, 2009 10:31



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

maker: synic_trance, style: flexible squares

Previous post Next post
Up
[]