[LJ Layout] KinKi Kids Futari Layouts
Another layout spam again. Because I felt I must make Futari layout too haha. XD XD
But really, the original CCS is coool but maybe since I like simple and organized things when it comes to viewing files/folders, so I edited the layout to become sooo 'formal' and simple lol. XP so please don't wonder about those plain boxes and such. ^^; BUT using this layout won't make the ads banner visible even if you're Plus account user ♥♥♥♥~ Seriously~ XD XD Maybe I should use this CCS code too hahaha XD (or does it really exist an option to disable ads for Plus account? ^_^;;; )
Picture Preview: (sorry no live-preview)
Dark layout version:
Light layout version:
Layout Style: Smooth Sailing
Best view: Tested in Firefox with 1024x768 resolution. but IE should work too.
Work with Nav bar?: Yes
Work with Ads? Yes.
Credits: Please credit the Original CCS by fruitstyle and Modified by rurun . (err.. Graphic from various sources..forgot already since they were already in my folders.. ^^;)
To install:
1) Select Smooth Sailing as the Theme
2) Choose 2 column (with the right sidebar) and horizontal as the advertisement in the Page Setup section.
3) Go to the custom CCS box section, select 'No' for all the two dropdown buttons options, copy the code below and paste it in the CCS box.
4) Make sure to go to the Display section and choose the "right side of the entry text" for the "Userinfo Position in Entries" box to make the usericon appear at the right side of each entry.
5) and choose "yes" for the "Wrap Entry text under userinfo"
6) That's all. But if you could, please save the header pic into your own server and use your own links neh. :)
Code for Dark layout version:
/* S2 SMOOTH SAILING --- It's your time to SHINE! --- Orignal CCS by Wingweaver22 @ Fruitstyle.livejournal.com Modified by rurun.livejournal.com Do not remove this note. */ /* ------------------------------ PAGE ------------------------------ EXTRA HEADERS (copy and paste it to the url in the HEADER section) http://img524.imageshack.us/img524/2227/kkdarkheader1.jpg http://img228.imageshack.us/img228/5669/kkdarkheader2.jpg http://img215.imageshack.us/img215/2227/kkdarkheader3.jpg */ /* BACKGROUND */ body { font-family: arial; font-size: 12pt; margin: 0px; background-color: #2D2D2D; background: url (); background-repeat: repeat; } /* LINKS */ a { color: #7AC0FF; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:visited { color: #7AC0FF; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:hover { color: #FF725C; cursor: help; background-color: transparent; } /* BLOCKQUOTE */ blockquote{ background-color: #404040; background: url (); //background-repeat: repeat; color: #cccccc; font-size:12px; margin: 10px 0 0 0; padding: 10px; width: 200px; border: 1px dotted #eeeeee; } blockquote:first-line { display: none; } /* TEXT AREA, LAYOUT CODES AND SUCH, IMAGE CODES */ input, textarea, select { background-color: #2d2d2d; font-family: arial; font-size: 12px; border: 1px solid #B2B2B2; color: #B2B2B2; padding: 2px; margin-top: 5px; } /* LAYOUT CONTAINER (align left/right) */ .pageblock{ /* margin: 0px auto; margin-top: 0px; margin-right: 0px; */ width: 1000px; margin: 0 auto; padding-left:0px; padding-right:0px; /* borders beside page (2) */ /*border-left: 10px solid #c2c2c2; border-right: 15px solid #5a5a5a;*/ /* appears with padding. inside border */ background-color: transparent; } /* LAYOUT FOOTER CONTAINER */ .pagefooterblock{ background-color: transparent; color: #2d2d2d; padding: 15px; margin-top: 0px; text-align: left; } .pagefooterblock a, .pagefooterblock a:visited { color: #707070; background-color: transparent; letter-spacing: 1px; text-align: left; border: none; } /* ------------------------------ HEADER ------------------------------ */ /* HEADER, TITLE, SUBTITLE */ .pageheaderblock { text-align: left; background: url(http://img228.imageshack.us/img228/5669/kkdarkheader2.jpg); background-color: transparent; background-align: center; margin-top:20px; width: 1000px; height: 457px; } /* TITLE */ .header-title { display: none; } /* SUBTITLE */ .header-subtitle { display: none; } /* JOURNAL ICON, DEFAULT : HIDDEN */ .header-icon { top: 0; right: 0; position: absolute; z-index: 1; display: none; } /* ------------------------------ LINKBAR ---------------------------- -- */ .header-menu { text-align: center; /* to make linkbar follow you, use " position: fixed; " */ position: relative; color: #7AC0FF; top: 450px; padding: 20px 0 5px 0; width: 1000px; font-family: georgia; font-size: 12px; //text-transform: lowercase; background-color: transparent; } /* LINKBAR LINK & POSITION */ .header-menu a, .header-menu a:visited { white-space: nowrap; padding: 20px 10px 5px 15px; color: #7AC0FF; text-decoraction: none; } .header-menu a:hover { color: #FF725C; background-color: transparent; border-bottom: 1px dashed #B2B2B2; cursor: help; } .header-menu ul, #footer-menu ul { margin: 0px; padding: 0px; } .header-menu li, #footer-menu li { display: inline; } /* ------------------------------ BODY ------------------------------ */ /* BODY CONTAINER (DOESN'T AFFECT HEADER!) */ .bodyblock { padding: 50px 10px 10px 10px; background: url (); //background-repeat: x,y; background-color: #2d2d2d; } /* BODY TITLE CONTAINER */ .bodyheaderblock { display: none; } /* BODY FOOTER LINK BAR // TOP OF PAGE, BACK 20 */ .bodynavblock { background-color: #2d2d2d; margin: 10px 0 4px 0; padding: 8px; text-align: left; } .bodynavblock a, .bodynavblock a:visited { color: #707070; background-color: transparent; border: none; text-align: left; } /* LIKE BODY TITLE CONTAINER..!? */ .body-title { display: none; } /* SEPERATES ENTRIES FROM COMMENTS */ .body-midtitle { display: none; /*font-family: arial; font-size: 15px; color: #2d2d2d; text-align: left; padding-left: 8px;*/ } /* ------------------------------ ENTRIES ---------------------------- -- */ /* ENTRY CONTAINER */ .entryHolder { margin-right: 15px; margin-bottom: 30px; padding: 15px; border: 1px #B2B2B2 solid; background-color: #111111; background: url (); //background-repeat: x,y; color: #B2B2B2; font-family: arial; font-size: 12px; } /* USERPIC AREA */ .entryUserinfo { font-family: arial; font-size: 10px; font-weight: normal; text-align: center; margin: 0px 0px 2px 0px; background-color: transparent; } /* ACTUAL USERPIC, BORDER IS FINE TOO.. */ .entryUserinfo-usericon img { margin-left: 7px; padding: 5px; background-color: #404040; background: url (); //background-repeat: x,y; text-align: center; border: #B2B2B2 solid 1px; } /* ENTRY TEXT */ .entryText { text-align: justify; //line-height: 10px; //padding-bottom: 5px; padding-left: 20px; } /* ENTRY HEADER // TIME, DATE, SUBJECT */ .entryHeader { background-color: transparent; color: #7AC0FF; font-family: arial; font-size: 12px; padding: 0px 0px 8px 0px; font-weight: none; letter-spacing: 1px; //text-transform: lowercase; } /* below vv are actually found on the calendar page */ .entryHeader a{ color: #7AC0FF; padding: 2px 8px 2px 8px; } .entryHeader a:hover{ color: #FF725C; background-color: transparent; border-bottom: 1px dashed #FF725C; padding: 2px 8px 2px 8px; } /* ENTRY SUBJECT */ .entryHeaderSubject { font-weight: none; font-style: none; font-family: "georgia", Times, serif; font-size: 25px; text-transform: none; padding-left: 4px; letter-spacing: 1px; text-align: left; color: #B2B2B2; } /* ENTRY DATE */ .entryHeaderDate a { color: #a7a7a7; border: none; font-family: georgia; font-size: 12; padding: 0; text-decoration : none; } .entryHeaderDate a:hover { color: #FF725C; background-color: transparent; cursor: help; } /* METADATA // MOOD, MUSIC, TAG, LOCATION */ .entryMetadata { font-family: trebuchet; margin-top: 40px; margin-bottom: 40px; color: #9f9f9f; } .entryMetadata img { } .entryMetadata ul { margin: 0; padding: 0px; } .entryMetadata li { list-style: none; display: block; margin-top: 3px; } /* METADATA SUBJECT */ .entryMetadata-label { letter-spacing: 1px; margin-right: 15px; padding: 0px 2px 0px 20px; color: #9f9f9f; background-color: #404040; background: url (); //background-repeat: x,y; //text-transform: lowercase; } /* COMMENTS BAR */ .entryLinkbar { text-transform: lowercase; text-align: center; font-size: 15px; font-family: trebuchet; border-bottom: 0px dashed #B2B2B2; padding: 10px 5px 12px 5px; } .entryLinkbar a, .entryLinkbar a:visited { color: #7AC0FF; } .entryLinkbar a:hover { color: #FF725C; border-bottom: 1px dashed #FF725C; } .entryLinkbar ul { margin: 0; padding: 0; } .entryLinkbar li { padding: 0 5px 0 5px; margin: 0; display: inline; } /* ------------------------------ FOOTER ------------------------------ */ #footer-menu { //text-transform: lowercase; text-align: right; border: 1px #B2B2B2 solid; background-color: #111111; background: url (); //background-repeat: x,y; font-family: arial; margin-right: 10px; font-size: 12px; } #footer-menu a, .footer-menu a:visited { padding: 1px 10px 1px 10px; color: #7AC0FF; white-space: nowrap; } #footer-menu a:hover { color: #FF725C; } /* ------------------------------ SIDEBAR ---------------------------- -- */ /* SIDEBAR CONTAINER */ .sidebar { border: 1px solid #B2B2B2; background-color: #111111; background: url (); //background-repeat: x,y; padding: 10px 10px 10px 10px; font-family: trebuchet; text-align: left; font-size: 12px; width: 150px; color: #707070; } /* SIDEBAR BOX (EACH) */ .sidebox { color: #707070; border-left: 1px solid #404040; margin: 0 0 15px 0; } /* SIDEBAR TITLE ( toolbox, month, blah) */ .sideboxTitle { //text-transform: lowercase; letter-spacing: 1px; font-size: 12px; font-family: arial; padding: 1px 0px 0px 4px; background-color: #404040; background: url (); //background-repeat: x,y; color: #B2B2B2; margin-bottom: 4px; text-align: left; } /* SIDEBARBOX CONTENT */ .sideboxContent { font-size: 12px; //line-height: 10px; text-align: left; padding: 3px; } .sidebox #freetext, .sidebox #profile, .sidebox #search { text-align: left; } /* mini cali */ .sidebox #latestmonth { text-align: center; } .latestmonth-inactive { padding: 2px; margin: 1px; font-size: 12px; font-family: arial; width: 12px; color: #B2B2B2; } .latestmonth-active { padding: 2px; font-family: arial; font-size: 12px; margin: 1px; width: 9px; } #tags_sidebox a { display: block; font-size: 13px; //line-height: 10px; } #tags_sidebox { font-size: 0; } /* PROFILEBOX SUBJECT // BOLDED TITLE: */ .profile-label { display: none; } /* ------------------------------ COMMENT PAGE ----------------------- ------- */ /* COMMENT HOLDER */ .commentHolder { color: #B2B2B2; background-color: #2d2d2d; font-family: arial; font-size: 12px; margin: 4px 8px 4px 8px; } /* COMMENT USERPIC */ .commentUserinfo { text-align: left; margin: 8px 8px 8px 8px; background-color: #2d2d2d; } /* COMMENT ICON */ .commentUserinfo-usericon img { padding-bottom: 2px; border: 0; } /* COMMENT TEXT */ .commentText { padding: 6px; } /* COMMENT HEADER // DATE, TIME, SUBJECT */ .commentHeader { //text-transform: lowercase; background-color: #2d2d2d; color: #B2B2B2; font-family: arial; font-size: 12px; padding: 4px 0 4px 0; } .commentHeader a{ color: #7AC0FF; } .commentHeaderScreened { font-family: arial; font-size: 12px; background-color: #404040; padding: 4px 0 4px 0; } .commentHeaderSubject { font-weight: normal; font-family: arial; font-size: 18px; } /* COMMENT LINKBAR // REPLY, SCREEN, DELETE */ .commentLinkbar { border-top: none; font-family: arial; font-size: 11px; color: #707070; text-transform: lowercase; padding-bottom: 10px; border-bottom: 2px solid #404040; border-left: 2px solid #404040; text-align: left; } .commentLinkbar a { color: #7AC0FF; font-family: arial; font-size: 11px; } .commentLinkbar a:hover { font-family: arial; font-size: 11px; color: #FF725C; } .commentLinkbar ul { margin: 0; padding: 0; color: #B2B2B2; } .commentLinkbar li { padding: 0px 5px 0px 5px; color: #B2B2B2; margin: 0; display: inline; } /* COMMENT REPLY CONTAINER */ .replyform { border: 1px; background-color: #2d2d2d; color: #B2B2B2; } /* COMMENT REPLY TEXT */ #commenttext{ width: 100%; color: #B2B2B2; } /* ------------------------------ ARCHIVE PAGE ----------------------- ------- */ .yearlinks { text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } /* CALENDAR CONTAINER */ .month { width: 350px; border-bottom: 2px solid #404040; padding-bottom: 5px; margin: 4px 4px 4px 10px; } /* SUBJECT LINE // VIEWING WHOLE MONTH */ .daysubjects { color: #B2B2B2; padding: 8px 8px 8px 40px; } /* WEEKLINE // DAYS OF THE WEEK */ .daytitles { text-align: left; background: #2d2d2d; padding: 2px; color: #B2B2B2; } /* BLANK ROWS // IF EMPTY ROW */ .day-blank { padding: 2px; } /* DAY BOX */ .day { padding: 2px; } /* NUMBERED DATE */ .day-date { color: #B2B2B2; width: 50%; text-align: left; } /* NUMBER OF ENTRIES MADE ON DAY */ .day-count { width: 50%; text-align: left; float: right; font-size: 10px; font-family: arial; color: 7AC0FF; } /* LINK OF ABOVE */ .day-count a { font-size: 12px; font-family: arial; color: #7AC0FF; } /* ------------------------------ TAGS PAGE -------------------------- ---- */ /* TAGS CONTAINER */ .tagstable, .tagstable td { padding-top: 10px; } .tagstable { text-transform: lowercase; width: 400px; } /*------------------------------------ Look of contextual Popup ---------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 0px 0px 0px 0px; font: normal 12px "arial" !important; } .bodyblock > div {display: none;} /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #454545 !important; color: #707070 !important; border: 1px solid #404040; padding: 0px; width: 200px; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 10px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: none !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: none; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: none; color: #7AC0FF !important; }
Header: the current header pic
Extra headers: (just change the url of the header to use them)
Extra pic 1
Extra pic 2
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Code for Light layout version:
/* S2 SMOOTH SAILING --- It's your time to SHINE! --- Orignal CCS by Wingweaver22 @ Fruitstyle.livejournal.com Modified by rurun.livejournal.com Do not remove this note. */ /* ------------------------------ PAGE ------------------------------ EXTRA HEADERS (copy and paste it to the url in the HEADER section) http://img190.imageshack.us/img190/1361/kklightheader1.jpg http://img190.imageshack.us/img190/386/kklightheader2.jpg http://img524.imageshack.us/img524/4577/kklightheader3.jpg */ /* BACKGROUND */ body { font-family: arial; font-size: 12pt; margin: 0px; background-color: #B1B1B1; background: url (); background-repeat: repeat; } /* LINKS */ a { color: #0032BE; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:visited { color: #0032BE; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:hover { color: #CC1527; cursor: help; background-color: transparent; } /* BLOCKQUOTE */ blockquote{ background-color: #B1B1B1; background: url (); //background-repeat: repeat; color: #333333; font-size:12px; margin: 10px 0 0 0; padding: 10px; width: 200px; border: 1px dotted #eeeeee; } blockquote:first-line { display: none; } /* TEXT AREA, LAYOUT CODES AND SUCH, IMAGE CODES */ input, textarea, select { background-color: #B1B1B1; font-family: arial; font-size: 12px; border: 1px solid #4D4D4D; color: #4D4D4D; padding: 2px; margin-top: 5px; } /* LAYOUT CONTAINER (align left/right) */ .pageblock{ /* margin: 0px auto; margin-top: 0px; margin-right: 0px; */ width: 1000px; margin: 0 auto; padding-left:0px; padding-right:0px; /* borders beside page (2) */ /*border-left: 10px solid #c2c2c2; border-right: 15px solid #5a5a5a;*/ /* appears with padding. inside border */ background-color: transparent; } /* LAYOUT FOOTER CONTAINER */ .pagefooterblock{ background-color: transparent; color: #B1B1B1; padding: 15px; margin-top: 0px; text-align: left; } .pagefooterblock a, .pagefooterblock a:visited { color: #707070; background-color: transparent; letter-spacing: 1px; text-align: left; border: none; } /* ------------------------------ HEADER ------------------------------ */ /* HEADER, TITLE, SUBTITLE */ .pageheaderblock { text-align: left; background: url(http://img524.imageshack.us/img524/4577/kklightheader3.jpg ); background-color: transparent; background-align: center; margin-top:20px; width: 1000px; height: 457px; } /* TITLE */ .header-title { display: none; } /* SUBTITLE */ .header-subtitle { display: none; } /* JOURNAL ICON, DEFAULT : HIDDEN */ .header-icon { top: 0; right: 0; position: absolute; z-index: 1; display: none; } /* ------------------------------ LINKBAR ---------------------------- -- */ .header-menu { text-align: center; /* to make linkbar follow you, use " position: fixed; " */ position: relative; color: #0032BE; top: 450px; padding: 20px 0 5px 0; width: 1000px; font-family: georgia; font-size: 12px; //text-transform: lowercase; background-color: transparent; } /* LINKBAR LINK & POSITION */ .header-menu a, .header-menu a:visited { white-space: nowrap; padding: 20px 10px 5px 15px; color: #0032BE; text-decoraction: none; } .header-menu a:hover { color: #CC1527; background-color: transparent; border-bottom: 1px dashed #4D4D4D; cursor: help; } .header-menu ul, #footer-menu ul { margin: 0px; padding: 0px; } .header-menu li, #footer-menu li { display: inline; } /* ------------------------------ BODY ------------------------------ */ /* BODY CONTAINER (DOESN'T AFFECT HEADER!) */ .bodyblock { padding: 50px 10px 10px 10px; background: url (); //background-repeat: x,y; background-color: #B1B1B1; } /* BODY TITLE CONTAINER */ .bodyheaderblock { display: none; } /* BODY FOOTER LINK BAR // TOP OF PAGE, BACK 20 */ .bodynavblock { background-color: #B1B1B1; margin: 10px 0 4px 0; padding: 8px; text-align: left; } .bodynavblock a, .bodynavblock a:visited { color: #707070; background-color: transparent; border: none; text-align: left; } /* LIKE BODY TITLE CONTAINER..!? */ .body-title { display: none; } /* SEPERATES ENTRIES FROM COMMENTS */ .body-midtitle { display: none; /*font-family: arial; font-size: 15px; color: #B1B1B1; text-align: left; padding-left: 8px;*/ } /* ------------------------------ ENTRIES ---------------------------- -- */ /* ENTRY CONTAINER */ .entryHolder { margin-right: 15px; margin-bottom: 30px; padding: 15px; border: 1px #4D4D4D solid; background-color: #ffffff; background: url (); //background-repeat: x,y; color: #4D4D4D; font-family: arial; font-size: 12px; } /* USERPIC AREA */ .entryUserinfo { font-family: arial; font-size: 10px; font-weight: normal; text-align: center; margin: 0px 0px 2px 0px; background-color: transparent; } /* ACTUAL USERPIC, BORDER IS FINE TOO.. */ .entryUserinfo-usericon img { margin-left: 7px; padding: 5px; background-color: #B1B1B1; background: url (); //background-repeat: x,y; text-align: center; border: #4D4D4D solid 1px; } /* ENTRY TEXT */ .entryText { text-align: justify; //line-height: 10px; //padding-bottom: 5px; padding-left: 20px; } /* ENTRY HEADER // TIME, DATE, SUBJECT */ .entryHeader { background-color: transparent; color: #0032BE; font-family: arial; font-size: 12px; padding: 0px 0px 8px 0px; font-weight: none; letter-spacing: 1px; //text-transform: lowercase; } /* below vv are actually found on the calendar page */ .entryHeader a{ color: #0032BE; padding: 2px 8px 2px 8px; } .entryHeader a:hover{ color: #CC1527; background-color: transparent; border-bottom: 1px dashed #CC1527; padding: 2px 8px 2px 8px; } /* ENTRY SUBJECT */ .entryHeaderSubject { font-weight: none; font-style: none; font-family: "georgia", Times, serif; font-size: 25px; text-transform: none; padding-left: 4px; letter-spacing: 1px; text-align: left; color: #4D4D4D; } /* ENTRY DATE */ .entryHeaderDate a { color: #a7a7a7; border: none; font-family: georgia; font-size: 12; padding: 0; text-decoration : none; } .entryHeaderDate a:hover { color: #CC1527; background-color: transparent; cursor: help; } /* METADATA // MOOD, MUSIC, TAG, LOCATION */ .entryMetadata { font-family: trebuchet; margin-top: 40px; margin-bottom: 40px; color: #494949; } .entryMetadata img { } .entryMetadata ul { margin: 0; padding: 0px; } .entryMetadata li { list-style: none; display: block; margin-top: 3px; } /* METADATA SUBJECT */ .entryMetadata-label { letter-spacing: 1px; margin-right: 15px; padding: 0px 2px 0px 20px; color: #494949; background-color: #B1B1B1; background: url (); //background-repeat: x,y; //text-transform: lowercase; } /* COMMENTS BAR */ .entryLinkbar { text-transform: lowercase; text-align: center; font-size: 15px; font-family: trebuchet; border-bottom: 0px dashed #4D4D4D; padding: 10px 5px 12px 5px; } .entryLinkbar a, .entryLinkbar a:visited { color: #0032BE; } .entryLinkbar a:hover { color: #CC1527; border-bottom: 1px dashed #CC1527; } .entryLinkbar ul { margin: 0; padding: 0; } .entryLinkbar li { padding: 0 5px 0 5px; margin: 0; display: inline; } /* ------------------------------ FOOTER ------------------------------ */ #footer-menu { //text-transform: lowercase; text-align: right; border: 1px #4D4D4D solid; background-color: #ffffff; background: url (); //background-repeat: x,y; font-family: arial; margin-right: 10px; font-size: 12px; } #footer-menu a, .footer-menu a:visited { padding: 1px 10px 1px 10px; color: #0032BE; white-space: nowrap; } #footer-menu a:hover { color: #CC1527; } /* ------------------------------ SIDEBAR ---------------------------- -- */ /* SIDEBAR CONTAINER */ .sidebar { border: 1px solid #4D4D4D; background-color: #ffffff; background: url (); //background-repeat: x,y; padding: 10px 10px 10px 10px; font-family: trebuchet; text-align: left; font-size: 12px; width: 150px; color: #707070; } /* SIDEBAR BOX (EACH) */ .sidebox { color: #707070; border-left: 1px solid #B1B1B1; margin: 0 0 15px 0; } /* SIDEBAR TITLE ( toolbox, month, blah) */ .sideboxTitle { //text-transform: lowercase; letter-spacing: 1px; font-size: 12px; font-family: arial; padding: 1px 0px 0px 4px; background-color: #B1B1B1; background: url (); //background-repeat: x,y; color: #4D4D4D; margin-bottom: 4px; text-align: left; } /* SIDEBARBOX CONTENT */ .sideboxContent { font-size: 12px; //line-height: 10px; text-align: left; padding: 3px; } .sidebox #freetext, .sidebox #profile, .sidebox #search { text-align: left; } /* mini cali */ .sidebox #latestmonth { text-align: center; } .latestmonth-inactive { padding: 2px; margin: 1px; font-size: 12px; font-family: arial; width: 12px; color: #4D4D4D; } .latestmonth-active { padding: 2px; font-family: arial; font-size: 12px; margin: 1px; width: 9px; } #tags_sidebox a { display: block; font-size: 13px; //line-height: 10px; } #tags_sidebox { font-size: 0; } /* PROFILEBOX SUBJECT // BOLDED TITLE: */ .profile-label { display: none; } /* ------------------------------ COMMENT PAGE ----------------------- ------- */ /* COMMENT HOLDER */ .commentHolder { color: #4D4D4D; background-color: #B1B1B1; font-family: arial; font-size: 12px; margin: 4px 8px 4px 8px; } /* COMMENT USERPIC */ .commentUserinfo { text-align: left; margin: 8px 8px 8px 8px; background-color: #B1B1B1; } /* COMMENT ICON */ .commentUserinfo-usericon img { padding-bottom: 2px; border: 0; } /* COMMENT TEXT */ .commentText { padding: 6px; } /* COMMENT HEADER // DATE, TIME, SUBJECT */ .commentHeader { //text-transform: lowercase; background-color: #B1B1B1; color: #4D4D4D; font-family: arial; font-size: 12px; padding: 4px 0 4px 0; } .commentHeader a{ color: #0032BE; border-top: 2px solid #676767; } .commentHeaderScreened { font-family: arial; font-size: 12px; background-color: #B1B1B1; padding: 4px 0 4px 0; } .commentHeaderSubject { font-weight: normal; font-family: arial; font-size: 18px; } /* COMMENT LINKBAR // REPLY, SCREEN, DELETE */ .commentLinkbar { border-top: none; font-family: arial; font-size: 11px; color: #707070; text-transform: lowercase; padding-bottom: 10px; border-bottom: 2px solid #676767; border-left: 2px solid #676767; text-align: left; } .commentLinkbar a { color: #0032BE; font-family: arial; font-size: 11px; } .commentLinkbar a:hover { font-family: arial; font-size: 11px; color: #CC1527; } .commentLinkbar ul { margin: 0; padding: 0; color: #4D4D4D; } .commentLinkbar li { padding: 0px 5px 0px 5px; color: #4D4D4D; margin: 0; display: inline; } /* COMMENT REPLY CONTAINER */ .replyform { border: 1px; background-color: #B1B1B1; color: #4D4D4D; } /* COMMENT REPLY TEXT */ #commenttext{ width: 100%; color: #4D4D4D; } /* ------------------------------ ARCHIVE PAGE ----------------------- ------- */ .yearlinks { text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } /* CALENDAR CONTAINER */ .month { width: 350px; border-bottom: 2px solid #B1B1B1; padding-bottom: 5px; margin: 4px 4px 4px 10px; } /* SUBJECT LINE // VIEWING WHOLE MONTH */ .daysubjects { color: #4D4D4D; padding: 8px 8px 8px 40px; } /* WEEKLINE // DAYS OF THE WEEK */ .daytitles { text-align: left; background: #B1B1B1; padding: 2px; color: #4D4D4D; } /* BLANK ROWS // IF EMPTY ROW */ .day-blank { padding: 2px; } /* DAY BOX */ .day { padding: 2px; } /* NUMBERED DATE */ .day-date { color: #4D4D4D; width: 50%; text-align: left; } /* NUMBER OF ENTRIES MADE ON DAY */ .day-count { width: 50%; text-align: left; float: right; font-size: 10px; font-family: arial; color: 0032BE; } /* LINK OF ABOVE */ .day-count a { font-size: 12px; font-family: arial; color: #0032BE; } /* ------------------------------ TAGS PAGE -------------------------- ---- */ /* TAGS CONTAINER */ .tagstable, .tagstable td { padding-top: 10px; } .tagstable { text-transform: lowercase; width: 400px; } /*------------------------------------ Look of contextual Popup ---------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 0px 0px 0px 0px; font: normal 12px "arial" !important; } .bodyblock > div {display: none;} /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #6F6F6F !important; color: #B1B1B1 !important; border: 1px solid #707070; padding: 0px; width: 200px; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 10px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: none !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: none; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: none; color: #0032BE !important; }
Header: the current header pic
Extra headers: (just change the url of the header to use them)
Extra pic 1
Extra pic 2
I'm done~ Maybe it will be a while I will make a layout again. XD;;;
Feel free to use it if anyone interested. :) Let me know if you face any problems. :D
A comment will be appreciated just in case if you use it. I don't mind if you just want to use the code and change the header to your own header, but please do comment because I'd loveee to see how it looks like in your LJ too fufufu :)
But really, the original CCS is coool but maybe since I like simple and organized things when it comes to viewing files/folders, so I edited the layout to become sooo 'formal' and simple lol. XP so please don't wonder about those plain boxes and such. ^^; BUT using this layout won't make the ads banner visible even if you're Plus account user ♥♥♥♥~ Seriously~ XD XD Maybe I should use this CCS code too hahaha XD (or does it really exist an option to disable ads for Plus account? ^_^;;; )
Picture Preview: (sorry no live-preview)
Dark layout version:
Light layout version:
Layout Style: Smooth Sailing
Best view: Tested in Firefox with 1024x768 resolution. but IE should work too.
Work with Nav bar?: Yes
Work with Ads? Yes.
Credits: Please credit the Original CCS by fruitstyle and Modified by rurun . (err.. Graphic from various sources..forgot already since they were already in my folders.. ^^;)
To install:
1) Select Smooth Sailing as the Theme
2) Choose 2 column (with the right sidebar) and horizontal as the advertisement in the Page Setup section.
3) Go to the custom CCS box section, select 'No' for all the two dropdown buttons options, copy the code below and paste it in the CCS box.
4) Make sure to go to the Display section and choose the "right side of the entry text" for the "Userinfo Position in Entries" box to make the usericon appear at the right side of each entry.
5) and choose "yes" for the "Wrap Entry text under userinfo"
6) That's all. But if you could, please save the header pic into your own server and use your own links neh. :)
Code for Dark layout version:
/* S2 SMOOTH SAILING --- It's your time to SHINE! --- Orignal CCS by Wingweaver22 @ Fruitstyle.livejournal.com Modified by rurun.livejournal.com Do not remove this note. */ /* ------------------------------ PAGE ------------------------------ EXTRA HEADERS (copy and paste it to the url in the HEADER section) http://img524.imageshack.us/img524/2227/kkdarkheader1.jpg http://img228.imageshack.us/img228/5669/kkdarkheader2.jpg http://img215.imageshack.us/img215/2227/kkdarkheader3.jpg */ /* BACKGROUND */ body { font-family: arial; font-size: 12pt; margin: 0px; background-color: #2D2D2D; background: url (); background-repeat: repeat; } /* LINKS */ a { color: #7AC0FF; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:visited { color: #7AC0FF; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:hover { color: #FF725C; cursor: help; background-color: transparent; } /* BLOCKQUOTE */ blockquote{ background-color: #404040; background: url (); //background-repeat: repeat; color: #cccccc; font-size:12px; margin: 10px 0 0 0; padding: 10px; width: 200px; border: 1px dotted #eeeeee; } blockquote:first-line { display: none; } /* TEXT AREA, LAYOUT CODES AND SUCH, IMAGE CODES */ input, textarea, select { background-color: #2d2d2d; font-family: arial; font-size: 12px; border: 1px solid #B2B2B2; color: #B2B2B2; padding: 2px; margin-top: 5px; } /* LAYOUT CONTAINER (align left/right) */ .pageblock{ /* margin: 0px auto; margin-top: 0px; margin-right: 0px; */ width: 1000px; margin: 0 auto; padding-left:0px; padding-right:0px; /* borders beside page (2) */ /*border-left: 10px solid #c2c2c2; border-right: 15px solid #5a5a5a;*/ /* appears with padding. inside border */ background-color: transparent; } /* LAYOUT FOOTER CONTAINER */ .pagefooterblock{ background-color: transparent; color: #2d2d2d; padding: 15px; margin-top: 0px; text-align: left; } .pagefooterblock a, .pagefooterblock a:visited { color: #707070; background-color: transparent; letter-spacing: 1px; text-align: left; border: none; } /* ------------------------------ HEADER ------------------------------ */ /* HEADER, TITLE, SUBTITLE */ .pageheaderblock { text-align: left; background: url(http://img228.imageshack.us/img228/5669/kkdarkheader2.jpg); background-color: transparent; background-align: center; margin-top:20px; width: 1000px; height: 457px; } /* TITLE */ .header-title { display: none; } /* SUBTITLE */ .header-subtitle { display: none; } /* JOURNAL ICON, DEFAULT : HIDDEN */ .header-icon { top: 0; right: 0; position: absolute; z-index: 1; display: none; } /* ------------------------------ LINKBAR ---------------------------- -- */ .header-menu { text-align: center; /* to make linkbar follow you, use " position: fixed; " */ position: relative; color: #7AC0FF; top: 450px; padding: 20px 0 5px 0; width: 1000px; font-family: georgia; font-size: 12px; //text-transform: lowercase; background-color: transparent; } /* LINKBAR LINK & POSITION */ .header-menu a, .header-menu a:visited { white-space: nowrap; padding: 20px 10px 5px 15px; color: #7AC0FF; text-decoraction: none; } .header-menu a:hover { color: #FF725C; background-color: transparent; border-bottom: 1px dashed #B2B2B2; cursor: help; } .header-menu ul, #footer-menu ul { margin: 0px; padding: 0px; } .header-menu li, #footer-menu li { display: inline; } /* ------------------------------ BODY ------------------------------ */ /* BODY CONTAINER (DOESN'T AFFECT HEADER!) */ .bodyblock { padding: 50px 10px 10px 10px; background: url (); //background-repeat: x,y; background-color: #2d2d2d; } /* BODY TITLE CONTAINER */ .bodyheaderblock { display: none; } /* BODY FOOTER LINK BAR // TOP OF PAGE, BACK 20 */ .bodynavblock { background-color: #2d2d2d; margin: 10px 0 4px 0; padding: 8px; text-align: left; } .bodynavblock a, .bodynavblock a:visited { color: #707070; background-color: transparent; border: none; text-align: left; } /* LIKE BODY TITLE CONTAINER..!? */ .body-title { display: none; } /* SEPERATES ENTRIES FROM COMMENTS */ .body-midtitle { display: none; /*font-family: arial; font-size: 15px; color: #2d2d2d; text-align: left; padding-left: 8px;*/ } /* ------------------------------ ENTRIES ---------------------------- -- */ /* ENTRY CONTAINER */ .entryHolder { margin-right: 15px; margin-bottom: 30px; padding: 15px; border: 1px #B2B2B2 solid; background-color: #111111; background: url (); //background-repeat: x,y; color: #B2B2B2; font-family: arial; font-size: 12px; } /* USERPIC AREA */ .entryUserinfo { font-family: arial; font-size: 10px; font-weight: normal; text-align: center; margin: 0px 0px 2px 0px; background-color: transparent; } /* ACTUAL USERPIC, BORDER IS FINE TOO.. */ .entryUserinfo-usericon img { margin-left: 7px; padding: 5px; background-color: #404040; background: url (); //background-repeat: x,y; text-align: center; border: #B2B2B2 solid 1px; } /* ENTRY TEXT */ .entryText { text-align: justify; //line-height: 10px; //padding-bottom: 5px; padding-left: 20px; } /* ENTRY HEADER // TIME, DATE, SUBJECT */ .entryHeader { background-color: transparent; color: #7AC0FF; font-family: arial; font-size: 12px; padding: 0px 0px 8px 0px; font-weight: none; letter-spacing: 1px; //text-transform: lowercase; } /* below vv are actually found on the calendar page */ .entryHeader a{ color: #7AC0FF; padding: 2px 8px 2px 8px; } .entryHeader a:hover{ color: #FF725C; background-color: transparent; border-bottom: 1px dashed #FF725C; padding: 2px 8px 2px 8px; } /* ENTRY SUBJECT */ .entryHeaderSubject { font-weight: none; font-style: none; font-family: "georgia", Times, serif; font-size: 25px; text-transform: none; padding-left: 4px; letter-spacing: 1px; text-align: left; color: #B2B2B2; } /* ENTRY DATE */ .entryHeaderDate a { color: #a7a7a7; border: none; font-family: georgia; font-size: 12; padding: 0; text-decoration : none; } .entryHeaderDate a:hover { color: #FF725C; background-color: transparent; cursor: help; } /* METADATA // MOOD, MUSIC, TAG, LOCATION */ .entryMetadata { font-family: trebuchet; margin-top: 40px; margin-bottom: 40px; color: #9f9f9f; } .entryMetadata img { } .entryMetadata ul { margin: 0; padding: 0px; } .entryMetadata li { list-style: none; display: block; margin-top: 3px; } /* METADATA SUBJECT */ .entryMetadata-label { letter-spacing: 1px; margin-right: 15px; padding: 0px 2px 0px 20px; color: #9f9f9f; background-color: #404040; background: url (); //background-repeat: x,y; //text-transform: lowercase; } /* COMMENTS BAR */ .entryLinkbar { text-transform: lowercase; text-align: center; font-size: 15px; font-family: trebuchet; border-bottom: 0px dashed #B2B2B2; padding: 10px 5px 12px 5px; } .entryLinkbar a, .entryLinkbar a:visited { color: #7AC0FF; } .entryLinkbar a:hover { color: #FF725C; border-bottom: 1px dashed #FF725C; } .entryLinkbar ul { margin: 0; padding: 0; } .entryLinkbar li { padding: 0 5px 0 5px; margin: 0; display: inline; } /* ------------------------------ FOOTER ------------------------------ */ #footer-menu { //text-transform: lowercase; text-align: right; border: 1px #B2B2B2 solid; background-color: #111111; background: url (); //background-repeat: x,y; font-family: arial; margin-right: 10px; font-size: 12px; } #footer-menu a, .footer-menu a:visited { padding: 1px 10px 1px 10px; color: #7AC0FF; white-space: nowrap; } #footer-menu a:hover { color: #FF725C; } /* ------------------------------ SIDEBAR ---------------------------- -- */ /* SIDEBAR CONTAINER */ .sidebar { border: 1px solid #B2B2B2; background-color: #111111; background: url (); //background-repeat: x,y; padding: 10px 10px 10px 10px; font-family: trebuchet; text-align: left; font-size: 12px; width: 150px; color: #707070; } /* SIDEBAR BOX (EACH) */ .sidebox { color: #707070; border-left: 1px solid #404040; margin: 0 0 15px 0; } /* SIDEBAR TITLE ( toolbox, month, blah) */ .sideboxTitle { //text-transform: lowercase; letter-spacing: 1px; font-size: 12px; font-family: arial; padding: 1px 0px 0px 4px; background-color: #404040; background: url (); //background-repeat: x,y; color: #B2B2B2; margin-bottom: 4px; text-align: left; } /* SIDEBARBOX CONTENT */ .sideboxContent { font-size: 12px; //line-height: 10px; text-align: left; padding: 3px; } .sidebox #freetext, .sidebox #profile, .sidebox #search { text-align: left; } /* mini cali */ .sidebox #latestmonth { text-align: center; } .latestmonth-inactive { padding: 2px; margin: 1px; font-size: 12px; font-family: arial; width: 12px; color: #B2B2B2; } .latestmonth-active { padding: 2px; font-family: arial; font-size: 12px; margin: 1px; width: 9px; } #tags_sidebox a { display: block; font-size: 13px; //line-height: 10px; } #tags_sidebox { font-size: 0; } /* PROFILEBOX SUBJECT // BOLDED TITLE: */ .profile-label { display: none; } /* ------------------------------ COMMENT PAGE ----------------------- ------- */ /* COMMENT HOLDER */ .commentHolder { color: #B2B2B2; background-color: #2d2d2d; font-family: arial; font-size: 12px; margin: 4px 8px 4px 8px; } /* COMMENT USERPIC */ .commentUserinfo { text-align: left; margin: 8px 8px 8px 8px; background-color: #2d2d2d; } /* COMMENT ICON */ .commentUserinfo-usericon img { padding-bottom: 2px; border: 0; } /* COMMENT TEXT */ .commentText { padding: 6px; } /* COMMENT HEADER // DATE, TIME, SUBJECT */ .commentHeader { //text-transform: lowercase; background-color: #2d2d2d; color: #B2B2B2; font-family: arial; font-size: 12px; padding: 4px 0 4px 0; } .commentHeader a{ color: #7AC0FF; } .commentHeaderScreened { font-family: arial; font-size: 12px; background-color: #404040; padding: 4px 0 4px 0; } .commentHeaderSubject { font-weight: normal; font-family: arial; font-size: 18px; } /* COMMENT LINKBAR // REPLY, SCREEN, DELETE */ .commentLinkbar { border-top: none; font-family: arial; font-size: 11px; color: #707070; text-transform: lowercase; padding-bottom: 10px; border-bottom: 2px solid #404040; border-left: 2px solid #404040; text-align: left; } .commentLinkbar a { color: #7AC0FF; font-family: arial; font-size: 11px; } .commentLinkbar a:hover { font-family: arial; font-size: 11px; color: #FF725C; } .commentLinkbar ul { margin: 0; padding: 0; color: #B2B2B2; } .commentLinkbar li { padding: 0px 5px 0px 5px; color: #B2B2B2; margin: 0; display: inline; } /* COMMENT REPLY CONTAINER */ .replyform { border: 1px; background-color: #2d2d2d; color: #B2B2B2; } /* COMMENT REPLY TEXT */ #commenttext{ width: 100%; color: #B2B2B2; } /* ------------------------------ ARCHIVE PAGE ----------------------- ------- */ .yearlinks { text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } /* CALENDAR CONTAINER */ .month { width: 350px; border-bottom: 2px solid #404040; padding-bottom: 5px; margin: 4px 4px 4px 10px; } /* SUBJECT LINE // VIEWING WHOLE MONTH */ .daysubjects { color: #B2B2B2; padding: 8px 8px 8px 40px; } /* WEEKLINE // DAYS OF THE WEEK */ .daytitles { text-align: left; background: #2d2d2d; padding: 2px; color: #B2B2B2; } /* BLANK ROWS // IF EMPTY ROW */ .day-blank { padding: 2px; } /* DAY BOX */ .day { padding: 2px; } /* NUMBERED DATE */ .day-date { color: #B2B2B2; width: 50%; text-align: left; } /* NUMBER OF ENTRIES MADE ON DAY */ .day-count { width: 50%; text-align: left; float: right; font-size: 10px; font-family: arial; color: 7AC0FF; } /* LINK OF ABOVE */ .day-count a { font-size: 12px; font-family: arial; color: #7AC0FF; } /* ------------------------------ TAGS PAGE -------------------------- ---- */ /* TAGS CONTAINER */ .tagstable, .tagstable td { padding-top: 10px; } .tagstable { text-transform: lowercase; width: 400px; } /*------------------------------------ Look of contextual Popup ---------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 0px 0px 0px 0px; font: normal 12px "arial" !important; } .bodyblock > div {display: none;} /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #454545 !important; color: #707070 !important; border: 1px solid #404040; padding: 0px; width: 200px; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 10px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: none !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: none; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: none; color: #7AC0FF !important; }
;){kind=link}
Header: the current header pic
Extra headers: (just change the url of the header to use them)
Extra pic 1
Extra pic 2
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Code for Light layout version:
/* S2 SMOOTH SAILING --- It's your time to SHINE! --- Orignal CCS by Wingweaver22 @ Fruitstyle.livejournal.com Modified by rurun.livejournal.com Do not remove this note. */ /* ------------------------------ PAGE ------------------------------ EXTRA HEADERS (copy and paste it to the url in the HEADER section) http://img190.imageshack.us/img190/1361/kklightheader1.jpg http://img190.imageshack.us/img190/386/kklightheader2.jpg http://img524.imageshack.us/img524/4577/kklightheader3.jpg */ /* BACKGROUND */ body { font-family: arial; font-size: 12pt; margin: 0px; background-color: #B1B1B1; background: url (); background-repeat: repeat; } /* LINKS */ a { color: #0032BE; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:visited { color: #0032BE; padding: 0px 0px 0px 0px; background-color: transparent; border: none; text-decoration: none; font-weight:normal; } a:hover { color: #CC1527; cursor: help; background-color: transparent; } /* BLOCKQUOTE */ blockquote{ background-color: #B1B1B1; background: url (); //background-repeat: repeat; color: #333333; font-size:12px; margin: 10px 0 0 0; padding: 10px; width: 200px; border: 1px dotted #eeeeee; } blockquote:first-line { display: none; } /* TEXT AREA, LAYOUT CODES AND SUCH, IMAGE CODES */ input, textarea, select { background-color: #B1B1B1; font-family: arial; font-size: 12px; border: 1px solid #4D4D4D; color: #4D4D4D; padding: 2px; margin-top: 5px; } /* LAYOUT CONTAINER (align left/right) */ .pageblock{ /* margin: 0px auto; margin-top: 0px; margin-right: 0px; */ width: 1000px; margin: 0 auto; padding-left:0px; padding-right:0px; /* borders beside page (2) */ /*border-left: 10px solid #c2c2c2; border-right: 15px solid #5a5a5a;*/ /* appears with padding. inside border */ background-color: transparent; } /* LAYOUT FOOTER CONTAINER */ .pagefooterblock{ background-color: transparent; color: #B1B1B1; padding: 15px; margin-top: 0px; text-align: left; } .pagefooterblock a, .pagefooterblock a:visited { color: #707070; background-color: transparent; letter-spacing: 1px; text-align: left; border: none; } /* ------------------------------ HEADER ------------------------------ */ /* HEADER, TITLE, SUBTITLE */ .pageheaderblock { text-align: left; background: url(http://img524.imageshack.us/img524/4577/kklightheader3.jpg ); background-color: transparent; background-align: center; margin-top:20px; width: 1000px; height: 457px; } /* TITLE */ .header-title { display: none; } /* SUBTITLE */ .header-subtitle { display: none; } /* JOURNAL ICON, DEFAULT : HIDDEN */ .header-icon { top: 0; right: 0; position: absolute; z-index: 1; display: none; } /* ------------------------------ LINKBAR ---------------------------- -- */ .header-menu { text-align: center; /* to make linkbar follow you, use " position: fixed; " */ position: relative; color: #0032BE; top: 450px; padding: 20px 0 5px 0; width: 1000px; font-family: georgia; font-size: 12px; //text-transform: lowercase; background-color: transparent; } /* LINKBAR LINK & POSITION */ .header-menu a, .header-menu a:visited { white-space: nowrap; padding: 20px 10px 5px 15px; color: #0032BE; text-decoraction: none; } .header-menu a:hover { color: #CC1527; background-color: transparent; border-bottom: 1px dashed #4D4D4D; cursor: help; } .header-menu ul, #footer-menu ul { margin: 0px; padding: 0px; } .header-menu li, #footer-menu li { display: inline; } /* ------------------------------ BODY ------------------------------ */ /* BODY CONTAINER (DOESN'T AFFECT HEADER!) */ .bodyblock { padding: 50px 10px 10px 10px; background: url (); //background-repeat: x,y; background-color: #B1B1B1; } /* BODY TITLE CONTAINER */ .bodyheaderblock { display: none; } /* BODY FOOTER LINK BAR // TOP OF PAGE, BACK 20 */ .bodynavblock { background-color: #B1B1B1; margin: 10px 0 4px 0; padding: 8px; text-align: left; } .bodynavblock a, .bodynavblock a:visited { color: #707070; background-color: transparent; border: none; text-align: left; } /* LIKE BODY TITLE CONTAINER..!? */ .body-title { display: none; } /* SEPERATES ENTRIES FROM COMMENTS */ .body-midtitle { display: none; /*font-family: arial; font-size: 15px; color: #B1B1B1; text-align: left; padding-left: 8px;*/ } /* ------------------------------ ENTRIES ---------------------------- -- */ /* ENTRY CONTAINER */ .entryHolder { margin-right: 15px; margin-bottom: 30px; padding: 15px; border: 1px #4D4D4D solid; background-color: #ffffff; background: url (); //background-repeat: x,y; color: #4D4D4D; font-family: arial; font-size: 12px; } /* USERPIC AREA */ .entryUserinfo { font-family: arial; font-size: 10px; font-weight: normal; text-align: center; margin: 0px 0px 2px 0px; background-color: transparent; } /* ACTUAL USERPIC, BORDER IS FINE TOO.. */ .entryUserinfo-usericon img { margin-left: 7px; padding: 5px; background-color: #B1B1B1; background: url (); //background-repeat: x,y; text-align: center; border: #4D4D4D solid 1px; } /* ENTRY TEXT */ .entryText { text-align: justify; //line-height: 10px; //padding-bottom: 5px; padding-left: 20px; } /* ENTRY HEADER // TIME, DATE, SUBJECT */ .entryHeader { background-color: transparent; color: #0032BE; font-family: arial; font-size: 12px; padding: 0px 0px 8px 0px; font-weight: none; letter-spacing: 1px; //text-transform: lowercase; } /* below vv are actually found on the calendar page */ .entryHeader a{ color: #0032BE; padding: 2px 8px 2px 8px; } .entryHeader a:hover{ color: #CC1527; background-color: transparent; border-bottom: 1px dashed #CC1527; padding: 2px 8px 2px 8px; } /* ENTRY SUBJECT */ .entryHeaderSubject { font-weight: none; font-style: none; font-family: "georgia", Times, serif; font-size: 25px; text-transform: none; padding-left: 4px; letter-spacing: 1px; text-align: left; color: #4D4D4D; } /* ENTRY DATE */ .entryHeaderDate a { color: #a7a7a7; border: none; font-family: georgia; font-size: 12; padding: 0; text-decoration : none; } .entryHeaderDate a:hover { color: #CC1527; background-color: transparent; cursor: help; } /* METADATA // MOOD, MUSIC, TAG, LOCATION */ .entryMetadata { font-family: trebuchet; margin-top: 40px; margin-bottom: 40px; color: #494949; } .entryMetadata img { } .entryMetadata ul { margin: 0; padding: 0px; } .entryMetadata li { list-style: none; display: block; margin-top: 3px; } /* METADATA SUBJECT */ .entryMetadata-label { letter-spacing: 1px; margin-right: 15px; padding: 0px 2px 0px 20px; color: #494949; background-color: #B1B1B1; background: url (); //background-repeat: x,y; //text-transform: lowercase; } /* COMMENTS BAR */ .entryLinkbar { text-transform: lowercase; text-align: center; font-size: 15px; font-family: trebuchet; border-bottom: 0px dashed #4D4D4D; padding: 10px 5px 12px 5px; } .entryLinkbar a, .entryLinkbar a:visited { color: #0032BE; } .entryLinkbar a:hover { color: #CC1527; border-bottom: 1px dashed #CC1527; } .entryLinkbar ul { margin: 0; padding: 0; } .entryLinkbar li { padding: 0 5px 0 5px; margin: 0; display: inline; } /* ------------------------------ FOOTER ------------------------------ */ #footer-menu { //text-transform: lowercase; text-align: right; border: 1px #4D4D4D solid; background-color: #ffffff; background: url (); //background-repeat: x,y; font-family: arial; margin-right: 10px; font-size: 12px; } #footer-menu a, .footer-menu a:visited { padding: 1px 10px 1px 10px; color: #0032BE; white-space: nowrap; } #footer-menu a:hover { color: #CC1527; } /* ------------------------------ SIDEBAR ---------------------------- -- */ /* SIDEBAR CONTAINER */ .sidebar { border: 1px solid #4D4D4D; background-color: #ffffff; background: url (); //background-repeat: x,y; padding: 10px 10px 10px 10px; font-family: trebuchet; text-align: left; font-size: 12px; width: 150px; color: #707070; } /* SIDEBAR BOX (EACH) */ .sidebox { color: #707070; border-left: 1px solid #B1B1B1; margin: 0 0 15px 0; } /* SIDEBAR TITLE ( toolbox, month, blah) */ .sideboxTitle { //text-transform: lowercase; letter-spacing: 1px; font-size: 12px; font-family: arial; padding: 1px 0px 0px 4px; background-color: #B1B1B1; background: url (); //background-repeat: x,y; color: #4D4D4D; margin-bottom: 4px; text-align: left; } /* SIDEBARBOX CONTENT */ .sideboxContent { font-size: 12px; //line-height: 10px; text-align: left; padding: 3px; } .sidebox #freetext, .sidebox #profile, .sidebox #search { text-align: left; } /* mini cali */ .sidebox #latestmonth { text-align: center; } .latestmonth-inactive { padding: 2px; margin: 1px; font-size: 12px; font-family: arial; width: 12px; color: #4D4D4D; } .latestmonth-active { padding: 2px; font-family: arial; font-size: 12px; margin: 1px; width: 9px; } #tags_sidebox a { display: block; font-size: 13px; //line-height: 10px; } #tags_sidebox { font-size: 0; } /* PROFILEBOX SUBJECT // BOLDED TITLE: */ .profile-label { display: none; } /* ------------------------------ COMMENT PAGE ----------------------- ------- */ /* COMMENT HOLDER */ .commentHolder { color: #4D4D4D; background-color: #B1B1B1; font-family: arial; font-size: 12px; margin: 4px 8px 4px 8px; } /* COMMENT USERPIC */ .commentUserinfo { text-align: left; margin: 8px 8px 8px 8px; background-color: #B1B1B1; } /* COMMENT ICON */ .commentUserinfo-usericon img { padding-bottom: 2px; border: 0; } /* COMMENT TEXT */ .commentText { padding: 6px; } /* COMMENT HEADER // DATE, TIME, SUBJECT */ .commentHeader { //text-transform: lowercase; background-color: #B1B1B1; color: #4D4D4D; font-family: arial; font-size: 12px; padding: 4px 0 4px 0; } .commentHeader a{ color: #0032BE; border-top: 2px solid #676767; } .commentHeaderScreened { font-family: arial; font-size: 12px; background-color: #B1B1B1; padding: 4px 0 4px 0; } .commentHeaderSubject { font-weight: normal; font-family: arial; font-size: 18px; } /* COMMENT LINKBAR // REPLY, SCREEN, DELETE */ .commentLinkbar { border-top: none; font-family: arial; font-size: 11px; color: #707070; text-transform: lowercase; padding-bottom: 10px; border-bottom: 2px solid #676767; border-left: 2px solid #676767; text-align: left; } .commentLinkbar a { color: #0032BE; font-family: arial; font-size: 11px; } .commentLinkbar a:hover { font-family: arial; font-size: 11px; color: #CC1527; } .commentLinkbar ul { margin: 0; padding: 0; color: #4D4D4D; } .commentLinkbar li { padding: 0px 5px 0px 5px; color: #4D4D4D; margin: 0; display: inline; } /* COMMENT REPLY CONTAINER */ .replyform { border: 1px; background-color: #B1B1B1; color: #4D4D4D; } /* COMMENT REPLY TEXT */ #commenttext{ width: 100%; color: #4D4D4D; } /* ------------------------------ ARCHIVE PAGE ----------------------- ------- */ .yearlinks { text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } /* CALENDAR CONTAINER */ .month { width: 350px; border-bottom: 2px solid #B1B1B1; padding-bottom: 5px; margin: 4px 4px 4px 10px; } /* SUBJECT LINE // VIEWING WHOLE MONTH */ .daysubjects { color: #4D4D4D; padding: 8px 8px 8px 40px; } /* WEEKLINE // DAYS OF THE WEEK */ .daytitles { text-align: left; background: #B1B1B1; padding: 2px; color: #4D4D4D; } /* BLANK ROWS // IF EMPTY ROW */ .day-blank { padding: 2px; } /* DAY BOX */ .day { padding: 2px; } /* NUMBERED DATE */ .day-date { color: #4D4D4D; width: 50%; text-align: left; } /* NUMBER OF ENTRIES MADE ON DAY */ .day-count { width: 50%; text-align: left; float: right; font-size: 10px; font-family: arial; color: 0032BE; } /* LINK OF ABOVE */ .day-count a { font-size: 12px; font-family: arial; color: #0032BE; } /* ------------------------------ TAGS PAGE -------------------------- ---- */ /* TAGS CONTAINER */ .tagstable, .tagstable td { padding-top: 10px; } .tagstable { text-transform: lowercase; width: 400px; } /*------------------------------------ Look of contextual Popup ---------------------------*/ /*general positioning*/ div.ContextualPopup { margin: 0px 0px 0px 0px; font: normal 12px "arial" !important; } .bodyblock > div {display: none;} /* attaches border to user icon*/ div.ContextualPopup img { border: 0; } /*defines general look, font color/size/background color*/ div.ContextualPopup div.Inner { background-color: #6F6F6F !important; color: #B1B1B1 !important; border: 1px solid #707070; padding: 0px; width: 200px; } /*defines left side of popup without the user icon*/ div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 10px; line-height: 1.4; } /*defines the text that shows the relation to the user (XYZ is your mutual friend) */ div.ContextualPopup .Relation { font-weight: none !important; } /* look of words LJ Talk */ div.ContextualPopup .Content .OnlineStatus { font-weight: none; } /*element that contains the user icon*/ div.ContextualPopup .Userpic { padding: 4px 4px 0 0; } /* defines the look of the links*/ div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: none; color: #0032BE !important; }
Header: the current header pic
Extra headers: (just change the url of the header to use them)
Extra pic 1
Extra pic 2
I'm done~ Maybe it will be a while I will make a layout again. XD;;;
Feel free to use it if anyone interested. :) Let me know if you face any problems. :D
A comment will be appreciated just in case if you use it. I don't mind if you just want to use the code and change the header to your own header, but please do comment because I'd loveee to see how it looks like in your LJ too fufufu :)