I, I was blind
Sorry, this post is in only engrish language.
I made one Layout with 6 different version:
01 - Lee Taemin
02 - Kim Jonghyun ; Lee Taemin
03 - Kim Jonghyun ; Lee Taemin
04 - Kim Jonghyun ; Lee Taemin
05 - Lee Taemin
06 - Lee Taemin
Resources and credits over there.
Preview:
Please don't remove my credit if you take it.
If you want a large preview: There.
/*-- image and re-organized by ReallyStoryGirl --*/
/*-- credits and resources: http://reallystorygirl.livejournal.com/26592.html --*/
/*--------------------------------------------------------------------- Feeling Electric
by feel_the_fire @
whisperingicons ------------------------------------------------------------------------*/
body { background-color: #000000; text-align: center; color: #333333; font-family: "arial", sans-serif; font-size: 14px; font-spacing: 4px; margin: 70px 0px 20px 0px; }
a, a:link, a:visited { color: #CCCCCC; text-decoration: none; }
a:hover { color: #CCCCCC; text-decoration: none; }
blockquote { border-bottom:#CCCCCC 2px solid; padding:15px; font-size: 14px; }
code, kbd, pre, tt { font-family: monospace; }
/*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/
#content { width: 700px; margin:auto; }
#maincontent { font-family: "arial", sans-serif; font-size: 14px; letter-spacing: 3px; color: #333333; text-align: left; }
#sidebar { margin:30; float: top; padding:9px 0; min-height:5px; background-color: #333333; font-size: 10pt; font-family:arial; color: #CCCCCC; width: 100%; text-align: justify;
}
/*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/
.headerimage { /* for formatting header image */
position: relative;
width: 900px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i32.tinypic.com/i6xb9y.jpg');
background-repeat: no-repeat;
}
/*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #666666; font-family: arial; font-size: 8px; letter-spacing: 3px; }
div#header a:hover, div#footer a:hover { color: #cccccc; text-decoration: none;
}
.title { font-family: arial, sans-serif; font-size: 50px; text-transform: lowercase; letter-spacing:1px; font-weight: bold; color: #c2e44c;
display: none;
}
.subtitle { font family: arial, san serif; font-size:22px; text-transform: uppercase; letter spacing: 10px, font-weight: normal; color: #bbbbbb;
}
/*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader { padding: 10px; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif;
}
ul.navheader li { display: inline; padding: 0 3px 0 3px; font-color: #CCCCCC; list-style: none; }
/*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/
.subcontent { }
.entry { padding: 11px; background-color: #333333; color: #bbbbbb; font-family: "arial", sans-serif; font-size: 14px; text-transform: lowercase; letter-spacing: 1px; text-align: justify; letter-spacing: 0px; margin: 30px 30px 20px 40px; }
entry_text { margin-bottom: 20px; }
.userpic, .userpicfriends { position: relative; float: left; background-color: transparent !important; padding: 1px; margin: 10px 0px 0px -100px; z-index: 15; text-align: center; }
.userpic img, .userpicfriends img{ height: 100px; width: 100px; }
.userpic img:hover, .userpicfriends img:hover{ opacity: 1.0; }
.userpic a font, .userpicfriends a font { color: #c6d6e1; }
.date { font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 4px; padding: 2px; color: #8c8c8c; font-family: "arial", sans-serif; font-size: 9px; }
.subject { font-weight: bold; text-align: center; letter-spacing: -1px; padding: 2px; color: #8c8c8c; font-family: "arial", sans-serif; font-size: 20px;
text-transform: lowercase; }
.subject a, .subject a:link, .subject a:visited { color: #d9d9d9; }
.subject a:hover { color: #d9d9d9; }
.datesubject { padding: 5px; }
.entry ul li { padding-left: 5px; margin-left: 15px; }
.entry ol li { padding-left: 5px; margin-left: 15px; }
/*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/
.currents { font-family: "verdana", sans-serif; font-size: 12px; text-transform: lowercase; letter-spacing: -1px; }
.currents strong { font-weight: normal; }
.ljtags {
margin-top: 20px; font-family: "verdana", sans-serif; font-size: 12px;
text-transform: lowercase; letter-spacing: -1px; }
/*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/
.comments { font-family: "arial", sans-serif; font-size: 11px; text-align: center; text-transform: uppercase; padding: 15px 5px 0px 5px; position: relative; top: 10px; color: #CCCCCC; font-weight: bold; }
div.comments a, div.comments a:link, div.comments a:visited{ color: #bbbbbb; font-size: 20px; }
div.comments a:hover { color: #CCCCCC; text-decoration: 1px, #bbbbbb; }
/*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/
.separator{ /* for formatting separators between entries */ height: 35px; }
/*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/
.defaultuserpic { display: none; }
.sbarheader { padding: 0px 5px 0px 5px; }
.sbarbody { padding: 0px 5px 0px 5px; }
.sbarbody2 { padding: 0 15px 0 15px;
}
/*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/
table.calendar { display: none; }
.sbarcalendar { display: none;; }
.sbarcalendarposts { display: none; }
/*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/
ul.sbarlist {padding: 0; margin-left: 0; list-style: none; text-align:center
}
li.sbaritem { display: inline-block; width: 100px; padding: 5px; margin-bottom: 2px; letter-spacing: 3px; font-family: "arial", sans-serif; color: #777; list-style: none; text-align:center; text-transform: lowercase; }
li.sbartitle { display:none;
}
/*---------------------------------------------------- footer ----------------------------------------------------------------*/
#footer { font family: arial, san serif; font-size:25px; text-transform: uppercase; letter spacing: 10px, font-weight: normal; color: #bbbbbb; }
ul.navfooter{ padding: 20px 0; margin-bottom: -14px; background-color:#000000;
}
ul.navfooter li { display: inline; margin: 0 5px 0 5px; }
.clearfoot { clear: both; }
/*---------------------------------------------------- Archive Pages ----------------------------------------------------------------*/
ul.year { text-align: center; padding-bottom: 40px; }
ul.year li { display: inline; }
table.yeartable { margin-left: auto; margin-right: auto; padding: 5px; }
table.yeartable td.yeardate, table.yeartable td.yearday { border: 2px solid #e8e8e8; }
table.yeartable td.yearday { background-color: #ffffff; border: 2px solid #e8e8e8; text-align: center; }
td.yearmonth { border-style: none; }
/*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/
.datesubjectcomment { background-color: #999999; padding: 5px; margin-top: 20px; }
.userpiccomment { position: relative; top: -30px; left: 0px; margin: 10px 10px -20px 10px; z-index: 15;
float: left;
height: auto; width: auto; border: 10px solid #e8e8e8; }
.box { padding: 10px; clear: left; }
input, textarea {
background-color: #666666; color: #bbbbbb; border: 1px double #e8e8e8; padding: 3px; font-family: courier new; font-size: 13px; letter-spacing: -1px; }
textarea.textbox { width: 100% !important; }
.reply {
position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: courier new, font-size: 9px; letter-spacing: -1px;
background-color: #ffffff; color: #bbbbbb; }
.replytosubject { font-weight: bold; }
.commentreply { position: relative; margin: 10px; font-size: 9px; font-family: courier new, letter-spacing: -1px;
color: #CCCCCC; }
.commentbox {
border-left: 10px solid #CCCCCC; padding: 10px; margin: -5px; margin-top: 2px; background-color: #000000; }
.commentboxpartial { padding: 10px; margin: 10px; background-color: #666666; border: 2px single #e8e8e8; }
.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%; }
.skiplinks { text-align: center; color: #cccccc; text-transform: uppercase; padding: 5px; }
form#qrform table { border-width: 0px !important; }
#lj_controlstrip td{
font: normal 9px "Arial", sans-serif;
color: #bbbbbb;
background:#000000;
border-left:0;
border-top:0;
border-right:0;
}
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font-size:9px;
text-transform:uppercase;
font-family: arial, sans-serif;
letter-spacing: 1px;
color: #cccccc;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i42.tinypic.com/27zg39j.png);
padding: 16px 16px 0px 2px !important;
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i41.tinypic.com/2ni2ovn.png)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i42.tinypic.com/27zg39j.png)!important;
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px!important;
}
You need to make sure nothing except the blurb is showing in that BLURB SECTION on your sidebar page.
The code for the blurb section:
SECTION NAME HERE
write whatever you'd like.
SECTION NAME HERE
write whatever you'd like.
• LINKNAME!
• LINKNAME!
• LINKNAME!
• LINKNAME!
IF YOU WANT TO CHANGE THE HEADER WITH A DIFFERENT VERSION YOU NEED TO FIND THIS IN YOUR CODE'S LAYOUT:
.headerimage { /* for formatting header image */
position: relative;
width: 900px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i32.tinypic.com/i6xb9y.jpg');
background-repeat: no-repeat;
}
THEN CHANGE THE URL WITH THE NEW HEADER'S URL. PLEASE IF YOU CAN, RE-UPLOAD THE IMAGE BEFORE USING IT.
CLICK ON THE IMAGE FOR VIEW THE ORIGINAL SIZE.
01 - Lee Taemin
02 - Kim Jonghyun ; Lee Taemin
03 - Kim Jonghyun ; Lee Taemin
04 - Kim Jonghyun ; Lee Taemin
05 - Lee Taemin
06 - Lee Taemin
Please don't forget if you take this layout to put this in everywhere you want for credit me for the work:
Layout by reallystorygirl
If you have any problem with the code, please contact me.
If you want a simple tutorial: How to install this layout.
Please comment if you take it.
I made one Layout with 6 different version:
01 - Lee Taemin
02 - Kim Jonghyun ; Lee Taemin
03 - Kim Jonghyun ; Lee Taemin
04 - Kim Jonghyun ; Lee Taemin
05 - Lee Taemin
06 - Lee Taemin
Resources and credits over there.
Preview:
Please don't remove my credit if you take it.
If you want a large preview: There.
/*-- image and re-organized by ReallyStoryGirl --*/
/*-- credits and resources: http://reallystorygirl.livejournal.com/26592.html --*/
/*--------------------------------------------------------------------- Feeling Electric
by feel_the_fire @
whisperingicons ------------------------------------------------------------------------*/
body { background-color: #000000; text-align: center; color: #333333; font-family: "arial", sans-serif; font-size: 14px; font-spacing: 4px; margin: 70px 0px 20px 0px; }
a, a:link, a:visited { color: #CCCCCC; text-decoration: none; }
a:hover { color: #CCCCCC; text-decoration: none; }
blockquote { border-bottom:#CCCCCC 2px solid; padding:15px; font-size: 14px; }
code, kbd, pre, tt { font-family: monospace; }
/*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/
#content { width: 700px; margin:auto; }
#maincontent { font-family: "arial", sans-serif; font-size: 14px; letter-spacing: 3px; color: #333333; text-align: left; }
#sidebar { margin:30; float: top; padding:9px 0; min-height:5px; background-color: #333333; font-size: 10pt; font-family:arial; color: #CCCCCC; width: 100%; text-align: justify;
}
/*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/
.headerimage { /* for formatting header image */
position: relative;
width: 900px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i32.tinypic.com/i6xb9y.jpg');
background-repeat: no-repeat;
}
/*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #666666; font-family: arial; font-size: 8px; letter-spacing: 3px; }
div#header a:hover, div#footer a:hover { color: #cccccc; text-decoration: none;
}
.title { font-family: arial, sans-serif; font-size: 50px; text-transform: lowercase; letter-spacing:1px; font-weight: bold; color: #c2e44c;
display: none;
}
.subtitle { font family: arial, san serif; font-size:22px; text-transform: uppercase; letter spacing: 10px, font-weight: normal; color: #bbbbbb;
}
/*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader { padding: 10px; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif;
}
ul.navheader li { display: inline; padding: 0 3px 0 3px; font-color: #CCCCCC; list-style: none; }
/*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/
.subcontent { }
.entry { padding: 11px; background-color: #333333; color: #bbbbbb; font-family: "arial", sans-serif; font-size: 14px; text-transform: lowercase; letter-spacing: 1px; text-align: justify; letter-spacing: 0px; margin: 30px 30px 20px 40px; }
entry_text { margin-bottom: 20px; }
.userpic, .userpicfriends { position: relative; float: left; background-color: transparent !important; padding: 1px; margin: 10px 0px 0px -100px; z-index: 15; text-align: center; }
.userpic img, .userpicfriends img{ height: 100px; width: 100px; }
.userpic img:hover, .userpicfriends img:hover{ opacity: 1.0; }
.userpic a font, .userpicfriends a font { color: #c6d6e1; }
.date { font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: 4px; padding: 2px; color: #8c8c8c; font-family: "arial", sans-serif; font-size: 9px; }
.subject { font-weight: bold; text-align: center; letter-spacing: -1px; padding: 2px; color: #8c8c8c; font-family: "arial", sans-serif; font-size: 20px;
text-transform: lowercase; }
.subject a, .subject a:link, .subject a:visited { color: #d9d9d9; }
.subject a:hover { color: #d9d9d9; }
.datesubject { padding: 5px; }
.entry ul li { padding-left: 5px; margin-left: 15px; }
.entry ol li { padding-left: 5px; margin-left: 15px; }
/*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/
.currents { font-family: "verdana", sans-serif; font-size: 12px; text-transform: lowercase; letter-spacing: -1px; }
.currents strong { font-weight: normal; }
.ljtags {
margin-top: 20px; font-family: "verdana", sans-serif; font-size: 12px;
text-transform: lowercase; letter-spacing: -1px; }
/*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/
.comments { font-family: "arial", sans-serif; font-size: 11px; text-align: center; text-transform: uppercase; padding: 15px 5px 0px 5px; position: relative; top: 10px; color: #CCCCCC; font-weight: bold; }
div.comments a, div.comments a:link, div.comments a:visited{ color: #bbbbbb; font-size: 20px; }
div.comments a:hover { color: #CCCCCC; text-decoration: 1px, #bbbbbb; }
/*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/
.separator{ /* for formatting separators between entries */ height: 35px; }
/*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/
.defaultuserpic { display: none; }
.sbarheader { padding: 0px 5px 0px 5px; }
.sbarbody { padding: 0px 5px 0px 5px; }
.sbarbody2 { padding: 0 15px 0 15px;
}
/*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/
table.calendar { display: none; }
.sbarcalendar { display: none;; }
.sbarcalendarposts { display: none; }
/*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/
ul.sbarlist {padding: 0; margin-left: 0; list-style: none; text-align:center
}
li.sbaritem { display: inline-block; width: 100px; padding: 5px; margin-bottom: 2px; letter-spacing: 3px; font-family: "arial", sans-serif; color: #777; list-style: none; text-align:center; text-transform: lowercase; }
li.sbartitle { display:none;
}
/*---------------------------------------------------- footer ----------------------------------------------------------------*/
#footer { font family: arial, san serif; font-size:25px; text-transform: uppercase; letter spacing: 10px, font-weight: normal; color: #bbbbbb; }
ul.navfooter{ padding: 20px 0; margin-bottom: -14px; background-color:#000000;
}
ul.navfooter li { display: inline; margin: 0 5px 0 5px; }
.clearfoot { clear: both; }
/*---------------------------------------------------- Archive Pages ----------------------------------------------------------------*/
ul.year { text-align: center; padding-bottom: 40px; }
ul.year li { display: inline; }
table.yeartable { margin-left: auto; margin-right: auto; padding: 5px; }
table.yeartable td.yeardate, table.yeartable td.yearday { border: 2px solid #e8e8e8; }
table.yeartable td.yearday { background-color: #ffffff; border: 2px solid #e8e8e8; text-align: center; }
td.yearmonth { border-style: none; }
/*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/
.datesubjectcomment { background-color: #999999; padding: 5px; margin-top: 20px; }
.userpiccomment { position: relative; top: -30px; left: 0px; margin: 10px 10px -20px 10px; z-index: 15;
float: left;
height: auto; width: auto; border: 10px solid #e8e8e8; }
.box { padding: 10px; clear: left; }
input, textarea {
background-color: #666666; color: #bbbbbb; border: 1px double #e8e8e8; padding: 3px; font-family: courier new; font-size: 13px; letter-spacing: -1px; }
textarea.textbox { width: 100% !important; }
.reply {
position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: courier new, font-size: 9px; letter-spacing: -1px;
background-color: #ffffff; color: #bbbbbb; }
.replytosubject { font-weight: bold; }
.commentreply { position: relative; margin: 10px; font-size: 9px; font-family: courier new, letter-spacing: -1px;
color: #CCCCCC; }
.commentbox {
border-left: 10px solid #CCCCCC; padding: 10px; margin: -5px; margin-top: 2px; background-color: #000000; }
.commentboxpartial { padding: 10px; margin: 10px; background-color: #666666; border: 2px single #e8e8e8; }
.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%; }
.skiplinks { text-align: center; color: #cccccc; text-transform: uppercase; padding: 5px; }
form#qrform table { border-width: 0px !important; }
#lj_controlstrip td{
font: normal 9px "Arial", sans-serif;
color: #bbbbbb;
background:#000000;
border-left:0;
border-top:0;
border-right:0;
}
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font-size:9px;
text-transform:uppercase;
font-family: arial, sans-serif;
letter-spacing: 1px;
color: #cccccc;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i42.tinypic.com/27zg39j.png);
;){kind=link}
padding: 16px 16px 0px 2px !important;
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i41.tinypic.com/2ni2ovn.png)!important;
!important;){kind=link}
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px;
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i42.tinypic.com/27zg39j.png)!important;
!important;){kind=link}
background-repeat: no-repeat!important;
padding: 16px 16px 0 2px!important;
}
You need to make sure nothing except the blurb is showing in that BLURB SECTION on your sidebar page.
The code for the blurb section:
SECTION NAME HERE
write whatever you'd like.
SECTION NAME HERE
write whatever you'd like.
• LINKNAME!
• LINKNAME!
• LINKNAME!
• LINKNAME!
IF YOU WANT TO CHANGE THE HEADER WITH A DIFFERENT VERSION YOU NEED TO FIND THIS IN YOUR CODE'S LAYOUT:
.headerimage { /* for formatting header image */
position: relative;
width: 900px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i32.tinypic.com/i6xb9y.jpg');
background-repeat: no-repeat;
}
THEN CHANGE THE URL WITH THE NEW HEADER'S URL. PLEASE IF YOU CAN, RE-UPLOAD THE IMAGE BEFORE USING IT.
CLICK ON THE IMAGE FOR VIEW THE ORIGINAL SIZE.
01 - Lee Taemin
02 - Kim Jonghyun ; Lee Taemin
03 - Kim Jonghyun ; Lee Taemin
04 - Kim Jonghyun ; Lee Taemin
05 - Lee Taemin
06 - Lee Taemin
Please don't forget if you take this layout to put this in everywhere you want for credit me for the work:
Layout by reallystorygirl
If you have any problem with the code, please contact me.
If you want a simple tutorial: How to install this layout.
Please comment if you take it.