Layout 032 : Accent
Click for a Live Preview.
( Layout ) #032 : Accent
Inspired by Coldplay's song Clocks.
( Install ) Step 1 - System
Select Theme
- Select any Tranquility II layout.
Page Setup
- Ad Placement: Horizontal
(Ignore if you have a paid account.)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Display your userpic with your entries: Yes
Bio
- Define a Web Page
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 Tranquility II --- Accent ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
body {background: #ffffff; font: 12px arial; color: #000000; }
a, a:visited, a:active, a:link {text-decoration: none; color: #888888; outline: none; }
a:hover { text-decoration: underline;}
blockquote {background: #eeeeee; padding: 10px; border-top: 1px solid #888888;}
#menu a:hover, .ind-entry h2 a:hover { text-decoration: none; }
select, input, option {background-color: #000000 !important; color: #ffffff; border: 0; font: 9px arial !important; }
input {padding-left: 5px;}
select:hover, input:hover {color: #99e8f3; }
textarea {border: 1px solid #dddddd; font: 12px arial;}
input#username {color: #99e8f3 !important;}
/* --------------- BODY --------------- */
#container { background: #ffffff; margin: 0 auto; width: 760px; }
/* --------------- HEADER --------------- */
#header { float: left; }
#header h1 {margin: 10px 0 8px 0; padding: 10px; background: #99e8f3; font-size: 24px !important; letter-spacing: -1px; }
/* --------------- SIDEBAR --------------- */
#menu { width: auto; clear: both; height: auto; margin: 0 0 60px 0;}
#lj-summary, #menu h2 {display: none;}
#menu ul { margin: 0; padding: 0; }
#menu ul li {width: 150px; list-style: none; font-size: 9px; text-transform: uppercase; margin: 2px 2px 0 0px; float: left; }
#menu ul li a {color: #ffffff; display: block; padding: 1px 1px 1px 15px;
background: #000000 url(http://i37.tinypic.com/qx6vxd.jpg) no-repeat 3px; }
#menu ul li a:hover { color: #99E8F3; }
#menu li.active {background: #888888 url(http://i37.tinypic.com/qx6vxd.jpg) no-repeat 3px;
color: #ffffff; padding: 1px 1px 1px 15px; width: 134px; }
/* --------------- ENTRIES --------------- */
.userpic {float: left; border: 10px solid #99e8f3; margin: 0 10px 10px 0; padding: 2px; background: #000000; z-index: 200; position: relative; }
.ind-entry { clear: both; padding: 0px 0 10px 0; margin: 0 2px 25px 0; }
.ind-entry h2 { padding: 10px; margin: 0; border-bottom: 1px solid #888888;
font-size: 24px !important; letter-spacing: -1px;}
.ind-entry h2 a {color: #000000; }
.ind-entry h2 a:hover {color: #888888;}
.ind-entry h4 { background: #eeeeee; padding: 5px; margin: 0; font-size: 9px !important; text-transform: uppercase; float: left; }
.ind-entry h4 b {font-weight: normal; }
.ind-entry h4 .comments, .ind-entry h4 b a {background: #000000; color: #ffffff; padding: 0px 10px 0px 10px; text-decoration: none; float: left;
margin: 0 5px 0 0; }
.ind-entry h4 b a { padding-bottom: 0; }
.ind-entry h4 .comments:hover, .ind-entry h4 b a:hover {color: #99e8f3; }
.entry-item {clear: left; margin: 0 0 10px 0; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding: 10px; }
.ljtags {font-weight: bold; margin-top: 10px; }
.ljtags a {font-weight: normal; }
/* --------------- FOOTER --------------- */
#footer {clear: both; margin: 20px 0 0 0; border-top: 1px solid #dddddd; padding: 0 0 0 10px;}
/* --------------- COMMENT --------------- */
#comments table {font-weight: normal; font-size: 9px; text-transform: uppercase; background: #eeeeee; }
#comments form h4 {font-weight: normal;}
#comments form h4 b {display: none;}
#comments form h4 .ljuser b {display: inline;}
.ind-comment-one , .ind-comment-two , .ind-comment-screened {clear: both; margin: 45px 0 45px 0;}
.ind-comment-one h2 , .ind-comment-two h2 , .ind-comment-screened h2 { border-bottom: 1px solid #888888; padding: 10px;
letter-spacing: -1px; margin: 0;}
#comments h4 { margin: 0; padding: 0; padding: 5px; background: #eeeeee; float: left; font-size: 9px; text-transform: uppercase; }
#comments h4 .Link { background: #000000; color: #ffffff; padding: 0px 10px 0px 10px; text-decoration: none; margin: 0 0 0 5px; }
#comments h4 .Link:hover {color: #99e8f3; }
#comments h4 br {display: none;}
#comments form h4 span {display: block;}
.ind-comment-one label , .ind-comment-two label, .ind-comment-screened label{ margin: 0 0 0 5px;}
.ind-comment-screened .entry-item {background: #eeeeee;}
/* --------------- REPLY --------------- */
.entry-form {border-top: 1px solid #dddddd; }
.entry-form font b {}
#qrform table {border: 1px solid #dddddd !important; margin: 10px 0 0 0; background: #ffffff; clear: both;}
/* --------------- TAG --------------- */
#tags .ljtaglist li {list-style: none; background: url(http://i37.tinypic.com/qx6vxd.jpg) no-repeat 3px; padding: 1px 1px 1px 15px; }
#tags .ljtaglist {padding: 0; margin: 0 0 10px 0;}
/* --------------- ARCHIVE --------------- */
#archive .ind-entry div {clear: both; }
#archive .ind-entry .month-entries {border-bottom: 1px solid #dddddd; margin-bottom: 10px;}
#archive .ind-entry .month-entries ul { margin-top: 0; }
#archive .ind-entry .month-entries li {padding: 1px 1px 1px 15px; list-style: none;
background: url(http://i37.tinypic.com/qx6vxd.jpg) no-repeat 3px; }
#archive .ind-entry form { text-align: center; background: #eeeeee; padding: 10px;}
/* --------------- EXTRA --------------- */
#lj_controlstrip td{background: #000000; border-right: 0; color: #ffffff; }
#lj_controlstrip select, #lj_controlstrip input {background-color: #000000 !important; color: #ffffff !important; border: 0;
font: 9px arial !important; }
#lj_controlstrip td a {color: #99e8f3; }
#lj_controlstrip td a:hover {color: #dddddd; text-decoration: none;}
div.ContextualPopup div.Inner {border: 1px solid #dddddd; font: 9px arial; background: #000000 !important; color: #ffffff !important;
width: 200px;}
div.ContextualPopup div.Userpic {margin: 10px; background: #000000; padding: 2px; border: 5px solid #99E8F3; }
div.ContextualPopup div.Inner div.Content a {color: #888888 !important; text-decoration: none !important; font-weight: normal;}
div.ContextualPopup div.Inner div.Content a:hover { color: #99e8f3 !important; }
div.Relation, div.FriendStatus {font-size: 12px;}
img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; padding: 12px 8px 0 2px !important;
background: url(http://img291.imageshack.us/img291/4575/useryb4.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/community.gif"] {width:0; height: 0; padding: 9px 8px 0 2px !important;
background: url(http://img176.imageshack.us/img176/6571/userinfopk2.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important; margin-left: 5px;
background: url(http://img72.imageshack.us/img72/4144/lockedib8.png) no-repeat;}
img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important; margin-left: 5px;
background: url(http://i34.tinypic.com/14kkvpz.jpg) no-repeat;}
.imagepreview { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; text-align: center; padding: 10px;}
.imagepreview + br + b, .imagepreview + br + br + b {text-align: center; display: block;}
.layoutinfo {margin: 5px; }
.alternating-rows td {border-bottom: 1px solid #dddddd; padding: 3px;}
.layoutinfo div a img {border: 0; }
::-moz-selection { background: #000000; color: #ffffff; }
::selection { background: #000000; color: #ffffff; }
code::-moz-selection { background: #000000; color: #ffffff; }
code::selection { background: #000000; color: #ffffff; }
← 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#eeeeee#dddddd#99e8f3#888888#000000
How do I replace layout colours?
Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
How do I replace layout images?
Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
