3 TVXQ S2 Layouts
Visual Pollution presents 3 S2 (flexible squares) livejournal layouts:
Thumbnails:
TVXQ - Break Out!
Preview @ startbeing
Yunho - Checkmate
Preview @ jadelocket
TVXQ - Darkness Eyes
Preview @ breakyourtrick
How to Install
How to install this layout:
1.) If you're using SYSTEM 1 layouts, first go to Journal Display and change the Style System to S2. Click Save Changes.
2.) In the Journal Display, now go to Select a New Theme, and in the search box search Flexible Squares and click on any layout with that theme. Click Save Changes.
3.) Now go to Custom CSS. At that section, select "No" in each of the dropdown menus, and in the large section at the bottom that says, Custom stylesheet, paste in the following code (PICK THE LAYOUT):
TVXQ - Break Out!
Preview @ startbeing
Yunho - Checkmate
Preview @ jadelocket
TVXQ - Darkness Eyes
Preview @ breakyourtrick
TVXQ - Break Out! CSS
BODY {
margin-top: 0px;
background-color:#000;
background-image: url('');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
color: #A1AAB4;
font-family: "tahoma", sans-serif;
font-size: 10px;
border:0px;
border-left:20px solid black;
border-right:20px solid black;
border-bottom:10px solid black;
border-top:0px solid black;
scrollbar-arrow-color:#453E3C;
scrollbar-track-color:#000;
scrollbar-face-color:#000;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#453E3C;
scrollbar-shadow-color:#000;
}
textarea, input, select, option
{
background-color: #000 !important;
color: #6B6D61 !important; border:1px solid #453E3C !important;
font-family: "tahoma", sans-serif;
font-size: 10px; }
textarea {
width:300px;}
a, a:link, a:visited {
text-decoration: none;
color: #6F6759;
padding: 0px;
}
b, div#sidebar b, strong, div#sidebar strong {
color: #837961;
padding: 0px;
}
i, div#sidebar i, em, div#sidebar em {
color: #8B6160;
padding: 0px;
}
u, div#sidebar u {
color: #AFA58F;
padding: 0px;
}
a:hover {
color: #8A8783;
padding: 0px;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: tahoma;
}
#content {
width: 680px;
margin-left: auto; margin-right: auto;
background-color: #000;
background-image: url('');
background-repeat: repeat;
border: solid 0px #000;
padding: 10px;
text-align: right; }
#maincontent {
margin-top: 10px;
padding: 2px;
font-family: "tahoma", sans-serif;
font-size: 10px;
line-height: 15px;
background-color: #000;
background-image: url('');
background-repeat: repeat;
color:#9A6B75;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
margin-right:0px;
margin-left: 160px;
margin-top: 40px;
text-align: justify;
}
#header {
width: auto;
height: 32px;
margin: 0px;
padding: 5px;
color: #757C7B;
background-color: transparent;
background-image: url();
background-repeat: repeat;
font-weight: lighter;
font-family: times;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
}
#footer {
float: center;
height: 30px;
z-index: 100;
clear: both;
margin: 0;
padding: 6px 0px 6px 0px;
text-align: center;
font-size: 10px;
font-weight: lightest;
font-family: tahoma;
color: #63494C;
letter-spacing: 2px;
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
#sidebar {
padding-top: 10px;
margin-top: 52px;
background-color: transparent;
background-image: url();
background-repeat: repeat;
border-top: solid 0px #D8CB9B;
border-left: solid 0px #D8CB9B;
border-right: solid 0px #D8CB9B;
border-bottom: dashed 0px #4F5960;
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #99917D;
width: 150px;
float: left;
text-align: justify;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #84796A;
padding: 5px;
font-size: 11pt;
font-family: tahoma;
font-variant: small-caps;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
color: #9A9897;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #84796A;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
div#footer a:hover {
color: #9A9897;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
}
.title {
text-align: center;
color: #B7ADA0;
font-family: tahoma, sans-serif;
font-variant: small-caps;
font-size: 14pt;
letter-spacing: 1px;
text-transform: ;
padding: 3px;
}
.subtitle {
text-align: center;
color: #63494C;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
}
/* footer */
ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* SIDEBAR */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #694626
}
div#sidebar a:hover {
color:#52413E;
background-image: url('');
background-repeat: repeat;
text-decoration: none;
}
.defaultuserpic {
text-align:center;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 0px solid #FAC705;
padding:2px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #BAA4A7;
text-align: center;
}
.sbarbody {
padding: 0 2px 0 2px;
}
.sbarbody2 {
padding: 0 2px 0 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #453E3C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #766D5F;
border-width: 1px;
border-style: solid;
background-color:#000;
background-image: url();
background-repeat: repeat;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
list-style: none;
background: #000;
background-image: url();
background-repeat: repeat;
border-left: solid 0px #453E3C;
border-bottom: solid 0px #A096A5;
border-right: dashed 3px #453E3C;
border-top: solid 0px #57111C;
}
li.sbaritem:hover {
background: #000000;
border-right: dashed 3px #6F553A;
color:#757677;
}
li.sbartitle
{
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#766D5F;
border-top: solid #6D7D8E 0px;
border-left: dashed #6D7D8E 0px;
border-bottom: dashed #6D7D8E 0px;
border-right: solid #453E3C 3px;
font-weight: none;
font-family: tahoma, sans-serif;
font-size: 11px;
font-variant: small-caps;
background-color: #000;
background-image: url();
background-repeat: repeat;
letter-spacing: 1pt;
}
/* MAINCONTENT */
.subcontent {
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 2px;
background-color: #000;
background-image: url('');
background-repeat: repeat;
background-position: top right;
color:#6B7673;
font-family: "tahoma", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 10pt;
border:0px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: left;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 1px solid #000;
padding:2px;
}
.userpicfriends {
position: relative;
float: left;
color: #635562 !important;
background-color: #000 !important;
background-image: url();
background-repeat: repeat;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
border: 1px solid #000;
padding:2px;
}
.userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited
{color: #635562 !important;}
.date {
line-height: 200%;
top: 5px;
font-family: "tahoma", sans-serif;
font-variant: small-caps;
font-size: 16px;
color: #635562;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
border: 0px solid #E5D6B9;
border-bottom: 0px;
text-align:left;
letter-spacing: 0pt;
background-color: #000;
background-image: url('');
background-repeat: repeat;
}
.subject {
padding: 2px;
font-weight: none;
color:#63494C;
font-family: tahoma, sans-serif;
text-align:left;
font-size: 10px;
border: 0px solid #54121C;
border-right: solid 3px #453E3C;
background-color: #000;
background-image: url('');
background-repeat: repeat;
letter-spacing: 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #63494C;
}
.subject a:hover {
color: #A29A8C;
}
::-moz-selection {
background: #000;
color: #C48269;
}
.datesubject {
background-color: transparent;
background-image: url();
background-repeat: repeat;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "tahoma", sans-serif;
font-size: 10px;
color: #8FA29E;
}
.comments {
font-family: tahoma, sans-serif;
font-size: 10px;
text-align: right;
background-color: #000;
background-image: url('');
background-repeat: repeat;
font-weight: lighter;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border:0px;
padding: 5px;
background-position: bottom right;
}
.separator {
height: 25px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #63494C;
border-left: solid 0px #C3C0AD;
border-bottom: solid 0px #C3C0AD;
border-right: solid 3px #453E3C;
border-top: solid 0px #C3C0AD;
font-size: 10px;
font-weight: lighter;
padding:5px;
}
div.comments a:hover {
font-size: 10px;
font-weight: lighter;
color: #4A464A;
border-left: solid 0px #0093FA;
border-bottom: solid 0px #0093FA;
border-right: solid 3px #453E3C;
border-top: solid 0px #0093FA;
background: ;
background-image: url('');
padding:5px;
}
.ljtags {
font-family: tahoma, sans-serif;
font-size: 10px;
color: #918872;
margin-top: 13px;
font-weight: none;
text-transform: lowercase;
position: left;
}
.headerimage {
position: relative;
width: 700px;
height: 295px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i44.tinypic.com/nxrm2d.jpg');
background-repeat: no-repeat;
background-position: center;
}
Yunho - Checkmate CSS
BODY {
margin-top: 0px;
background-color:#000;
background-image: url('http://i41.tinypic.com/ay7i9t.jpg');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
color: #A1AAB4;
font-family: "tahoma", sans-serif;
font-size: 10px;
border:0px;
border-left:20px solid black;
border-right:20px solid black;
border-bottom:10px solid black;
border-top:0px solid black;
scrollbar-arrow-color:#A1AAB4;
scrollbar-track-color:#000;
scrollbar-face-color:#000;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#A1AAB4;
scrollbar-shadow-color:#000;
}
textarea, input, select, option
{
background-color: #000 !important;
color: #504D54 !important; border:1px solid #3A383D !important;
font-family: "tahoma", sans-serif;
font-size: 10px; }
textarea {
width:300px;}
a, a:link, a:visited {
text-decoration: none;
color: #B5CF78;
padding: 0px;
}
b, div#sidebar b, strong, div#sidebar strong {
color: #DAC991;
padding: 0px;
}
i, div#sidebar i, em, div#sidebar em {
color: #D3D6A9;
padding: 0px;
}
u, div#sidebar u {
color: #A1D3A0;
padding: 0px;
}
a:hover {
color: #B8B17D;
padding: 0px;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: tahoma;
}
#content {
width: 728px;
margin-left: auto; margin-right: auto;
background-color: #000;
background-image: url('');
background-repeat: repeat;
border:1px solid black;
border-bottom:5px solid black;
padding: 10px;
text-align: right; }
#maincontent {
margin-top: 10px;
padding: 2px;
font-family: "tahoma", sans-serif;
font-size: 10px;
line-height: 15px;
background-color: #A4BC82;
background-image: url('http://i42.tinypic.com/11j3wxw.jpg');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
background-repeat: repeat;
color:#9A6B75;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
margin-right:0px;
margin-left: 160px;
margin-top: 40px;
text-align: justify;
}
#header {
width: auto;
height: 32px;
margin: 0px;
padding: 5px;
color: #DCDF9F;
background-color: black;
background-image: url();
background-repeat: repeat;
font-weight: lighter;
font-family: times;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
}
#footer {
float: center;
height: 30px;
z-index: 100;
clear: both;
margin: 0;
padding: 6px 0px 6px 0px;
text-align: center;
font-size: 10px;
font-weight: lightest;
font-family: tahoma;
color: #757C7B;
letter-spacing: 2px;
background-color: black;
background-image: url();
background-repeat: repeat;
}
#sidebar {
padding-top: 10px;
margin-top: 52px;
background-color: #000;
background-image: url();
background-repeat: repeat;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 3px #000;
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #E8E2B5;
width: 150px;
float: left;
text-align: justify;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #9CB379;
padding: 5px;
font-size: 12pt;
font-family: georgia;
font-variant: small-caps;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
color: #ACD2A2;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #9CB379;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
div#footer a:hover {
color: #ACD2A2;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
}
.title {
text-align: center;
color: #CBD7A7;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 14pt;
letter-spacing: 1px;
text-transform: ;
padding: 3px;
}
.subtitle {
text-align: center;
color: #BDB589;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
}
/* footer */
ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* SIDEBAR */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #9ACAA8
}
div#sidebar a:hover {
color:#CBC69F;
background-image: url('');
background-repeat: repeat;
text-decoration: none;
}
.defaultuserpic {
text-align:center;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 0px solid #FAC705;
padding:2px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #CBC69F;
text-align: center;
}
.sbarbody {
padding: 0 2px 0 2px;
}
.sbarbody2 {
padding: 0 2px 0 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #90D09D;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #D4B680;
border-width: 1px;
border-style: solid;
background-color:#000;
background-image: url();
background-repeat: repeat;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
list-style: none;
background: #000;
background-image: url('');
background-repeat: repeat;
border-left: solid 4px #9FBC84;
border-bottom: solid 1px #353948;
border-right: dashed 0px #E2E4B6;
border-top: solid 0px #57111C;
}
li.sbaritem:hover {
background: #000000;
border-left: solid 4px #8EC29A;
color:#E8E3BA;
}
li.sbartitle
{text-align: center;
color: #83AA71;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
border-top: solid #6D7D8E 0px;
border-left: dashed #6D7D8E 0px;
border-bottom: solid #D0CFA2 1px;
border-right: dashed #6D7D8E 0px;
font-weight: none;
background-color: #000;
background-image: url();
background-repeat: repeat;
letter-spacing: 1pt;
}
/* MAINCONTENT */
.subcontent {
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
.entry {
margin: 2px 2px 2px 2px;
padding: 2px;
background-color: #000;
background-image: url('');
background-repeat: no-repeat;
background-position: bottom left;
color:#D4B680;
font-family: "tahoma", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 10pt;
border:1px solid black;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: left;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 1px solid #000;
padding:2px;
}
.userpicfriends {
position: relative;
float: left;
color: #67683E !important;
background-color: #000 !important;
background-image: url();
background-repeat: repeat;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
border: 1px solid #283140;
padding:2px;
}
.userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited
{color: #847787 !important;}
.date {
line-height: 200%;
top: 5px;
font-family: "tahoma", sans-serif;
font-variant: small-caps;
font-size: 16px;
color: #67683E;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
border: 0px solid #E5D6B9;
border-bottom: 0px;
text-align:left;
letter-spacing: 0pt;
background-color: #000;
background-image: url('');
background-repeat: repeat;
}
.subject {
padding: 2px;
font-weight: none;
color:#95C7A4;
font-family: tahoma, sans-serif;
text-align:left;
font-size: 12px;
border: 0px solid #54121C;
border-bottom: solid 0px #3A383D;
background-color: #000;
background-image: url('');
background-repeat: repeat;
letter-spacing: 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #D0CAAA;
}
.subject a:hover {
color: #9DB68E;
}
::-moz-selection {
background: #000;
color: #DFDAB0;
}
.datesubject {
background-color: transparent;
background-image: url();
background-repeat: repeat;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "tahoma", sans-serif;
font-size: 10px;
color: #DFDAB0;
}
.comments {
font-family: tahoma, sans-serif;
font-size: 10px;
text-align: right;
background-color: #000;
background-image: url('');
background-repeat: repeat;
font-weight: lighter;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border:0px;
padding: 5px;
background-position: bottom right;
}
.separator {
height: 25px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #B2C7A0;
border-left: solid 0px #C3C0AD;
border-bottom: solid 0px #C3C0AD;
border-right: solid 0px #C3C0AD;
border-top: solid 0px #C3C0AD;
font-size: 10px;
font-weight: lighter;
padding:5px;
}
div.comments a:hover {
font-size: 10px;
font-weight: lighter;
color: #A4BF8A;
border-left: solid 0px #0093FA;
border-bottom: solid 0px #0093FA;
border-right: solid 0px #0093FA;
border-top: solid 0px #0093FA;
background: ;
background-image: url('');
padding:5px;
}
.ljtags {
font-family: tahoma, sans-serif;
font-size: 10px;
color: #B2C7A0;
margin-top: 13px;
font-weight: none;
text-transform: lowercase;
position: left;
}
.headerimage {
position: relative;
width: 750px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i43.tinypic.com/1zg9gdj.jpg');
background-repeat: no-repeat;
background-position: center;
border:0px;
}
TVXQ - Darkness Eyes CSS
BODY {
margin-top: 0px;
background-color:#000;
background-image: url('http://i43.tinypic.com/142y5xw.jpg');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
color: #A1AAB4;
font-family: "tahoma", sans-serif;
font-size: 10px;
border:0px;
border-left:20px solid black;
border-right:20px solid black;
border-bottom:10px solid black;
border-top:0px solid black;
scrollbar-arrow-color:#A1AAB4;
scrollbar-track-color:#000;
scrollbar-face-color:#000;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#A1AAB4;
scrollbar-shadow-color:#000;
}
textarea, input, select, option
{
background-color: #000 !important;
color: #504D54 !important; border:1px solid #3A383D !important;
font-family: "tahoma", sans-serif;
font-size: 10px; }
textarea {
width:300px;}
a, a:link, a:visited {
text-decoration: none;
color: #A88D7A;
padding: 0px;
}
b, div#sidebar b, strong, div#sidebar strong {
color: #4B5064;
padding: 0px;
}
i, div#sidebar i, em, div#sidebar em {
color: #7A505A;
padding: 0px;
}
u, div#sidebar u {
color: #B3958A;
padding: 0px;
}
a:hover {
color: #CFB79B;
padding: 0px;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: tahoma;
}
#content {
width: 730px;
margin-left: auto; margin-right: auto;
background-color: #0F111E;
background-image: url('');
background-repeat: repeat;
border:0px;
border-left:2px solid #3A383D;
border-right:2px solid #3A383D;
padding: 10px;
text-align: right; }
#maincontent {
margin-top: 10px;
padding: 2px;
font-family: "tahoma", sans-serif;
font-size: 10px;
line-height: 15px;
background-color: transparent;
background-image: url('');
background-repeat: repeat;
color:#9A6B75;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
margin-right:0px;
margin-left: 160px;
margin-top: 40px;
text-align: justify;
}
#header {
width: auto;
height: 32px;
margin: 0px;
padding: 5px;
color: #757C7B;
background-color: transparent;
background-image: url();
background-repeat: repeat;
font-weight: lighter;
font-family: times;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
}
#footer {
float: center;
height: 30px;
z-index: 100;
clear: both;
margin: 0;
padding: 6px 0px 6px 0px;
text-align: center;
font-size: 10px;
font-weight: lightest;
font-family: tahoma;
color: #757C7B;
letter-spacing: 2px;
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
#sidebar {
padding-top: 10px;
margin-top: 52px;
background-color: #000;
background-image: url();
background-repeat: repeat;
border-top: solid 0px #D8CB9B;
border-left: solid 0px #D8CB9B;
border-right: solid 0px #D8CB9B;
border-bottom: dashed 1px #4F5960;
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #B3958A;
width: 150px;
float: left;
text-align: justify;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #2C3C4B;
padding: 5px;
font-size: 12pt;
font-family: georgia;
font-variant: small-caps;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
color: #595F5F;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #2C3C4B;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
div#footer a:hover {
color: #595F5F;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
}
.title {
text-align: center;
color: #6E727D;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 14pt;
letter-spacing: 1px;
text-transform: ;
padding: 3px;
}
.subtitle {
text-align: center;
color: #B09783;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
}
/* footer */
ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* SIDEBAR */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #464D6A
}
div#sidebar a:hover {
color:#BAA4A7;
background-image: url('');
background-repeat: repeat;
text-decoration: none;
}
.defaultuserpic {
text-align:center;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 0px solid #FAC705;
padding:2px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #BAA4A7;
text-align: center;
}
.sbarbody {
padding: 0 2px 0 2px;
}
.sbarbody2 {
padding: 0 2px 0 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #464D6A;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #000;
border-width: 1px;
border-style: solid;
background-color:#373B47;
background-image: url();
background-repeat: repeat;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
list-style: none;
background: #000;
background-image: url('http://i41.tinypic.com/2yjvhv8.jpg');
background-repeat: repeat;
border-left: solid 4px #353948;
border-bottom: solid 1px #353948;
border-right: dashed 0px #E2E4B6;
border-top: solid 0px #57111C;
}
li.sbaritem:hover {
background: #000000;
border-left: solid 4px #373B47;
color:#DDCCBB;
}
li.sbartitle
{text-align: center;
color: #B09783;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
border-top: solid #6D7D8E 0px;
border-left: dashed #6D7D8E 0px;
border-bottom: dashed #6D7D8E 1px;
border-right: dashed #6D7D8E 0px;
font-weight: none;
background-color: #000;
background-image: url();
background-repeat: repeat;
letter-spacing: 1pt;
}
/* MAINCONTENT */
.subcontent {
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
.entry {
margin: 0px 0px 0px 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 25px;
padding-left: 2px;
background-color: transparent;
background-image: url('http://i40.tinypic.com/232rg1.jpg');
background-repeat: no-repeat;
background-position: bottom left;
color:#9596A4;
font-family: "tahoma", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 10pt;
border:0px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: left;
background-color: #283140;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 1px solid #283140;
padding:2px;
}
.userpicfriends {
position: relative;
float: left;
color: #C5B6A6 !important;
background-color: #283140 !important;
background-image: url();
background-repeat: repeat;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
border: 1px solid #283140;
padding:2px;
}
.userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited
{color: #847787 !important;}
.date {
line-height: 200%;
top: 5px;
font-family: "tahoma", sans-serif;
font-variant: small-caps;
font-size: 16px;
color: #504D54;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
border: 0px solid #E5D6B9;
border-bottom: 0px;
text-align:left;
letter-spacing: 0pt;
background-color: #000;
background-image: url('');
background-repeat: repeat;
}
.subject {
padding: 2px;
font-weight: none;
color:#36444D;
font-family: tahoma, sans-serif;
text-align:left;
font-size: 12px;
border: 0px solid #54121C;
border-bottom: solid 1px #3A383D;
background-color: #000;
background-image: url('');
background-repeat: repeat;
letter-spacing: 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #36444D;
}
.subject a:hover {
color: #CFB79B;
}
::-moz-selection {
background: #000;
color: #36444D;
}
.datesubject {
background-color: transparent;
background-image: url();
background-repeat: repeat;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "tahoma", sans-serif;
font-size: 10px;
color: #787F89;
}
.comments {
font-family: tahoma, sans-serif;
font-size: 10px;
text-align: right;
background-color: transparent;
background-image: url('');
background-repeat: repeat;
font-weight: lighter;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border:0px;
padding: 5px;
background-position: bottom right;
}
.separator {
height: 25px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #A88D7A;
border-left: solid 0px #C3C0AD;
border-bottom: solid 0px #C3C0AD;
border-right: solid 0px #C3C0AD;
border-top: solid 0px #C3C0AD;
font-size: 10px;
font-weight: lighter;
padding:5px;
}
div.comments a:hover {
font-size: 10px;
font-weight: lighter;
color: #CFB79B;
border-left: solid 0px #0093FA;
border-bottom: solid 0px #0093FA;
border-right: solid 0px #0093FA;
border-top: solid 0px #0093FA;
background: ;
background-image: url('');
padding:5px;
}
.ljtags {
font-family: tahoma, sans-serif;
font-size: 10px;
color: #84807F;
margin-top: 13px;
font-weight: none;
text-transform: lowercase;
position: left;
}
.headerimage {
position: relative;
width: 750px;
height: 345px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i44.tinypic.com/21bp4k9.jpg');
background-repeat: no-repeat;
background-position: center;
border:0px;
border-left:2px solid #3A383D;
border-right:2px solid #3A383D;
}
Click Save Changes.
Notes: And you can add sidebar links by going to Links List and follow the directions there. To add normal text to the sidebar, go to Custom Options and then to Sidebar and modify the options there. Click Save Changes.
Rules:
Please do not edit the image or remove the credit from the image. Also, it'd be nice if you could provide a link back to joongie in the sidebar! :)
Requests
Break Out! requested by: faithful5
Yunho Checkmate requested by: chibinoyume
Darkness Eyes layout requested by: mkymks
Thumbnails:
TVXQ - Break Out!
Preview @ startbeing
Yunho - Checkmate
Preview @ jadelocket
TVXQ - Darkness Eyes
Preview @ breakyourtrick
How to Install
How to install this layout:
1.) If you're using SYSTEM 1 layouts, first go to Journal Display and change the Style System to S2. Click Save Changes.
2.) In the Journal Display, now go to Select a New Theme, and in the search box search Flexible Squares and click on any layout with that theme. Click Save Changes.
3.) Now go to Custom CSS. At that section, select "No" in each of the dropdown menus, and in the large section at the bottom that says, Custom stylesheet, paste in the following code (PICK THE LAYOUT):
TVXQ - Break Out!
Preview @ startbeing
Yunho - Checkmate
Preview @ jadelocket
TVXQ - Darkness Eyes
Preview @ breakyourtrick
TVXQ - Break Out! CSS
BODY {
margin-top: 0px;
background-color:#000;
background-image: url('');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
color: #A1AAB4;
font-family: "tahoma", sans-serif;
font-size: 10px;
border:0px;
border-left:20px solid black;
border-right:20px solid black;
border-bottom:10px solid black;
border-top:0px solid black;
scrollbar-arrow-color:#453E3C;
scrollbar-track-color:#000;
scrollbar-face-color:#000;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#453E3C;
scrollbar-shadow-color:#000;
}
textarea, input, select, option
{
background-color: #000 !important;
color: #6B6D61 !important; border:1px solid #453E3C !important;
font-family: "tahoma", sans-serif;
font-size: 10px; }
textarea {
width:300px;}
a, a:link, a:visited {
text-decoration: none;
color: #6F6759;
padding: 0px;
}
b, div#sidebar b, strong, div#sidebar strong {
color: #837961;
padding: 0px;
}
i, div#sidebar i, em, div#sidebar em {
color: #8B6160;
padding: 0px;
}
u, div#sidebar u {
color: #AFA58F;
padding: 0px;
}
a:hover {
color: #8A8783;
padding: 0px;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: tahoma;
}
#content {
width: 680px;
margin-left: auto; margin-right: auto;
background-color: #000;
background-image: url('');
background-repeat: repeat;
border: solid 0px #000;
padding: 10px;
text-align: right; }
#maincontent {
margin-top: 10px;
padding: 2px;
font-family: "tahoma", sans-serif;
font-size: 10px;
line-height: 15px;
background-color: #000;
background-image: url('');
background-repeat: repeat;
color:#9A6B75;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
margin-right:0px;
margin-left: 160px;
margin-top: 40px;
text-align: justify;
}
#header {
width: auto;
height: 32px;
margin: 0px;
padding: 5px;
color: #757C7B;
background-color: transparent;
background-image: url();
background-repeat: repeat;
font-weight: lighter;
font-family: times;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
}
#footer {
float: center;
height: 30px;
z-index: 100;
clear: both;
margin: 0;
padding: 6px 0px 6px 0px;
text-align: center;
font-size: 10px;
font-weight: lightest;
font-family: tahoma;
color: #63494C;
letter-spacing: 2px;
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
#sidebar {
padding-top: 10px;
margin-top: 52px;
background-color: transparent;
background-image: url();
background-repeat: repeat;
border-top: solid 0px #D8CB9B;
border-left: solid 0px #D8CB9B;
border-right: solid 0px #D8CB9B;
border-bottom: dashed 0px #4F5960;
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #99917D;
width: 150px;
float: left;
text-align: justify;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #84796A;
padding: 5px;
font-size: 11pt;
font-family: tahoma;
font-variant: small-caps;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
color: #9A9897;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #84796A;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
div#footer a:hover {
color: #9A9897;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
}
.title {
text-align: center;
color: #B7ADA0;
font-family: tahoma, sans-serif;
font-variant: small-caps;
font-size: 14pt;
letter-spacing: 1px;
text-transform: ;
padding: 3px;
}
.subtitle {
text-align: center;
color: #63494C;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
}
/* footer */
ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* SIDEBAR */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #694626
}
div#sidebar a:hover {
color:#52413E;
background-image: url('');
background-repeat: repeat;
text-decoration: none;
}
.defaultuserpic {
text-align:center;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 0px solid #FAC705;
padding:2px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #BAA4A7;
text-align: center;
}
.sbarbody {
padding: 0 2px 0 2px;
}
.sbarbody2 {
padding: 0 2px 0 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #453E3C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #766D5F;
border-width: 1px;
border-style: solid;
background-color:#000;
background-image: url();
background-repeat: repeat;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
list-style: none;
background: #000;
background-image: url();
background-repeat: repeat;
border-left: solid 0px #453E3C;
border-bottom: solid 0px #A096A5;
border-right: dashed 3px #453E3C;
border-top: solid 0px #57111C;
}
li.sbaritem:hover {
background: #000000;
border-right: dashed 3px #6F553A;
color:#757677;
}
li.sbartitle
{
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#766D5F;
border-top: solid #6D7D8E 0px;
border-left: dashed #6D7D8E 0px;
border-bottom: dashed #6D7D8E 0px;
border-right: solid #453E3C 3px;
font-weight: none;
font-family: tahoma, sans-serif;
font-size: 11px;
font-variant: small-caps;
background-color: #000;
background-image: url();
background-repeat: repeat;
letter-spacing: 1pt;
}
/* MAINCONTENT */
.subcontent {
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 2px;
background-color: #000;
background-image: url('');
background-repeat: repeat;
background-position: top right;
color:#6B7673;
font-family: "tahoma", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 10pt;
border:0px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: left;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 1px solid #000;
padding:2px;
}
.userpicfriends {
position: relative;
float: left;
color: #635562 !important;
background-color: #000 !important;
background-image: url();
background-repeat: repeat;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
border: 1px solid #000;
padding:2px;
}
.userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited
{color: #635562 !important;}
.date {
line-height: 200%;
top: 5px;
font-family: "tahoma", sans-serif;
font-variant: small-caps;
font-size: 16px;
color: #635562;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
border: 0px solid #E5D6B9;
border-bottom: 0px;
text-align:left;
letter-spacing: 0pt;
background-color: #000;
background-image: url('');
background-repeat: repeat;
}
.subject {
padding: 2px;
font-weight: none;
color:#63494C;
font-family: tahoma, sans-serif;
text-align:left;
font-size: 10px;
border: 0px solid #54121C;
border-right: solid 3px #453E3C;
background-color: #000;
background-image: url('');
background-repeat: repeat;
letter-spacing: 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #63494C;
}
.subject a:hover {
color: #A29A8C;
}
::-moz-selection {
background: #000;
color: #C48269;
}
.datesubject {
background-color: transparent;
background-image: url();
background-repeat: repeat;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "tahoma", sans-serif;
font-size: 10px;
color: #8FA29E;
}
.comments {
font-family: tahoma, sans-serif;
font-size: 10px;
text-align: right;
background-color: #000;
background-image: url('');
background-repeat: repeat;
font-weight: lighter;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border:0px;
padding: 5px;
background-position: bottom right;
}
.separator {
height: 25px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #63494C;
border-left: solid 0px #C3C0AD;
border-bottom: solid 0px #C3C0AD;
border-right: solid 3px #453E3C;
border-top: solid 0px #C3C0AD;
font-size: 10px;
font-weight: lighter;
padding:5px;
}
div.comments a:hover {
font-size: 10px;
font-weight: lighter;
color: #4A464A;
border-left: solid 0px #0093FA;
border-bottom: solid 0px #0093FA;
border-right: solid 3px #453E3C;
border-top: solid 0px #0093FA;
background: ;
background-image: url('');
padding:5px;
}
.ljtags {
font-family: tahoma, sans-serif;
font-size: 10px;
color: #918872;
margin-top: 13px;
font-weight: none;
text-transform: lowercase;
position: left;
}
.headerimage {
position: relative;
width: 700px;
height: 295px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i44.tinypic.com/nxrm2d.jpg');
background-repeat: no-repeat;
background-position: center;
}
Yunho - Checkmate CSS
BODY {
margin-top: 0px;
background-color:#000;
background-image: url('http://i41.tinypic.com/ay7i9t.jpg');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
color: #A1AAB4;
font-family: "tahoma", sans-serif;
font-size: 10px;
border:0px;
border-left:20px solid black;
border-right:20px solid black;
border-bottom:10px solid black;
border-top:0px solid black;
scrollbar-arrow-color:#A1AAB4;
scrollbar-track-color:#000;
scrollbar-face-color:#000;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#A1AAB4;
scrollbar-shadow-color:#000;
}
textarea, input, select, option
{
background-color: #000 !important;
color: #504D54 !important; border:1px solid #3A383D !important;
font-family: "tahoma", sans-serif;
font-size: 10px; }
textarea {
width:300px;}
a, a:link, a:visited {
text-decoration: none;
color: #B5CF78;
padding: 0px;
}
b, div#sidebar b, strong, div#sidebar strong {
color: #DAC991;
padding: 0px;
}
i, div#sidebar i, em, div#sidebar em {
color: #D3D6A9;
padding: 0px;
}
u, div#sidebar u {
color: #A1D3A0;
padding: 0px;
}
a:hover {
color: #B8B17D;
padding: 0px;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: tahoma;
}
#content {
width: 728px;
margin-left: auto; margin-right: auto;
background-color: #000;
background-image: url('');
background-repeat: repeat;
border:1px solid black;
border-bottom:5px solid black;
padding: 10px;
text-align: right; }
#maincontent {
margin-top: 10px;
padding: 2px;
font-family: "tahoma", sans-serif;
font-size: 10px;
line-height: 15px;
background-color: #A4BC82;
background-image: url('http://i42.tinypic.com/11j3wxw.jpg');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
background-repeat: repeat;
color:#9A6B75;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
margin-right:0px;
margin-left: 160px;
margin-top: 40px;
text-align: justify;
}
#header {
width: auto;
height: 32px;
margin: 0px;
padding: 5px;
color: #DCDF9F;
background-color: black;
background-image: url();
background-repeat: repeat;
font-weight: lighter;
font-family: times;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
}
#footer {
float: center;
height: 30px;
z-index: 100;
clear: both;
margin: 0;
padding: 6px 0px 6px 0px;
text-align: center;
font-size: 10px;
font-weight: lightest;
font-family: tahoma;
color: #757C7B;
letter-spacing: 2px;
background-color: black;
background-image: url();
background-repeat: repeat;
}
#sidebar {
padding-top: 10px;
margin-top: 52px;
background-color: #000;
background-image: url();
background-repeat: repeat;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 3px #000;
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #E8E2B5;
width: 150px;
float: left;
text-align: justify;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #9CB379;
padding: 5px;
font-size: 12pt;
font-family: georgia;
font-variant: small-caps;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
color: #ACD2A2;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #9CB379;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
div#footer a:hover {
color: #ACD2A2;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
}
.title {
text-align: center;
color: #CBD7A7;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 14pt;
letter-spacing: 1px;
text-transform: ;
padding: 3px;
}
.subtitle {
text-align: center;
color: #BDB589;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
}
/* footer */
ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* SIDEBAR */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #9ACAA8
}
div#sidebar a:hover {
color:#CBC69F;
background-image: url('');
background-repeat: repeat;
text-decoration: none;
}
.defaultuserpic {
text-align:center;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 0px solid #FAC705;
padding:2px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #CBC69F;
text-align: center;
}
.sbarbody {
padding: 0 2px 0 2px;
}
.sbarbody2 {
padding: 0 2px 0 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #90D09D;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #D4B680;
border-width: 1px;
border-style: solid;
background-color:#000;
background-image: url();
background-repeat: repeat;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
list-style: none;
background: #000;
background-image: url('');
background-repeat: repeat;
border-left: solid 4px #9FBC84;
border-bottom: solid 1px #353948;
border-right: dashed 0px #E2E4B6;
border-top: solid 0px #57111C;
}
li.sbaritem:hover {
background: #000000;
border-left: solid 4px #8EC29A;
color:#E8E3BA;
}
li.sbartitle
{text-align: center;
color: #83AA71;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
border-top: solid #6D7D8E 0px;
border-left: dashed #6D7D8E 0px;
border-bottom: solid #D0CFA2 1px;
border-right: dashed #6D7D8E 0px;
font-weight: none;
background-color: #000;
background-image: url();
background-repeat: repeat;
letter-spacing: 1pt;
}
/* MAINCONTENT */
.subcontent {
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
.entry {
margin: 2px 2px 2px 2px;
padding: 2px;
background-color: #000;
background-image: url('');
background-repeat: no-repeat;
background-position: bottom left;
color:#D4B680;
font-family: "tahoma", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 10pt;
border:1px solid black;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: left;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 1px solid #000;
padding:2px;
}
.userpicfriends {
position: relative;
float: left;
color: #67683E !important;
background-color: #000 !important;
background-image: url();
background-repeat: repeat;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
border: 1px solid #283140;
padding:2px;
}
.userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited
{color: #847787 !important;}
.date {
line-height: 200%;
top: 5px;
font-family: "tahoma", sans-serif;
font-variant: small-caps;
font-size: 16px;
color: #67683E;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
border: 0px solid #E5D6B9;
border-bottom: 0px;
text-align:left;
letter-spacing: 0pt;
background-color: #000;
background-image: url('');
background-repeat: repeat;
}
.subject {
padding: 2px;
font-weight: none;
color:#95C7A4;
font-family: tahoma, sans-serif;
text-align:left;
font-size: 12px;
border: 0px solid #54121C;
border-bottom: solid 0px #3A383D;
background-color: #000;
background-image: url('');
background-repeat: repeat;
letter-spacing: 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #D0CAAA;
}
.subject a:hover {
color: #9DB68E;
}
::-moz-selection {
background: #000;
color: #DFDAB0;
}
.datesubject {
background-color: transparent;
background-image: url();
background-repeat: repeat;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "tahoma", sans-serif;
font-size: 10px;
color: #DFDAB0;
}
.comments {
font-family: tahoma, sans-serif;
font-size: 10px;
text-align: right;
background-color: #000;
background-image: url('');
background-repeat: repeat;
font-weight: lighter;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border:0px;
padding: 5px;
background-position: bottom right;
}
.separator {
height: 25px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #B2C7A0;
border-left: solid 0px #C3C0AD;
border-bottom: solid 0px #C3C0AD;
border-right: solid 0px #C3C0AD;
border-top: solid 0px #C3C0AD;
font-size: 10px;
font-weight: lighter;
padding:5px;
}
div.comments a:hover {
font-size: 10px;
font-weight: lighter;
color: #A4BF8A;
border-left: solid 0px #0093FA;
border-bottom: solid 0px #0093FA;
border-right: solid 0px #0093FA;
border-top: solid 0px #0093FA;
background: ;
background-image: url('');
padding:5px;
}
.ljtags {
font-family: tahoma, sans-serif;
font-size: 10px;
color: #B2C7A0;
margin-top: 13px;
font-weight: none;
text-transform: lowercase;
position: left;
}
.headerimage {
position: relative;
width: 750px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i43.tinypic.com/1zg9gdj.jpg');
background-repeat: no-repeat;
background-position: center;
border:0px;
}
TVXQ - Darkness Eyes CSS
BODY {
margin-top: 0px;
background-color:#000;
background-image: url('http://i43.tinypic.com/142y5xw.jpg');
background-repeat: repeat;
background-attachment: fixed;
background-position: top-left;
text-align: center;
color: #A1AAB4;
font-family: "tahoma", sans-serif;
font-size: 10px;
border:0px;
border-left:20px solid black;
border-right:20px solid black;
border-bottom:10px solid black;
border-top:0px solid black;
scrollbar-arrow-color:#A1AAB4;
scrollbar-track-color:#000;
scrollbar-face-color:#000;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#A1AAB4;
scrollbar-shadow-color:#000;
}
textarea, input, select, option
{
background-color: #000 !important;
color: #504D54 !important; border:1px solid #3A383D !important;
font-family: "tahoma", sans-serif;
font-size: 10px; }
textarea {
width:300px;}
a, a:link, a:visited {
text-decoration: none;
color: #A88D7A;
padding: 0px;
}
b, div#sidebar b, strong, div#sidebar strong {
color: #4B5064;
padding: 0px;
}
i, div#sidebar i, em, div#sidebar em {
color: #7A505A;
padding: 0px;
}
u, div#sidebar u {
color: #B3958A;
padding: 0px;
}
a:hover {
color: #CFB79B;
padding: 0px;
}
p, td, blockquote {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: tahoma;
}
#content {
width: 730px;
margin-left: auto; margin-right: auto;
background-color: #0F111E;
background-image: url('');
background-repeat: repeat;
border:0px;
border-left:2px solid #3A383D;
border-right:2px solid #3A383D;
padding: 10px;
text-align: right; }
#maincontent {
margin-top: 10px;
padding: 2px;
font-family: "tahoma", sans-serif;
font-size: 10px;
line-height: 15px;
background-color: transparent;
background-image: url('');
background-repeat: repeat;
color:#9A6B75;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
margin-right:0px;
margin-left: 160px;
margin-top: 40px;
text-align: justify;
}
#header {
width: auto;
height: 32px;
margin: 0px;
padding: 5px;
color: #757C7B;
background-color: transparent;
background-image: url();
background-repeat: repeat;
font-weight: lighter;
font-family: times;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
}
#footer {
float: center;
height: 30px;
z-index: 100;
clear: both;
margin: 0;
padding: 6px 0px 6px 0px;
text-align: center;
font-size: 10px;
font-weight: lightest;
font-family: tahoma;
color: #757C7B;
letter-spacing: 2px;
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
#sidebar {
padding-top: 10px;
margin-top: 52px;
background-color: #000;
background-image: url();
background-repeat: repeat;
border-top: solid 0px #D8CB9B;
border-left: solid 0px #D8CB9B;
border-right: solid 0px #D8CB9B;
border-bottom: dashed 1px #4F5960;
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #B3958A;
width: 150px;
float: left;
text-align: justify;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #2C3C4B;
padding: 5px;
font-size: 12pt;
font-family: georgia;
font-variant: small-caps;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
color: #595F5F;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #2C3C4B;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
div#footer a:hover {
color: #595F5F;
padding: 5px;
font-weight: normal;
text-decoration; none;
text-transform: none;
}
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
}
.title {
text-align: center;
color: #6E727D;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 14pt;
letter-spacing: 1px;
text-transform: ;
padding: 3px;
}
.subtitle {
text-align: center;
color: #B09783;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
}
/* footer */
ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* SIDEBAR */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 9px;
line-height: 10pt;
font-family: "tahoma", sans-serif;
color: #464D6A
}
div#sidebar a:hover {
color:#BAA4A7;
background-image: url('');
background-repeat: repeat;
text-decoration: none;
}
.defaultuserpic {
text-align:center;
background-color: #000;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 0px solid #FAC705;
padding:2px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #BAA4A7;
text-align: center;
}
.sbarbody {
padding: 0 2px 0 2px;
}
.sbarbody2 {
padding: 0 2px 0 2px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #464D6A;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #000;
border-width: 1px;
border-style: solid;
background-color:#373B47;
background-image: url();
background-repeat: repeat;
text-align: center;
font-family: "tahoma", sans-serif;
font-size: 10px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
list-style: none;
background: #000;
background-image: url('http://i41.tinypic.com/2yjvhv8.jpg');
background-repeat: repeat;
border-left: solid 4px #353948;
border-bottom: solid 1px #353948;
border-right: dashed 0px #E2E4B6;
border-top: solid 0px #57111C;
}
li.sbaritem:hover {
background: #000000;
border-left: solid 4px #373B47;
color:#DDCCBB;
}
li.sbartitle
{text-align: center;
color: #B09783;
font-family: georgia, sans-serif;
font-variant: small-caps;
font-size: 8pt;
letter-spacing: 2pt;
margin-bottom:3px;
text-transform: lowercase;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
border-top: solid #6D7D8E 0px;
border-left: dashed #6D7D8E 0px;
border-bottom: dashed #6D7D8E 1px;
border-right: dashed #6D7D8E 0px;
font-weight: none;
background-color: #000;
background-image: url();
background-repeat: repeat;
letter-spacing: 1pt;
}
/* MAINCONTENT */
.subcontent {
background-color: transparent;
background-image: url();
background-repeat: repeat;
}
.entry {
margin: 0px 0px 0px 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 25px;
padding-left: 2px;
background-color: transparent;
background-image: url('http://i40.tinypic.com/232rg1.jpg');
background-repeat: no-repeat;
background-position: bottom left;
color:#9596A4;
font-family: "tahoma", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 10pt;
border:0px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: left;
background-color: #283140;
background-image: url();
background-repeat: repeat;
margin-right: 0px;
margin-left: 0px;
z-index: 15;
border: 1px solid #283140;
padding:2px;
}
.userpicfriends {
position: relative;
float: left;
color: #C5B6A6 !important;
background-color: #283140 !important;
background-image: url();
background-repeat: repeat;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
border: 1px solid #283140;
padding:2px;
}
.userpicfriends a, .userpicfriends a:link, .userpicfriends a:visited
{color: #847787 !important;}
.date {
line-height: 200%;
top: 5px;
font-family: "tahoma", sans-serif;
font-variant: small-caps;
font-size: 16px;
color: #504D54;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
border: 0px solid #E5D6B9;
border-bottom: 0px;
text-align:left;
letter-spacing: 0pt;
background-color: #000;
background-image: url('');
background-repeat: repeat;
}
.subject {
padding: 2px;
font-weight: none;
color:#36444D;
font-family: tahoma, sans-serif;
text-align:left;
font-size: 12px;
border: 0px solid #54121C;
border-bottom: solid 1px #3A383D;
background-color: #000;
background-image: url('');
background-repeat: repeat;
letter-spacing: 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #36444D;
}
.subject a:hover {
color: #CFB79B;
}
::-moz-selection {
background: #000;
color: #36444D;
}
.datesubject {
background-color: transparent;
background-image: url();
background-repeat: repeat;
padding: 2px;
}
.currents, .currentmood, .currentmusic {
font-family: "tahoma", sans-serif;
font-size: 10px;
color: #787F89;
}
.comments {
font-family: tahoma, sans-serif;
font-size: 10px;
text-align: right;
background-color: transparent;
background-image: url('');
background-repeat: repeat;
font-weight: lighter;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border:0px;
padding: 5px;
background-position: bottom right;
}
.separator {
height: 25px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #A88D7A;
border-left: solid 0px #C3C0AD;
border-bottom: solid 0px #C3C0AD;
border-right: solid 0px #C3C0AD;
border-top: solid 0px #C3C0AD;
font-size: 10px;
font-weight: lighter;
padding:5px;
}
div.comments a:hover {
font-size: 10px;
font-weight: lighter;
color: #CFB79B;
border-left: solid 0px #0093FA;
border-bottom: solid 0px #0093FA;
border-right: solid 0px #0093FA;
border-top: solid 0px #0093FA;
background: ;
background-image: url('');
padding:5px;
}
.ljtags {
font-family: tahoma, sans-serif;
font-size: 10px;
color: #84807F;
margin-top: 13px;
font-weight: none;
text-transform: lowercase;
position: left;
}
.headerimage {
position: relative;
width: 750px;
height: 345px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i44.tinypic.com/21bp4k9.jpg');
background-repeat: no-repeat;
background-position: center;
border:0px;
border-left:2px solid #3A383D;
border-right:2px solid #3A383D;
}
Click Save Changes.
Notes: And you can add sidebar links by going to Links List and follow the directions there. To add normal text to the sidebar, go to Custom Options and then to Sidebar and modify the options there. Click Save Changes.
Rules:
Please do not edit the image or remove the credit from the image. Also, it'd be nice if you could provide a link back to joongie in the sidebar! :)
Requests
Break Out! requested by: faithful5
Yunho Checkmate requested by: chibinoyume
Darkness Eyes layout requested by: mkymks