Layout 013 : Slight | Profile 004 : Boxer Line | 005 : Suspicions
Click for a Live Preview
( Profile ) #004 : Boxer Line (with Image)
( Install ) Profile Code
Boxer Line : Livejournal profile layout code created by Malionette.
Find more Livejournal skins, themes, and layout designs at malionette.net.
| box number one Ratione mauris non in, non convallis sed nisl pulvinar, sem adipiscing habitasse, pellentesque maecenas dignissim et in lacus quam. Sed volutpat nullam eros libero risus eu, natoque quis morbi ipsum suspendisse. Ultrices id sed sit felis est, placerat sapien lacus et. | ||||||
| box number two Ratione mauris non in, non convallis sed nisl pulvinar, sem adipiscing habitasse, pellentesque maecenas dignissim et in lacus quam. Sed volutpat nullam eros libero risus eu, natoque quis morbi ipsum suspendisse. Ultrices id sed sit felis est, placerat sapien lacus et. | ||||||
| box number three Ultrices id sed sit felis est, placerat sapien lacus et. Link | Link | Link | Link | http://community.livejournal.com/fruitstyle/" target="">Profile |
Edit Profile
- Put code in Bio
- Change links, text, and styling to your preferences
- Do not remove the credit link to Fruitstyle
Click for a Live Preview
( Profile ) #005 : Suspicions
( Install ) Profile Code
Suspicions : Livejournal profile layout code created by Malionette.
Find more Livejournal skins, themes, and layout designs at malionette.net.
|
|
Edit Profile
- Put code in Bio
- Change links, text, and styling to your preferences
- Do not remove the credit link to Fruitstyle
Click for a Live Preview.
( Layout ) #013 : Slight
Thought of doing something slim and light after flipping through a magazine full of crazy models.
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares layout.
Page Setup
- Ad Placement: Vertical
(Ignore if you have a paid account.)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Set the user picture position for each entry: Left
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 FLEXIBLE SQUARES --- Slight ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
body {
background-color: #fafafa; color: #bbbbbb;
font-family: tahoma, sans-serif; font-size: 9px;
margin: 0; padding: 0;
}
a, a:link, a:visited {
color: #91cff4;
text-decoration: none;
}
a:hover {
color: #888888;
cursor: help;
}
blockquote{
background-color: #fafafa; color: #bbbbbb;
font-size: 9px;
margin: 0; padding: 5px;
}
blockquote:hover { background-color: #ffffff; cursor: text; }
input, select {
background-color: #fafafa; color: #bbbbbb;
font-family: tahoma; font-size: 9px;
border: 1px solid #dddddd;
margin-top: 5px;
}
input:hover, select:hover {
background-color: #ffffff; color: #bbbbbb;
border: 1px solid #dddddd;
cursor: help;
}
textarea {
width: 200px; padding: 5px;
border: 1px solid #dddddd;
background-color: #fafafa; color: #bbbbbb;
font-size: 9px; font-family: tahoma;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: L A Y O U T */
#content {
width: 450px;
margin: auto; padding: 0; margin-top: 50px;
background-color: #ffffff;
border: 5px solid #eeeeee;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: H E A D E R */
#header {
padding: 10px 0 10px 0; margin: 0 0 10px 0;
text-align: center; text-transform: lowercase;
font-size: 16px; font-family: georgia;
color: #bbbbbb;
border-bottom: 5px solid #eeeeee;
}
ul.navheader{ padding: 0px; margin: 0px; }
ul.navheader li {
display: inline;
margin: 0 5px 0 5px;
}
.title, .subtitle, .defaultuserpic{ display: none;}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: S I D E B A R */
#sidebar {
color: #bbbbbb;
font-size: 9px; font-family: tahoma, sans-serif;
text-align: left; text-transform: lowercase;
width: 150px;
margin-right: -200px; padding: 10px;
position: relative; float: right;
}
.sbartitle, .sbarheader {
font-family: georgia; font-size: 16px;
text-align: center;
padding: 2px; margin: 0 0 5px 0;
border-bottom: 1px dotted #dddddd;
}
.sbarbody { margin: 0; padding: 0; }
.sbarbody2 { margin: 0; padding: 0; }
#sidebar_summary li.sbaritem { margin: 0; padding: 0;}
table.calendar { margin: auto; font-family: georgia;}
.sbarcalendar { text-align: center; }
.sbarcalendarposts { text-align: center; }
ul.sbarlist {
padding: 0; margin: 0;
list-style: none;
}
li.sbaritem { list-style: none; }
.tagcloud {display: none;}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: E N T R Y */
#maincontent {
color: #bbbbbb;
font-family: tahoma, sans-serif; font-size: 9px;
margin: 0; padding: 0;
}
.subcontent { margin: 0 auto; padding: 0; }
.entry {
margin: 0; padding: 10px;
color: #bbbbbb;
min-height: 80px;
}
.entry_text {min-height: 100px;}
.entry ul li {padding:0; margin: 0;}
.entry ol li {padding:0; margin: 0;}
.userpic {
float: left;
background-color: #ffffff;
padding: 10px; margin: 0 0 0 -170px;
border: 5px solid #eeeeee;
}
.userpicfriends {
float: left;
background-color: #ffffff !important; color: #ffffff;
padding: 10px; margin: 0 0 0 -170px;
border: 5px solid #eeeeee;
text-align: center;
}
.userpicfriends a font{
color: #91cff4 !important;
}
.userpicfriends img{
margin: 0 0 3px 0;
}
.date {
font-size: 9px; font-family: tahoma, sans-serif;
text-align: center; text-transform: lowercase;
padding: 0; margin: 0;
}
.subject {
text-align: center;
font-family: georgia, sans-serif; font-size: 12px; font-weight: bold;
padding: 0 0 2px 0; margin: 0;
letter-spacing: 0px;
}
.datesubject {
color: #bbbbbb;
border-bottom: 1px dotted #dddddd; border-top: 1px solid #fafafa;
padding: 5px 0 0 0; margin: 0;
}
.clear, .separator {display: none;}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: M E T A & C O M M E N T */
.currents, .ljtags {
font-size: 9px; font-family: tahoma, sans-serif;
}
.currentmood, .currentmusic, .currentlocation, .ljtags {
background-color: #fafafa;
margin: 5px 0 0 0; padding: 1px 0 1px 5px;
width: 215px;
}
.currentmood strong, .currentmusic strong, .currentlocation strong{
font-weight: normal;
}
.comments {
font-size: 9px; font-family: tahoma, sans-serif;
text-align: center; text-transform: lowercase;
margin: 5px 0 0 0; padding: 0;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: F O O T E R */
#footer {
padding: 10px 0 5px 0; margin: 0 0 10px 0;
text-align: center; text-transform: lowercase;
font-size: 16px; font-family: georgia;
color: #bbbbbb;
border-top: 5px solid #eeeeee;
}
ul.navfooter {
padding: 0px; margin: 0px;
}
ul.navfooter li{
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {display: none;}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: R E P L Y & C O M M E N T */
.datesubjectcomment {
margin: 5px 0 5px 0; padding: 5px 0 5px 0;
border-top: 1px solid #fafafa; border-bottom: 1px dotted #dddddd;
}
.userpiccomment {
float: left;
background-color: #ffffff !important; color: #ffffff;
padding: 10px; margin: 0 0 0 -180px;
border: 5px solid #eeeeee;
text-align: center;
}
label { font-size: 9px; }
.box {
margin: 0; padding: 10px;
}
textarea.textbox {
width: 95% !important;
}
.reply {
margin: 0; padding: 0;
}
.replytosubject {
margin: 0; padding: 0;
}
.commentreply {
margin: 0; padding: 0px;
}
.commentbox {
font-size: 9px;
margin: 0; padding: 0px;
min-height: 150px;
}
.commentbox a{font-size: 9px;}
.commentboxpartial {
margin: 0; padding: 0;
}
.commentinfo {
margin: 0; padding: 0;
width: 100%;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: A R C H I V E & T A G*/
ul.year {
font-size: 9px; font-family: tahoma, sans-serif;
text-align: center; text-transform: lowercase;
padding: 0; margin: 0;
color: #bbbbbb;
}
ul.year li { display: inline; }
table.yeartable { margin: auto; padding: 0; }
table.yeartable td.yearday {
background-color: #fafafa;
text-align: center;
border: 0; margin: 0; padding: 0;
}
.skiplinks { text-align: center; }
#maincontent h2 {
color: #bbbbbb;
font-family: georgia, serif; font-size: 12px;
text-transform: lowercase; text-align: center;
border-bottom: 1px dotted #dddddd; border-top: 1px solid #fafafa;
padding: 3px;
}
.ljtaglist {
list-style: none;
margin: 10px; padding: 0;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::: O T H E R */
* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}
* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
}
::-moz-selection { background: #dddddd; color: #ffffff; }
::selection { background: #dddddd; color: #ffffff; }
code::-moz-selection { background: #dddddd; color: #ffffff; }
code::selection { background: #dddddd; color: #ffffff; }
/*------ Look of contextual Popup ------*/
/* general positioning */
div.ContextualPopup {
margin: 10px 0 0 0px;
font: normal 9px "tahoma" !important;
}
/* userpic */
div.ContextualPopup img {
padding: 0 5px 0 5px;
margin: 0 1px 0 5px !important;
}
/* defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background-color: #ffffff !important;
color: #bbbbbb !important;
border: 5px solid #eeeeee;
padding: 0px;
width: 220px;
text-align: right;
}
/* defines left side of popup without the user icon*/
div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
}
/* defines the text that shows the relation to the user (XYZ is your mutual friend) */
div.ContextualPopup .Relation {
font-weight: normal !important;
letter-spacing: 2px;
}
/* look of words LJ Talk */
div.ContextualPopup .Content .OnlineStatus {
font-weight: normal;
}
/* 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: normal;
color: #91cff4 !important;
}
#lj_controlstrip table { margin: 0; padding: 0; width: auto; background-color: #eeeeee !important;}
#lj_controlstrip td {
background-color: #fefefe !important;
font-family: tahoma;
color: #bbbbbb;
border-bottom: 5px solid #eeeeee !important;
}
#lj_controlstrip a {
color: #91cff4 !important;
font-family: tahoma; font-size: 9px;
text-transform: lowercase;
}
#lj_controlstrip a:hover {
color: #888888 !important;
cursor: help;
border: 0;
text-decoration: none;
}
#lj_controlstrip a img, #lj_controlstrip form {
padding: 0; margin: 0; border: 0;
}
#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
font-family: tahoma; font-size: 9px;
background-color: #ffffff; color: #bbbbbb;
padding: 0; margin: 0;
border: 1px solid #eeeeee;
}
#lj_controlstrip_userpic, #lj_controlstrip_userpic img{ width: 50px; height: 50px; }
#lj_controlstrip_statustext {
font-size: 9px;
color: #bbbbbb !important;
font-weight: normal;
letter-spacing: 2px;
}
#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 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 ) Add a Banner
The recommended banner size is 450px wide.
.headerimage{
height: ###px; width: @@@px;
margin: auto; padding: 0;
background-image: url(HTTP://URLHERE.PNG); background-position: center bottom; background-repeat: no-repeat; background-color: #ffffff;
;){kind=link}
border-top: 5px solid #eeeeee; border-left: 5px solid #eeeeee; border-right: 5px solid #eeeeee;
}
- Replace HTTP://URLHERE.PNG with your banner url
Replace @@@ with your banner width (pixels)
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
#ffffff#fefefe#fafafa#eeeeee#dddddd#bbbbbb#91cff4#888888
How do I replace layout colours?
Add a Banner | Replace Colours
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
