DBSK layout...Extra Header

[heaven_smiles]

Another layout by yours truly, lol

Preview





Honestly, I debated whether to give this layout out. I liked it so much that I wanted it for myself. The DBSK header, I really like and an extra Yoochun header for those that want that instead. I might edit this later on and add other member's headers.




Live Preview

/*--------------------------------------------------- wild tigers i have known // by milou_veronica flexible squares layout (basic, plus and paid) -----------------------------------------------------*/ /*--------------------------------------------------- Header Image by Heaven_smiles. Don't edit the header and please credit if necessary. -----------------------------------------------------*/ .headerimage { position: relative; background: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/lj%20layouts/dbskheader.png); width: 760px; height: 285px; background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-bottom: 0px; } /*--------------------------------------------------- WHOLE PAGE -----------------------------------------------------*/ body { padding-top: 20px; background: url(http://XXX); background-color: #3f3f3f; text-align: center; color: #888888; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; margin: 0px;} a, a:link, a:visited { color: #666666; text-decoration: none;} a:hover {color: #BFBFBF;text-decoration: none;} b, u { color: #555555;} i, s { color: #999999;} p, td {font-size: 11px;} blockquote { background-color:#ffffff; padding:5px; border-left: 4px #cccccc solid; color:#9a9a9a; font-family: Arial, Tahoma, "Verdana", sans-serif;} code { background-color: #fafafa; display:block; color: #666666; padding:5px; border:1px dashed #cccccc; font-size: 12px; font-family: Arial, Tahoma, "Verdana", sans-serif;} kbd, pre, tt {font-family: monospace;} textarea { background-color: #fafafa; } /*--------------------------------------------------------------------- General ------------------------------------------------------------------------*/ #content{ width: 760px; margin-left: auto; margin-right: auto; background-color: #ffffff; border-width: 0px; padding: 0px;} #maincontent { margin-top: 15px; text-align: justify; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; color: #888888; border-left: 0px; margin-left: 170px; margin-right: 10px;} #sidebar { padding-top: 15px; margin-top: 15px; margin-left: 25px background-color: #ffffff; border: 0px; font-size: 11px; font-family: Arial, Tahoma, "Verdana", sans-serif; color: #888888; width: 180px; float: left; text-align: left;} /*----------------------------------------------------------------------------- Header -------------------------------------------------------------------------------------->>>>> change the colour of the header here --------------------------------------------------------------------------------*/ #header { width: 100%; padding: 5px 0px 5px 0px; margin: 0px; text-align: right; font-family: "Georgia", Serif, Tahoma, "Verdana", sans-serif; font-size: 16px; font-weight: normal; font-style: italic; letter-spacing: -1px; border-width: 0px; background-color: #f3f3f3; text-transform: lowercase; color: #888888;} ul.navheader{ padding: 5px 5px 5px 10px; margin: 0px; } ul.navheader li {display: inline;} div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{ margin-left: 5px; margin-right: 5px; padding: 5px 5px 5px 20px; background: url("") no-repeat; background-position: center left;} /* -------------------------------------------------------------------------------------->>>>>CHANGE THE HOVER IMAGE HERE: just replace the url, and increase padding if necessary */ div#header a:hover, div#footer a:hover { color: #BFBFBF; text-decoration: none; margin-left: 5px; margin-right: 5px; padding: 5px 5px 5px 20px; background: url("http://i27.tinypic.com/119t9ae.png") no-repeat; background-position: center left; } div#header li.view, div#footer li.viewing { margin-left: 5px; margin-right: 5px; padding: 5px 5px 5px 20px; background: url("") no-repeat; background-position: center left; } /*----------------------------------------------------------------------------- TITLE AND SUBTITLE : to show, remove the display: none; from both parts of the code --------------------------------------------------------------------------------*/ .title { display: none; font-style: italic; font-family: "Georgia", Serif, Tahoma, "Verdana", sans-serif; text-transform: lowercase; font-size: 26px; color: #666666; text-align: left; letter-spacing: -1px; padding-left: 10px;} .subtitle{ display: none; font-style: italic; font-family: "Georgia", Serif, Tahoma, "Verdana", sans-serif; text-transform: lowercase font-size: 12px; color: #BFBFBF; text-align: left; letter-spacing: -1px; padding-left: 10px;} /*----------------------------------------------------------------------------- ENTRIES -------------------------------------------------------------------------------------->>>>> general ------------------------------------------------------------------------*/ .subcontent {} .date { text-transform: uppercase; color: #dddddd; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; padding-left: 10px; background: url('http://i29.tinypic.com/rbiiwm.jpg') no-repeat; background-position: center left;} .subject { padding: 10px 10px 10px 20px; background-color: transparent ; color: #888888; font-style: italic; font-family: "Georgia", Serif, Tahoma, "Verdana", sans-serif; text-transform: lowercase; font-size: 16px; line-height: 7%; letter-spacing: -1px;} .subject a, .subject a:link, .subject a:visited { color: #666666; text-decoration: bold;} .subject a:hover { color: #BFBFBF; text-decoration: none;} .datesubject { padding: 2px; border-bottom: 1px solid #ececec;} .entry { margin: 0px 10px 50px 20px; padding: 0px; color: #888888; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; text-align: justify; line-height: 150%; border-width: 0px;} .entry_text { padding-top:10px; border: 0px; bottom: 0px;} .userpic { position: relative; float: right; background-color: #ffffff; padding: 4px; margin: 10px; z-index: 15; border: 1px #ececec solid;} .entry ul li {padding-left: 5px;margin-left: 15px;} .entry ol li{padding-left: 5px;margin-left: 15px;} /*--------------------------------------------------------------------- ENTRIES-------------------------------------------------------------------------------------->>>>> bottom links ------------------------------------------------------------------------*/ .comments { font-size: 11px; text-align: right; padding: 0px 5px 0px 5px; position: relative; top: 15px; text-transform: uppercase;} div.comments a, div.comments a:link, div.comments a:visited{ color: #666666; text-decoration: none;} div.comments a:hover { color: #BFBFBF; text-decoration: none;} .separator{height: 35px;} /*--------------------------------------------------------------------- ENTRIES-------------------------------------------------------------------------------------->>>>> tag stuff and currents to replace the currents images, just replace URLs in the 'background' part of the applicable code. You may need to decrease/increase the left padding depending on the images you use. ------------------------------------------------------------------------*/ .currents, {margin-top:0px; padding-top:0px; text-transform: lowercase; color: #acacac; font-family: Tahoma, "Verdana", sans-serif;} div.ljtags {font-weight: bold;} div.ljtags a {font-weight: normal;} .currentlocation { padding-left: 15px; font-size: 7pt; color: #646464; background: url('http://i25.tinypic.com/fa7yi1.jpg') no-repeat; background-position: center left;} .currentmood { padding-left: 11px; font-size: 7pt; color: #646464; background: url('http://i32.tinypic.com/vs0vbd.jpg') no-repeat; background-position: center left;} .currentmusic { padding-left: 10px; font-size: 7pt; color: #646464; background: url('http://i28.tinypic.com/iyklqa.jpg') no-repeat; background-position: center left;} .ljtags { border-top: 1px solid #ececec !important; background-color: #f3f3f3; top: 30px; margin: 0px; position: relative; padding-left: 15px; text-transform: lowercase; font-size: 7pt; color: #646464; background: url('http://i32.tinypic.com/29ohoy0.gif') 0px 0px no-repeat; background-position: center left;} h2 { color: #666666; font-family: "Georgia", Serif, Tahoma, "Verdana", sans-serif; font-size: 16px; font-weight: normal; font-style: italic; letter-spacing: -1px; margin-left:20px; } .ljtaglist { margin: 0px 0px 0px 35px; background-color: #ffffff; padding: 5px; color:#888888; font-size:10px; list-style:none; border:0px ;} /*------------------------------------------------------------ ENTRIES-------------------------------------------------------------------------------------->>>>> friends page customization -------------------------------------------------------------------------------*/ .userpicfriends { position: relative; background-color: transparent !important; float: right; padding: 5px; margin: 5px; text-align: center; border-width: 0px; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; z-index: 15;} .userpicfriends img { border-bottom: 1px #cccccc solid; border-right: 1px #cccccc solid; background-color: #f2f2f2 !important; padding: 7px;} .userpicfriends a font {color: #aaaaaa;} /*---------------------------------------------------- ENTRIES -------------------------------------------------------------------------------------->>>>> comment pages ----------------------------------------------------------------*/ .box { border: 0px ; padding: 10px; clear: right;} .datesubjectcomment { background-color: #ffffff; padding: 5px; margin-top: 20px;} .userpiccomment { position: relative; padding: 3px; border-width: 0px; border-style: solid; border-color: #f2f2f2; background-color: #eeeeee; top: -30px; left: 0px; margin: 10px 10px -20px 10px; z-index: 15; float: left;} input, textarea { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa; border: 1px solid #cccccc; color: #999999;} textarea.textbox {width: 100% !important;} .reply { border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; line-height: 125%; color: #888888; } .replytosubject {font-weight: bold;} .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: Arial, Tahoma, "Verdana", sans-serif; color: #888888;} .commentbox { border: 1px solid #dddddd; padding: 10px; margin: 10px; background-color: #ffffff;} .commentbox:hover, .commentboxpartial:hover {border-color: #f3f3f3;} .datesubjectcomment a:link, .datesubjectcomment a:visited {color: #666666;} .datesubjectcomment a:hover {color: #BFBFBF;} .commentboxpartial { border-color: #888888; border-width: 0px; border-style: solid; padding: 10px; margin: 10px; background-color: #ffffff;} .commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%;} .skiplinks {text-align: center;} /*------------------------------------------------------------ SIDEBAR -------------------------------------------------------------------------------------->>>>> general -------------------------------------------------------------------------------*/ .defaultuserpic {text-align: center;} .defaultuserpic img {padding:3px; border: 1px solid #dddddd;} .sbarheader {padding: 0px 5px 0px 5px;} .sbarbody {padding: 0px 5px 0px 5px; } .sbarbody2 {padding: 0 15px 0 15px; margin-top: 0px;} div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ text-decoration: none; color: #666666;} div#sidebar a:hover { color: #BFBFBF; text-decoration: none;} ul.sbarlist{ padding: 0px 7px 0px 7px; margin-left: 0px; list-style: none;} li.sbaritem{ padding: 2px 7px 2px 7px; border-bottom: 1px solid #dddddd;} li.sbaritem:hover {background-color: #f9f9f9;} li.sbartitle{ font-style: italic; font-family: "Georgia", Serif, Tahoma, "Verdana", sans-serif; text-transform: lowercase; font-size: 12px; color: #777777; padding: 7px 2px 4px 14px; list-style: none; border-width: 0px; margin-bottom: 0px; margin-top: 10px; background: url('http://i26.tinypic.com/16jms06.jpg') no-repeat; background-position: center left;} /*------------------------------------------------------------ SIDEBAR -------------------------------------------------------------------------------------->>>>> calendar -------------------------------------------------------------------------------*/ table.calendar { margin-right: auto; margin-left: auto;} .sbarcalendar { border: 1px solid #eeeeee; text-align: center; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px;} .sbarcalendarposts { border-width: 0px; background-color: #f1f1f1; text-align: center; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px;} /*---------------------------------------------------- FOOTER -------------------------------------------------------------------------------------->>>>> general ----------------------------------------------------------------*/ #footer { width: auto; padding: 5px; text-align: center; font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; background-color: #ffffff; color: #888888; border-width: 0px; z-index: 100; clear: both;} ul.navfooter{ padding: 0px; margin: 0px;} ul.navfooter li { display: inline; margin: 0 5px 0 5px;} .clearfoot {clear: both;} /*---------------------------------------------------- ARCHIVE PAGES -------------------------------------------------------------------------------------->>>>> general ----------------------------------------------------------------*/ ul.year { text-align: center; padding-bottom: 20px;} ul.year li {display: inline;} table.yeartable { margin-left: auto; margin-right: auto;} table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #cccccc;} table.yeartable td.yearday { background-color: #ffffff; text-align: center;} td.yearmonth {border-style: none;} .clear { height: 15px;} /*-------------------------------------------- MINI ICONS by damnicons and excentric -----------------------------------------*/ .subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; padding: 12px 9px 0px 0px !important; background-repeat: no-repeat; background: url(http://i25.tinypic.com/2jz9yf.gif); background-position: center left; } .subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 10px 9px 0px 0px !important; background: url(http://i27.tinypic.com/25g6kcz.gif); background-position: center left; } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i26.tinypic.com/292333o.jpg); padding: 16px 8px 0 2px !important; background-position: center left;} .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {background-color:transparent; background-image: url(http://i26.tinypic.com/292333o.jpg); padding: 16px 8px 0 2px !important; background-position: center left; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {background-color:transparent; background-image: url(http://i26.tinypic.com/2nkj5n8.jpg); padding: 16px 8px 0 2px !important; background-position: center left; } img[src="http://p-stat.livejournal.com/img/icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i28.tinypic.com/2uh91kl.png); } /*-------------------------------------------- contexual pop-up -----------------------------------------*/ div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; } div.ContextualPopup div.Inner { background:transparent !important; color: #888888 !important; border: 0px; padding: 10px; width: 300px;} div.ContextualPopup .Userpic { padding: 4px; margin-left: 12px; background:#ffffff; border: 1px solid #aaaaaa;} div.ContextualPopup .Content { padding: 5px; border: 1px solid #aaaaaa; margin: 4px 80px 4px 4px; background:#ffffff;} div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #888888 !important;} div.ContextualPopup .Relation { text-transform: lowercase; font-family: "Georgia", Serif, Tahoma, "Verdana", sans-serif; font-size:11px; color:#888888;}



Yoochun Header :




http://i4.photobucket.com/albums/y135/ghettoplayasmooth/lj%20layouts/chunnieheader.png

Installation :
 

• Customize Journal
• Choose GRAY FLEXIBLE SQUARES by Yati Mansor [IMPORTANT]
• Select your choice of ad placement,preferably vertical or between entries
• Clicking Customize Selected theme, go to Custom CSS
• For the options there, select No, No, Yes
• Copy and Paste the CSS into the textarea provided and save changes.

Credit:

CSS:
milou_veronica

So I hope you guys like