Click for a Live Preview. ( Layout ) #024 : Shiva
This layout features Lydia and Edgar from "Hakushaku to Yousei". I made this for
thefulcrum's layout challenge.
( Install ) Step 1 - System
Select Theme- Select any S2 OPAL 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- Disable customized comment pages for your journal: Yes
- Always display userpic?: Yes
- Summary Items: 0
Text- Add this text to Free Text:
http://img25.imageshack.us/img25/909/090218winter.jpg" alt="A dream that lasted a lifetime" /> | Lorem ipsum dolor sit amet, mauris sollicitudin justo amet, vivamus purus placerat molestie dolor suscipit, volutpat mauris a faucibus sit et, neque elementum enim, torquent posuere auctor maecenas eu lectus. In this layout there are four empty boxes that you can use. The maximum of lines is eight. Anything else will be hidden. | |
← Previous Step |
1 | 2 |
3 |
4 |
Next Step → ( Install ) Step 3 - Stylesheet
Custom CSS- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 OPAL --- Shiva ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* --------------------------------- PAGE --------------------------------- */
body {background: #ffffff url(http://img25.imageshack.us/img25/1079/lightblue.png);
padding: 0px !important; margin: 0; z-index: 0; font: 12px georgia; color: #555555;}
.sidetext i, .entrytext i{color: #cf3c2a; }
.sidetext .ljuser b, .entrytext .ljuser b {font-weight: normal;}
.entrytext img, .sidetext img {border: 1px solid #e5e5e5; padding: 5px;}
.entrytext a img, .sidetext a img {border-color: #8f9dbd;}
.entrytext a img:hover, .sidetext a img:hover {border-color: #cf3c2a;}
a, a:link, a:visited, .ljuser a {color: #8f9dbd; text-decoration: none; outline: none; font-weight: normal;}
a:hover, a:active {color: #cf3c2a; cursor: help;}
blockquote {margin: 10px; border: 1px solid #e5e5e5; padding: 10px; font-size: 11px;}
blockquote:first-line {font: small-caps 13px georgia; margin: 0 0 0 50px; padding: 0 0 0 50px;}
#bodycontent {width: 750px; margin: 0 auto; background-color: #dde9f2; border-left: 10px solid #ffffff; border-right: 10px solid #ffffff;}
.border4 { border: 0; }
.border2 { border: 0; }
h2 {margin: 0; padding: 0; font: 24px times new roman; }
/* --------------------------------- HEADER --------------------------------- */
#sidecolumn {position: absolute; height: 400px; width: 750px; margin: -400px 0 0 0;}
#userpic, #headerinfo, #header h3, #header {display: none;}
.a1, .a2, .b1, .b2, .b3, .c1, .c2, .c3{border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}
.letterhead td {padding: 0 0 15px 15px;}
.letterhead { z-index: 6; position: relative; background-color: #dde9f2;}
.a1, .b1, .c1 {height: 49px; width: 228px; background: #8f9dbd; font: 54px times new roman; text-align: center; color: #f2f7ff; text-transform: lowercase;}
.a1 a, .b1 a, .c1 a { color: #f2f7ff; text-decoration: none; display: block;}
.a1 a:hover, .b1 a:hover, .c1 a:hover {color: #c0cade;}
.a2 {height: 331px; width: 208px; padding: 10px; background: #f2f7ff;}
.b2, .b3, .c2, .c3 {height: 155px; width: 208px; background: #f2f7ff; padding: 10px; overflow: hidden; }
.c3 a img {border: 0; margin: 18px;}
.c3 a img:hover, .c3 a img:active, .c3 a:active, .c3 a:hover {border-color: #ffffff; color: #ffffff;}
.sidetext {border: 1px solid #e5e5e5; background: #ffffff; padding: 10px; height: 133px;}
.sidelinks {padding: 0 0 0 20px; margin: 0; font: 9px georgia; color: #cccccc;}
.sidelinks li {list-style-type: decimal-leading-zero; border-bottom: 1px solid #e5e5e5; }
.sidelinks li a{font: 12px georgia; display: block;}
.sidelinks .even {margin: 1px 0 0 0;}
.sidelinks .odd a {color: #cf3c2a;}
.sidelinks li a:hover {background: #fafafa; color: #555555;}
.columncontent .calactitem, .columncontent .calinitem, .columncontent strong{display: none;}
/* --------------------------------- TAG --------------------------------- */
.ljtaglist {border: 1px solid #cccccc; background: #ffffff; margin: -10px 0 0 15px; padding: 10px 0 15px 0; width: 718px; line-height: 30px; }
.ljtaglist li {display: inline-table; position: relative; border-bottom: 1px solid #e5e5e5; margin: 0 27px 0 22px; width: 190px;}
.ljtaglist li:hover {background: #fafafa; }
/* --------------------------------- ENTRY / BODY --------------------------------- */
#content {padding: 400px 0 15px 0; margin: 0;}
#content table{ border-collapse: collapse;}
.entries .userpic2 {position: absolute; border: 1px solid #cccccc; width: 208px; padding: 10px; height: 98px; }
.entries .userpic2 img {width: 90px; height: 90px; padding: 3px; border: 1px solid #cccccc; background: #ffffff;}
.entries .userpic2 img:hover {opacity: .8;}
.entrylinks, #cal .entrylinks {position: absolute; width: 88px; border-left: 1px solid #cccccc; margin: 1px 0 0 120px; height: 98px;
padding: 10px; background-color: #ffffff;}
.entrylinks a, #cal .entrylinks a {display: block; text-transform: uppercase; font: 9px arial; line-height: 15px; background: #fafafa; color: #8f9dbd; margin: 0 0 3px 0;
border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.entries .entrylinks a:hover, #cal .entrylinks a:hover { color: #cf3c2a;}
.entries .entryinfo, #cal .entryinfo{position: absolute; width: 208px; padding: 10px; margin: 120px 0 0 1px;
background: #ffffff; border-bottom: 1px solid #cccccc; color: #dddddd; text-transform: uppercase; font: bold 24px times new roman; letter-spacing: -2px;}
.entries .friendname, .entries .entryinfo .ljuser a { position: absolute; width: 208px; padding: 10px; background: #ffffff; border-bottom: 1px solid #cccccc;
text-transform: lowercase; letter-spacing: 0; }
.entries .friendname { margin: 35px 0 0 -10px; color: #cf3c2a !important; font: italic 22px times new roman;}
.entries .friendname:hover, .entries .entryinfo .ljuser a:hover {background-color: #fafafa !important; color: #8f9dbd !important;}
.entries .entryinfo .ljuser a{ margin: 83px 0 0 -10px; color: #dddddd; text-transform: uppercase; font: bold 24px times new roman; letter-spacing: -1px;}
.entries .entryinfo img{ margin: 5px 0 0 0;}
.entries .entrytext, #cal .entrytext {border: 1px solid #cccccc; position: relative; width: 453px; margin: 4px 0 15px 245px; padding: 10px;
background: #ffffff; min-height: 245px; }
.entries, #cal .entries {padding: 1px 0 15px 0; }
.entries .subject, #cal .subject a{display: block; font: 24px georgia; letter-spacing: -2px; word-spacing: 1px; color: #8f9dbd; text-transform: lowercase;
background: #fafafa; padding: 10px; border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;}
.entries .subject a:hover, #cal .subject a:hover {color: #cf3c2a}
.entries .entry, #cal .entry { background: #f5f5f5; background: url(http://img413.imageshack.us/img413/3403/framebg.gif) bottom left no-repeat; margin: 0 0 0 15px}
.systemmessage {position: relative; z-index: 3; margin: -15px 15px 0 15px; border: 1px solid #cccccc; background: #ffffff; padding: 5px; width: 708px;}
a[href*="tellafriend.bml"]{display: none;} a[href*="entry.bml"]{display: none;} a[href*="content_flag.bml"]{display: none;}
a[href*="subscriptions"]{display: none;} a[href*="memadd"]{display: none;}
.backtop {display: none;}
/* --------------------------------- META --------------------------------- */
.meta {font: 0 arial; color: transparent;}
.ljtags {font: 11px georgia; color: #cccccc; border-top: 1px solid #e5e5e5; padding: 10px 0 0 0; margin: 10px 0 0 0;}
.meta img {display: none;}
/* --------------------------------- CALENDAR --------------------------------- */
#cal {padding: 1px 0 0 0; margin: 50px 15px 0 0;}
#cal .entrydivider {}
#cal .entryinfo {border-top: 1px solid #cccccc; margin-top: 119px; }
#cal .entrylinks {border-top: 1px solid #cccccc; margin: 0; width: 208px; border-right: 1px solid #cccccc;}
#cal .entrytext {min-height: 160px;}
#cal td {vertical-align: top;}
#cal .bigday {height: 30px; float: left; }
#cal .calactitem a{padding: 0 0 0 10px; font-weight: bold;}
#cal .calactitem a:before{content: "(";}
#cal .calactitem a:after{content: " )";}
#cal .entrylinks a[href*="livejournal.com"]{display: none;}
.notablemessage {margin: 19px 0 0 -6px; width: 698px; position: absolute; padding: 10px 0 0 0;}
.notablemessage a, .notablemessage .systemtext{ border: 1px solid #cccccc; padding: 2px 5px 2px 5px; background: #ffffff; margin: 0 15px 0 0;}
.notablemessage .systemtext {padding: 2px 12px 2px 12px;}
.notablemessage a:before {content: "";}
.notablemessage a:after {content: "";}
/* --------------------------------- OTHERS --------------------------------- */
div.ContextualPopup { font: 9px georgia !important; text-transform: uppercase; margin: 10px 0 0 -100px !important;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {color: #8f9dbd !important; text-decoration: none !important; }
div.ContextualPopup div.Inner a:hover {color: #cf3c2a !important; cursor: help; }
div.ContextualPopup br {display: none;}
div.ContextualPopup .RemoveFriend, div.ContextualPopup .AddFriend {border-left: 1px solid #cccccc; margin: 0 0 0 5px; padding: 0 0 0 5px;}
div.ContextualPopup .SetBan {height: 5px; display: block;}
div.ContextualPopup .SetBan a{display: none !important;}
div.ContextualPopup div.Inner { background-color: transparent !important; border: 0; }
div.ContextualPopup .Content { padding: 5px; color: #555555 !important; width: 170px; border: 1px solid #cccccc; background-color: #ffffff;
margin: 0 0 0 190px; min-height: 60px;}
div.ContextualPopup span { color: #cccccc !important;}
div.ContextualPopup .Userpic { border: 1px solid #cccccc; padding: 10px; background-color: #f2f7ff; position: absolute; }
.ContextualPopup .Relation {border-bottom: 1px dashed #dddddd; }
a[href*="vgift.bml"]{display: none; padding: 0; position: absolute;}
#lj_controlstrip{display: none;}
* html span.ljuser{ background-image: url(http://img291.imageshack.us/img291/4575/useryb4.png) !important no-repeat left middle; padding: 10px 8px 0px 0px !important;}
* html span.ljuser img{ visibility: hidden; }
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; padding: 12px 8px 0 4px !important;
background: url(http://img291.imageshack.us/img291/4575/useryb4.png) no-repeat !important;}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {width:0; height: 0; padding: 12px 8px 0 4px !important;
background: url(http://img247.imageshack.us/img247/7833/communityei5.png) no-repeat !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 208px wide and 331px high.
Replace the image in the CSS.
Add a Banner |
Replace Colours |
Replace Images ( Optional ) Replace Colours
#ffffff#fafafa#f2f7ff#e5e5e5#dde9f2#dddddd#cf3c2a#cccccc#c0cade#8f9dbd#555555
How do I replace layout colours? Add a Banner | Replace Colours |
Replace Images ( Optional ) Replace Images
Get all the images at
Box.net How do I replace layout images? The flowery background is by
77words.
Add a Banner |
Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
I'm making LJ a more visually stimulating place -
find out how you can too!