Layout 020 : Ninotic
Click for a Live Preview.
( Layout ) #020 : Ninotic
This is a remake of Fruitstyle's fourth layout... named after my Togekiss from Pokemon. :D
( Install ) Step 1 - System
Select Theme
- Select any S2 Smooth Sailing layout.
Page Setup
- Ad Placement: Vertical
(Ignore if you have a paid account.)
- Sidebar: 2 Column (sidebar on right)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Userinfo Position in Entries: Right
- Wrap Entry text under userinfo: Yes
- Userinfo Position in Comments: Right
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 SMOOTH SAILING --- Ninotic ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ------------------------------ PAGE ------------------------------ */
body {font: 11px trebuchet ms, arial, sans-serif; color: #777777; margin: 0; padding: 0 !important; background-color: #eef6f3; cursor: crosshair}
a, a:visited{ color: #fabba6; padding: 0px; border: 0; text-decoration: none;}
a:hover { color: #dbdbdb; cursor: crosshair; background-color: #ffffff; }
input, textarea, select { font: 11px trebuchet ms, arial, sans-serif; color: #777777; border: 1px solid #eeeeee; margin-top: 5px; }
blockquote {border: 1px dashed #dddddd; padding: 10px;}
.pageblock{width: 550px; margin: 0; border-right: 130px solid #fabba6; background-color: #fafafa; border-left: 10px solid #fabba6;}
.pagefooterblock { display: none; }
/* ------------------------------ HEADER ------------------------------ */
.pageheaderblock {}
.header-subtitle, .header-title, .header-icon {display: none;}
.header-menu { width: 130px; position: absolute; margin-left: 690px; }
.header-menu a, .header-menu a:visited, .header-menu ul:visited, .header-menu li:visited { color: #bdbdbd; display: block; padding: 5px 10px 5px 10px; }
.header-menu a:hover, .header-menu a:hover:visited {background-color: #fbfbfb; color: #bbbbbb; border-right: 3px solid #dddddd;}
.header-menu ul { margin: 0px; padding: 0px; }
.header-menu li { display: block; background-color: #ffffff; margin: 0px 0 1px 0; }
/* ------------------------------ BODY ------------------------------ */
.bodyblock {padding: 0 10px 0 10px; border-left: 10px solid #eef6f3; border-right: 10px solid #eef6f3; }
.bodyheaderblock {display: none;}
.bodynavblock { background-color: transparent; margin-top: 5px; text-align: center; text-transform: uppercase;}
.bodynavblock a, .bodynavblock a:visited { background-color: transparent; border: none;}
.body-title { display: none; }
.body-midtitle { display: none; }
/* ------------------------------ SIDEBAR ------------------------------ */
.sidebar { position: absolute; width: 110px; margin-left: 30px; color: #777777;}
.sidebar br{display: none;}
.sidebar a , .sidebar a:visited{color: #ffffff; display: block; margin: 0; padding: 0; font-size: 10px;}
.sidebar a:hover, .sidebar a:hover:visited {color: #999999; padding-left: 4px;}
.sidebar ul, .sidebar ul:visited{ margin: 0; padding: 0;}
.sidebar li, .sidebar li:visited{display: block; margin: 0; padding: 0; }
.sidebar img{ border:0; padding: 0; margin: 0; background-color: transparent;}
.sidebox{display: block;}
.sideboxTitle {text-transform: lowercase; letter-spacing: -2px; color: #fcf6ea; font-size: 22px; margin: 5px 0 10px 0;}
.sideboxContent {padding: 0; margin: 0;}
#latestmonth table {text-align: center; margin: 0 auto;}
.latestmonth-inactive { padding: 0px; margin: 1px; font-size: 10px; }
.latestmonth-active { padding: 0px; margin: 0px; }
.latestmonth-active a:hover{ padding: 0;}
.listitem {border-bottom: 1px dashed #ffffff;}
#tags_sidebox, .listitem {color: #fabba6;}
#tags_sidebox a { display: block; border-bottom: 1px dashed #ffffff;}
#tags_sidebox { font-size: 0; text-align: left; }
.profile-label { display: none; }
/* ------------------------------ ENTRIES ------------------------------ */
.entryHolder {padding: 0px; background-color: transparent; text-align: justify; }
.entryUserinfo {font-weight: normal;text-align: center; padding: 10px; margin: 0px; background-color: transparent;}
.ljuser img{display: none;}
.entryUserinfo-usericon img { padding: 5px; border: 1px solid #ededed; background-color: #ffffff;}
.entryText { text-align: justify; border: 1px solid #ededed; padding: 10px; margin: 0px 0 0 0; line-height: 12px; background-color: #ffffff; min-height: 120px;}
.entryText img { border: 1px solid #ede8d3; padding: 5px; background-color: #fafafa; }
.entryHeader {border-bottom: 20px #ffffff solid; margin: 20px 0 20px 0; }
.entryHeader img {border:0; margin: 0; padding: 0; background-color: transparent;}
.entryHeaderSubject { font-weight: none; text-transform: lowercase; padding-left: 4px; letter-spacing: -2px; color: #777777; font-size: 24px;}
.entryHeaderSubject a{color: #777777;}
.entryHeaderSubject a:hover{color: #fabba6;}
.entryHeaderDate{ position: absolute; margin: 32px 0 0 5px; font-size: 10px; letter-spacing: 5px; color: #bbbbbb; text-transform: uppercase;}
.entryLinkbar {text-transform: uppercase; text-align: center; font: 9px arial; letter-spacing: 1px; padding: 0px; margin: 10px 0 0 0; background-color: #ffffff;}
.entryLinkbar a {color: #999999;padding: 1px 5px 0 5px;}
.entryLinkbar a:hover {color: #ffffff; background-color: #fabba6;}
.entryLinkbar ul { margin: 0; }
.entryLinkbar li { padding: 0 7px 0 0; display: inline;}
/* ------------------------------ META ------------------------------ */
.entryMetadata { margin-top: 10px; color: #999999;}
.entryMetadata img { padding: 5px; float: right;}
.entryMetadata ul { margin: 0; padding: 0; }
.entryMetadata li { list-style: none; display: block; padding: 2px 0 0 0;}
.entryMetadata a { padding: 0 4px 0 4px; color: #777777; }
.entryMetadata a:hover { color: #aaaaaa;}
.entryMetadata-label { padding: 10px; font-style: italic; text-transform: lowercase;}
/* ------------------------------ FOOTER ------------------------------ */
#footer-menu li {display: inline; margin-right: 10px; }
/* ------------------------------ COMMENT PAGE ------------------------------ */
/* comments holder */
.commentHolder { color: #64412d; background-color: #eeeeee; font-family: tahoma; font-size: 9px;
margin: 4px 8px 4px 8px; }
/* comment userpics */
.commentUserinfo { text-align: left; margin: 8px 8px 8px 8px; background-color: #eeeeee; }
/* commenter's userpic */
.commentUserinfo-usericon img { padding-bottom: 2px; border: 0; }
/* text of comment */
.commentText { padding: 6px; }
/* comment's header ( contains date, subject) */
.commentHeader { text-transform: lowercase; background-color: #eeeeee; color: #64412d;
font-family: tahoma; font-size: 9px; padding: 4px 0 4px 0; }
.commentHeader a{ color: #64412d; }
/* for screen comments */
.commentHeaderScreened { font-family: tahoma; font-size: 9px; background-color: #c7c7c7; padding:
4px 0 4px 0; }
/* comment's subject (re: roflcakes) */
.commentHeaderSubject { font-weight: normal; font-family: tahoma; font-size: 9px; }
/* linkbar of comments (reply, delete, screen) */
.commentLinkbar { border-top: none; font-family: tahoma; font-size: 9px; color: #64412d;
text-transform: lowercase; padding-bottom: 10px; text-align: left; }
.commentLinkbar a { color: #64412d; font-family: tahoma; font-size: 9px; }
.commentLinkbar a:hover { font-family: tahoma; font-size: 9px; color: transparent; }
.commentLinkbar ul { margin: 0; padding: 0; color: #64412d; }
.commentLinkbar li { padding: 0px 5px 0px 5px; color: #64412d; margin: 0; display: inline; }
/* container of reply box */
.replyform { border: 0px; background-color: #eeeeee; color: #64412d; }
/* reply text container */
#commenttext{ width: 100%; }
/* ------------------------------ ARCHIVE PAGE ------------------------------ */
.yearlinks { text-align: right; }
.yearlink{ padding-left:4px; padding-right: 4px; }
.month { width: 510px; padding-bottom: 5px; margin: 4px 4px 4px 10px; }
.daysubjects { letter-spacing: 1px; padding: 6px 0 6px 0; }
.daytitles { text-align: ; background: #eeeeee; padding: 2px; }
.day-blank { padding: 2px; }
.day { padding: 2px; }
.day-date { text-align: left; }
.day-count { width: 50%; text-align: left; float: right; font-size: 9px; }
.entryHeader a{font-size: 24px;}
/* ------------------------------ TAGS PAGE ------------------------------ */
/* tags container */
.tagstable td { padding-top: 5px 0px 5px 0px; }
.tagstable { text-transform: lowercase; letter-spacing: 1px; width: 400px; }
/* ------------------------------ EXTRAS ------------------------------ */
::-moz-selection { background: #aaaaaa; color: #ffffff;}
::selection { background: #aaaaaa; color: #ffffff;}
code::-moz-selection { background: #aaaaaa; color: #ffffff;}
code::selection { background: #aaaaaa; color: #ffffff;}
/*------ Look of contextual Popup ------*/
div.ContextualPopup { font-family: trebuchet ms !important; font-size: 11px !important; }
div.ContextualPopup div.Inner { background-color: transparent !important; border: 0; text-align: right;}
div.ContextualPopup .Content { padding: 5px; color: #777777 !important; width: 150px; border: 1px solid #ececec; background-color: #ffffff;}
div.ContextualPopup .Relation {}
div.ContextualPopup .Content .OnlineStatus {font-weight: normal;}
div.ContextualPopup .Userpic { border: 1px solid #ececec; padding: 10px; background-color: #ffffff; margin: 0 -25px 0 0;}
div.ContextualPopup .Userpic img { }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; color: #fabba6 !important; }
div.ContextualPopup div.Inner a:hover { color: #aaaaaa !important; cursor: crosshair; }
#lj_controlstrip {top: 0;left: 0;width: 100%;border-bottom: 1px solid #ececec; height: 45px; position: absolute;background-color: #fefefe !important;}
#lj_controlstrip table { margin: 0; padding: 0; width: auto; background-color: #fefefe !important;}
#lj_controlstrip td {background-color: #fefefe !important; font-family: tahoma; color: #64412d; border: 0;}
#lj_controlstrip a {color: #fabba6;}
a[href*="entry.bml"], a[href*="tellafriend.bml"], a[href*="memadd.bml"], a[href*="content_flag.bml"]{display:none; padding: 0;}
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 4 - Link Back
Please link back to fruitstyle so others can find my layouts. Put either a button or the code in your Userinfo.
ButtonCode
View available buttonsLayout by fruitstyle
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Optional ) Replace Colours
#ffffff#fbfbfb#fafafa#fabba6#eef6f3#eeeeee#ededed#dddddd#dbdbdb#bdbdbd#bbbbbb#aaaaaa#999999#777777
How do I replace layout colours?
Replace Colours
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
