Layout #6 - When did your heart go missing?
Omg is an Update!! :)
Is been so long! But i wanna to make a new layout for a long time and here it is, I hope you like it because I am a little rusty *lol*
so is pink and gray color, very simple but i don't know why I like it.
Name: When did your heart go missing?
Theme: S2 Flexi Squares (free, sponsored and paid account)
Preview
- credit gigiicons
- comment if you like it ;)
Codes:
/* CSS Document */
body {
margin-top: 0px;
background-color:#333333;
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top;
text-align: center;
color: #5d5d5d;
font-family: "arial", sans-serif;
font-size: 8px;
}
#content
{
width: 675px;
margin-left: auto; margin-right: auto;
background-color:#ffffff;
border-left: solid #eeeeee 9px;
border-bottom: solid #eeeeee 9px;
border-right: solid #eeeeee 9px;
border-top: solid #eeeeee 0px;
margin-top:0px;
padding: 10px;
text-align: justify;
}
#maincontent {
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #ffffff;
color:#777777;
border-width: 0px;
margin-right:1px;
margin-left: 185px;
margin-top:1px;
text-align: justify;
}
#sidebar {
padding-top: 20px;
margin-top: 5px;
background-color: #ffffff;
color: #F93D64;
padding-right:3px;
border-width: 0px 2px 0px 0px;
border-style:dotted;
font-size: 10px;
height:100%;
line-height: 8pt;
font-family: "arial", sans-serif;
color: #666666;
width: 175px;
float: left;
text-align: justify;
}
#header {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "verdana", sans-serif;
text-transform:uppercase;
font-size: 8 px;
letter-spacing: 2px;
background-color: #ffffff;
border-width: 0px 0px 0px 0px;
border-style:dotted;
color:#555555;
line-height: 10px;
font-weight: normal;
}
#footer {
width: 100%;
float: center;
text-align: center;
font-family: tahoma,georgia;
text-transform:uppercase;
font-size: 10px;
font-weight: none;
letter-spacing: 1px;
background-color: #ffffff;
border-width: 0px;
color: #555555;
z-index: 100;
clear: both;
}
a, a:link, a:visited {
color:#444444;
text-decoration: none;
background-color:#FFFFFF;
}
a:hover {
color:#CCCCCC;
text-decoration: none;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: monospace;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
font-family: tahoma,georgia;
FONT-WEIGHT:bold;
color: #F93D64;
border-width: 0px 1px 0px 0px;
border-style:dotted;
font-size: 8px;
}
div#header a:hover, div#footer a:hover {
color: #555555;
text-decoration: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
.title {
font-family: "verdana", sans-serif;
font-size: 10px;
font-weight: normal;
visibility: hidden;
top: 0px;
}
/*SIDEBAR*/
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-weight:lighter;
color:#FF3366;
}
div#sidebar a:hover {
color:#333333;
text-decoration: none;}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #000000;
text-align: center;}
.sbarbody {
padding: 0 2px 0 2px; }
.sbarbody2 {
padding: 0 8px 0 8px;
line-height:15px;
font-family: "arial", sans-serif;
font-size: 11px;}
table.calendar {
margin-right: auto;
margin-left: auto;}
.sbarcalendar {
border-color: #535353;
border-width: 0px;
border-style: dotted;
text-align: center;
color: #7B7B7B;
font-family: "tahoma", sans-serif;
font-size: 9px;
}
.sbarcalendarposts {
border-color: #848484;
border-width: 0px;
border-style: dotted;
background-color: #fff;
text-align: center;
color: #F93D64;
font-family: "tahoma", sans-serif;
font-size: 9px;
}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
padding-right: 5px;
margin-top:5px;
text-align:center;
}
li.sbartitle
{
padding-left: 0px;
padding-right: 0px;
text-align:center;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#666666;
border: 0px;
font-weight: bold;
font-family: "arial", sans-serif;
text-transform:uppercase;
font-size: 11px;
background-color:#FFFFFF;
letter-spacing: 1pt;
}
/*MAINCONTENT */
.subcontent {
background-color: #F8F8F8;
padding:0px;
}
.entry {
padding: 0px;
border-width:0px;
background-color:#F8f8f8;
/*background-color:#FFECE2;*/
color:#666666;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 10pt;
text-align: left;
margin-right:2px;
margin-left:1px;
margin-top:1px;
}
.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: #ffffff;
padding: 5px;
margin-right: 2px;
margin-left: 5px;
z-index: 15;
border-width: 1.5px;
border-color: #DFDFDF;
border-style: solid;
}
.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin-right: 2px;
margin-left: 5px;
text-align: center;
border-style: solid;
background-color: #ffffff;
border-width: 1px;
border-color: #DFDFDF;
font-family: "arial", sans-serif;
font-size: 10px;
z-index: 15;
}
.date {
line-height: 200%;
margin-bottom:2px;
font-family: "arial", sans-serif;
font-size: 9px;
color: #bbbbbb;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
letter-spacing: 0pt;
background-color: transparent;
}
.subject {
font-weight: bold;
padding: 1px;
color:#F93D64;
font-family: "arial", sans-serif;
text-transform:uppercase;
font-size: 12px;
background-color: #ffffff;
}
.subject a, .subject a:link, .subject a:visited {
color: #000000;
}
.subject a:hover {
color: #555555;
}
.datesubject {
background-color: #ffffff;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "arial", sans-serif;
font-size: 10px;
color:#999999;
text-align: left;
}
.comments {
font-family: "arial", sans-serif;
font-size: 10px;
text-align: center;
background-color: #f8f8f8;
font-weight: none;
position: relative;
top: 10px;
padding: 5px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #666666;
font-size: 10px;
font-weight: lighter;
}
div.comments a:hover {
color: #000000;
text-decoration: none;
}
.ljtags {
margin-top:4px;
font-family: "arial", sans-serif;
font-size: 10px;
color: #7F7F7F;
text-transform: uppercase;
font-weight: bold;
position: right;
}
.datesubjectcomment {
background-color:#ffffff;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 2px;
border-style: solid;
border-color: #dfdfdf;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
border-style: dotted;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 5px;
clear: left;
}
input, textarea {
background-color: #ffffff;
color: #000000;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 20px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 100%;
background-color:#FFFFFF;
color: #666666;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "arial", sans-serif;
color: #666666;
}
.commentbox {
border-color: #99CC99;
border-width: 1px;
border-style: dotted;
padding: 9px;
margin: 9px;
background-color: #ffffff;
}
.clear{ height: 25px; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #333333;
}
.datesubjectcomment a:hover {
color: #888888;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 9px;
margin: 9px;
background-color: #d4dce8;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.separator{
height: 10px;
}
ul.navheader li
{
display: inline;
padding: 0 3px 0 3px;
}
/*FOOTER*/
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
.navfooter {
margin:0px;
padding:0px;
}
.viewing {
margin:0px;
padding:0px;
}
.clearfoot {
clear: both;
}
/* CSS Document */
Installation:
1. Copy the codes.
2. Go to Manage > Customize
3. Select S2 under Style System.
4. Go to: Custom Options > Custom CSS
5. Set the Use layout's stylesheet(s) drop-down menu and the Set Use layout's stylesheet(s) when including custom external stylesheet to NO.
6. Paste the CSS codes into the Custom stylesheet field.
if you want to add the header add this code:
.headerimage {
position: relative;
width: 713px;
height: 202px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i3.photobucket.com/albums/y63/arrowgal/headerxs.jpg");
background-repeat: no-repeat;
}
dont forget not to direct link the image please!
you can change the header and the colors if you want.
Is been so long! But i wanna to make a new layout for a long time and here it is, I hope you like it because I am a little rusty *lol*
so is pink and gray color, very simple but i don't know why I like it.
Name: When did your heart go missing?
Theme: S2 Flexi Squares (free, sponsored and paid account)
Preview
- credit gigiicons
- comment if you like it ;)
Codes:
/* CSS Document */
body {
margin-top: 0px;
background-color:#333333;
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top;
text-align: center;
color: #5d5d5d;
font-family: "arial", sans-serif;
font-size: 8px;
}
#content
{
width: 675px;
margin-left: auto; margin-right: auto;
background-color:#ffffff;
border-left: solid #eeeeee 9px;
border-bottom: solid #eeeeee 9px;
border-right: solid #eeeeee 9px;
border-top: solid #eeeeee 0px;
margin-top:0px;
padding: 10px;
text-align: justify;
}
#maincontent {
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #ffffff;
color:#777777;
border-width: 0px;
margin-right:1px;
margin-left: 185px;
margin-top:1px;
text-align: justify;
}
#sidebar {
padding-top: 20px;
margin-top: 5px;
background-color: #ffffff;
color: #F93D64;
padding-right:3px;
border-width: 0px 2px 0px 0px;
border-style:dotted;
font-size: 10px;
height:100%;
line-height: 8pt;
font-family: "arial", sans-serif;
color: #666666;
width: 175px;
float: left;
text-align: justify;
}
#header {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "verdana", sans-serif;
text-transform:uppercase;
font-size: 8 px;
letter-spacing: 2px;
background-color: #ffffff;
border-width: 0px 0px 0px 0px;
border-style:dotted;
color:#555555;
line-height: 10px;
font-weight: normal;
}
#footer {
width: 100%;
float: center;
text-align: center;
font-family: tahoma,georgia;
text-transform:uppercase;
font-size: 10px;
font-weight: none;
letter-spacing: 1px;
background-color: #ffffff;
border-width: 0px;
color: #555555;
z-index: 100;
clear: both;
}
a, a:link, a:visited {
color:#444444;
text-decoration: none;
background-color:#FFFFFF;
}
a:hover {
color:#CCCCCC;
text-decoration: none;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: monospace;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
font-family: tahoma,georgia;
FONT-WEIGHT:bold;
color: #F93D64;
border-width: 0px 1px 0px 0px;
border-style:dotted;
font-size: 8px;
}
div#header a:hover, div#footer a:hover {
color: #555555;
text-decoration: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
.title {
font-family: "verdana", sans-serif;
font-size: 10px;
font-weight: normal;
visibility: hidden;
top: 0px;
}
/*SIDEBAR*/
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-weight:lighter;
color:#FF3366;
}
div#sidebar a:hover {
color:#333333;
text-decoration: none;}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #000000;
text-align: center;}
.sbarbody {
padding: 0 2px 0 2px; }
.sbarbody2 {
padding: 0 8px 0 8px;
line-height:15px;
font-family: "arial", sans-serif;
font-size: 11px;}
table.calendar {
margin-right: auto;
margin-left: auto;}
.sbarcalendar {
border-color: #535353;
border-width: 0px;
border-style: dotted;
text-align: center;
color: #7B7B7B;
font-family: "tahoma", sans-serif;
font-size: 9px;
}
.sbarcalendarposts {
border-color: #848484;
border-width: 0px;
border-style: dotted;
background-color: #fff;
text-align: center;
color: #F93D64;
font-family: "tahoma", sans-serif;
font-size: 9px;
}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
padding-right: 5px;
margin-top:5px;
text-align:center;
}
li.sbartitle
{
padding-left: 0px;
padding-right: 0px;
text-align:center;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#666666;
border: 0px;
font-weight: bold;
font-family: "arial", sans-serif;
text-transform:uppercase;
font-size: 11px;
background-color:#FFFFFF;
letter-spacing: 1pt;
}
/*MAINCONTENT */
.subcontent {
background-color: #F8F8F8;
padding:0px;
}
.entry {
padding: 0px;
border-width:0px;
background-color:#F8f8f8;
/*background-color:#FFECE2;*/
color:#666666;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 10pt;
text-align: left;
margin-right:2px;
margin-left:1px;
margin-top:1px;
}
.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: #ffffff;
padding: 5px;
margin-right: 2px;
margin-left: 5px;
z-index: 15;
border-width: 1.5px;
border-color: #DFDFDF;
border-style: solid;
}
.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin-right: 2px;
margin-left: 5px;
text-align: center;
border-style: solid;
background-color: #ffffff;
border-width: 1px;
border-color: #DFDFDF;
font-family: "arial", sans-serif;
font-size: 10px;
z-index: 15;
}
.date {
line-height: 200%;
margin-bottom:2px;
font-family: "arial", sans-serif;
font-size: 9px;
color: #bbbbbb;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
letter-spacing: 0pt;
background-color: transparent;
}
.subject {
font-weight: bold;
padding: 1px;
color:#F93D64;
font-family: "arial", sans-serif;
text-transform:uppercase;
font-size: 12px;
background-color: #ffffff;
}
.subject a, .subject a:link, .subject a:visited {
color: #000000;
}
.subject a:hover {
color: #555555;
}
.datesubject {
background-color: #ffffff;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "arial", sans-serif;
font-size: 10px;
color:#999999;
text-align: left;
}
.comments {
font-family: "arial", sans-serif;
font-size: 10px;
text-align: center;
background-color: #f8f8f8;
font-weight: none;
position: relative;
top: 10px;
padding: 5px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #666666;
font-size: 10px;
font-weight: lighter;
}
div.comments a:hover {
color: #000000;
text-decoration: none;
}
.ljtags {
margin-top:4px;
font-family: "arial", sans-serif;
font-size: 10px;
color: #7F7F7F;
text-transform: uppercase;
font-weight: bold;
position: right;
}
.datesubjectcomment {
background-color:#ffffff;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 2px;
border-style: solid;
border-color: #dfdfdf;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
border-style: dotted;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 5px;
clear: left;
}
input, textarea {
background-color: #ffffff;
color: #000000;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 20px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 100%;
background-color:#FFFFFF;
color: #666666;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "arial", sans-serif;
color: #666666;
}
.commentbox {
border-color: #99CC99;
border-width: 1px;
border-style: dotted;
padding: 9px;
margin: 9px;
background-color: #ffffff;
}
.clear{ height: 25px; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #333333;
}
.datesubjectcomment a:hover {
color: #888888;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 9px;
margin: 9px;
background-color: #d4dce8;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.separator{
height: 10px;
}
ul.navheader li
{
display: inline;
padding: 0 3px 0 3px;
}
/*FOOTER*/
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
.navfooter {
margin:0px;
padding:0px;
}
.viewing {
margin:0px;
padding:0px;
}
.clearfoot {
clear: both;
}
/* CSS Document */
Installation:
1. Copy the codes.
2. Go to Manage > Customize
3. Select S2 under Style System.
4. Go to: Custom Options > Custom CSS
5. Set the Use layout's stylesheet(s) drop-down menu and the Set Use layout's stylesheet(s) when including custom external stylesheet to NO.
6. Paste the CSS codes into the Custom stylesheet field.
if you want to add the header add this code:
.headerimage {
position: relative;
width: 713px;
height: 202px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i3.photobucket.com/albums/y63/arrowgal/headerxs.jpg");
background-repeat: no-repeat;
}
dont forget not to direct link the image please!
you can change the header and the colors if you want.