Layout 001 : Just Greyt
Click for a Live Preview.
( Layout ) #001 : Just Greyt
This isn't the first layout that I've made, but it's the first to be shared. Yay? It was first made to be a rebel to all those dark or light layouts... Grey for the win. (:
( Install ) Step 1 - System
Select Theme
- Select any S2 Smooth Sailing layout.
Page Setup
- Ad Placement: Horizontal
(Ignore if you have a paid account.)
- Sidebar: 1 Column (no sidebar)
← 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 --- Just Greyt ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* --------------------- PAGE --------------------- */
body { background: #616161; color: #bfbfbf; font-family: tahoma; font-size: 10px; margin-top: 10px; padding: 0; }
a, a:visited, a:active { color: #59ccdd; padding: 0; background-color: transparent; text-decoration: none; }
a:hover, a:visited:hover, a:active:hover {color: #bfbfbf; cursor: crosshair; }
blockquote { background-color: #616161; color: #bfbfbf; margin-left: 0px; padding: 5px; border: 0px solid #eeeeee;}
input, textarea, select {background-color: #6e6e6e; font: 10px tahoma; border: 1px solid #616161; padding: 1px; color: #bfbfbf; margin: 5px;}
ul {list-style-type: square;}
ol {list-style-type: decimal-leading-zero;}
/* --------------------- CONTENT --------------------- */
.pageblock{ width: 660px; margin: 0px auto; padding-top: 40px; background-color: #616161;}
.bodyblock {padding: 10px; background-color: #6e6e6e;}
.body-title, .body-midtitle {display: none;}
.bodyblock li {margin-left: 10px;}
/* --------------------- HEADER --------------------- */
.pageheaderblock {height: 30px; background: url() bottom left no-repeat; }
.header-icon, .header-title, .header-subtitle {display: none;}
.header-menu ul { text-align: center; margin: 0px; padding: 0px;}
.header-menu li { display: inline;}
.header-menu a, .header-menu a:visited { padding: 2px 15px 2px 15px; color: #bfbfbf; text-decoraction: none; }
.header-menu a:hover { color: #59ccdd; background-color: #6e6e6e; cursor: crosshair;}
/* --------------------- SIDEBAR --------------------- */
tr td .sidebar { border-right: 1px solid #616161; width: 155px; padding-right: 10px; }
tr td + td .sidebar { border-left: 1px solid #616161; padding-left: 10px; border-right: 0; padding-right: 0; }
.sidebox { border-bottom: 1px solid #616161;}
.sideboxTitle {text-transform: lowercase; font-size: 11px;font-family: "Trebuchet MS", tahoma; text-align: center; padding-top: 10px;}
.sideboxContent { padding: 10px 0 10px 0;}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {text-align: center;}
.sidebox #profile a img {border: 5px solid #59ccdd; }
.sidebox #profile a img:hover {border-color: #bfbfbf;}
#latestmonth table {width: 100%; }
.listitem a { padding: 2px; display: block; border-bottom: 1px solid #616161; }
/* --------------------- ENTRY --------------------- */
.entryHolder {padding: 15px; color: #bfbfbf; margin: 0 auto; }
.entryUserinfo { text-align: center; margin: 0px 0px 2px 12px; }
.entryText {text-align: justify; }
.entryHolder img{max-width: 400px; }
.entryHolder a img {border: 5px solid #59ccdd; }
.entryHolder a img:hover {border-color: #bfbfbf;}
.entryText ul br, .entryText ol br, .entryText li br {display: none;}
.entryHeader { text-align: center; text-transform: lowercase; margin-bottom: 10px;}
.entryHeaderSubject { display: block; border: none; font-size: 11px; sans-serif; padding: 2px 0 2px 0; }
.entryMetadata img {display: none;}
.entryMetadata ul {margin: 10px 0 0 0; padding: 0; }
.entryMetadata li {list-style: none; display: block;}
.entryMetadata-label {padding: 2px; color: #bfbfbf; text-transform: lowercase;}
.entryLinkbar { text-transform: lowercase; text-align: center; border-bottom: 1px solid #616161; padding: 30px 5px 30px 5px;}
.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: center; }
#footer-menu ul { margin: 0px; padding: 0px; }
#footer-menu li { text-align: center; display: inline;}
.pagefooterblock{ color: #6e6e6e; padding: 15px; text-align: center;}
/* --------------------- COMMENT PAGE --------------------- */
.commentHolder {background: #6e6e6e; width: 450px; }
.commentUserinfo {text-align: center; margin: 10px;}
.commentUserinfo-usericon img { padding-bottom: 2px;border: 0; }
.commentText {padding: 6px;}
.commentHeader {text-transform: lowercase; padding: 4px;}
.commentHeaderScreened {background-color: #616161; padding: 4px; }
.commentHeaderSubject {font-weight: normal; font-family: tahoma, sans-serif;font-size: 10px;}
.commentLinkbar { text-transform: lowercase; padding-bottom: 10px; border-bottom: 1px solid #616161; }
.commentLinkbar ul { margin: 0; padding: 0; color: #bfbfbf; text-align: center;}
.commentLinkbar li { display: inline; margin: 0; }
.commentLinkbar a {padding: 5px;}
#qrform {border-bottom: 1px solid #616161;}
#qrform table {border: 1px solid #616161 !important; margin: 10px; }
#qrform .textbox {width: 350px !important;}
/* --------------------- ARCHIVE PAGE --------------------- */
.yearlinks {text-align: right;}
.yearlink{padding-left:4px;padding-right: 4px;}
.month { width: 100%; margin: 20px 10px 0 0;}
.daytitles {text-align: center; padding: 2px;}
.day-blank {border: 1px solid #8a8a8a; padding: 2px;}
.day {padding: 2px;border: 1px solid #8a8a8a;}
.day-count { text-align: center;}
/* --------------------- OTHER --------------------- */
#lj_controlstrip td{border-right: 1px solid #6e6e6e; background: #616161; border-bottom: 1px solid #6e6e6e; color: #bfbfbf;}
#lj_controlstrip_statustext {color: #bfbfbf;}
#lj_controlstrip td a {color: #59ccdd;}
#lj_controlstrip td a:hover {color: #bfbfbf; text-decoration: none;}
#lj_controlstrip input, #lj_controlstrip select {background: #6e6e6e !important; border: 1px solid #616161; padding: 1px; color: #bfbfbf; }
div.ContextualPopup { font: normal 10px tahoma !important;}
div.ContextualPopup div.Inner {background: #616161 !important; color: #bfbfbf !important; border: 2px solid #6e6e6e; padding: 0px; width: 200px;}
div.ContextualPopup .Content {padding: 4px; }
div.ContextualPopup .Userpic {padding: 4px 4px 0 0;}
div.ContextualPopup div.Inner div.Content a {text-decoration: none !important; color: #59ccdd !important;}
div.ContextualPopup div.Inner div.Content a:hover {color: #bfbfbf!important;}
← 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 ) Add a Banner
The recommended banner size is 600px wide.
.pageheaderblock {background: url(HTTP://URLHERE.PNG) no-repeat center bottom; height: ###px; padding-bottom: 60px;}
- Replace HTTP://URLHERE.PNG with your banner url
Replace ### with your banner height (pixels) - Add the code to the bottom of the Custom Stylesheet box
Add a Banner | Replace Colours
( Optional ) Replace Colours
#bfbfbf#6e6e6e#616161#59ccdd
How do I replace layout colours?
Add a Banner | Replace Colours
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
