Layout: Spring Fling
Live Preview
Info
Browser: Made in Opera and checked in Firefox and Explorer.
Style: S2 Smooth Sailing
Ad placement: Horizontal or Between Entries
Account: Basic, plus and paid accounts
Features: Custom Comment pages, also works with the welcome note on top.
Installation info:
- Select Smooth Sailing: Blue Days, 2 Column (sidebar on right)
- Show Memories link on Menubar - No
- Show Website link from Userinfo page on Menubar - No
- Use layout's stylesheet(s) - No
- Use layout's stylesheet(s) when including custom external stylesheet - No
- Paste the css codes into the Custom stylesheet textarea
The layout works best with a header, but feel free to change it to something else. Header should be 280px high. For width guidance, the one I made is 820px wide.
Please upload images to your own server.
Spring header // Icon
Codes:
/*'Spring Fling' (S2, Smooth Sailing)
layout by kasiopeia. please credit kasiopeiaicons */
/*GENERAL*/
body {
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
margin: 0px;
background-color: #ffffff;
color: #000000;
}
a:link {
color:#93bd44;
text-decoration:none;
}
a:visited {
color:#93bd44;
text-decoration:none;
}
a:hover {
color:#f0de1d;
text-decoration:none;
}
a:active {
color:#93bd44;
text-decoration:none;
}
.pageblock {
margin: 0 auto;
width: 85%;
position: center;
}
.pagefooterblock {
border-top: 2px solid #ffffff;
background-color: #ffffff;
color: #000000;
padding: 4px 4px 4px 24px;
margin-top: 4px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #1E1A35;
}
blockquote {
background-color: #ffffff;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
border-width:2px;
border-style:solid;
border-color: #93bd44;
}
/* HEADER */
.pageheaderblock {
text-align: right;
padding-bottom: 280px; /*If you want to change the hight of the header, do it here*/
padding-top: 0px;
background-image: url(''); /*YOUR HEADER GOES HERE!*/
background-repeat: no-repeat;
background-position: bottom center;
}
.header-title,.header-subtitle,.header-icon {
display:none;
}
.header-menu {
position:relative;
top: 280px;
width: 100%;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
line-height: 20px;
padding-right: 0px;
background-color: #93bd44;
border: 2px solid #93bd44;
}
.header-menu a, .header-menu a:visited {
background-color: #93bd44;
font-weight: bold;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
text-align: center;
white-space: nowrap;
padding: 5px 16px 5px 16px;
color: #000000;
text-decoration: none;
margin-right: 20px;
margin-left: 20px;
}
.header-menu a:hover {
background-color: #f0de1d;
color: #000000;
}
.header-menu ul {
text-align: left;
margin: 0px;
padding: 0px;
}
.header-menu li {
display: inline;
list-style-type:none;
margin: 0px;
padding: 0px;
}
#footer-menu li {
display: inline;
margin: 0px;
padding: 0px;
}
#footer-menu ul {
text-align: left;
margin: 0px;
padding: 0px;
}
/* BODY */
.bodyblock {
padding: 0px 0px 0px 0px;
width: 100%;
}
.bodyheaderblock {
background-color: #ffffff;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
background-color: #ffffff;
color: #000000;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #000000;
}
.body-title {
display:none;
}
.body-midtitle {
font-family: Verdana;
font-size: 18px;
color: #000000;
text-align: right;
padding-right: 24px;
}
/*ENTRIES*/
.entryHolder {
width: 97%;
color: #000000;
background-color: #ffffff;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
border-top: 2px solid #93bd44;
border-bottom:2px solid #93bd44;
border-left:2px solid #93bd44;
border-right:2px solid #93bd44;
padding-top:12px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
margin: 4px 0px 4px 0px;
clear:both;
}
.entryUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: #ffffff;
}
.entryUserinfo-usericon img {
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
border-width:2px;
border-style:solid;
border-color: #93bd44;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
.entryText {
padding: 6px;
}
.entryHeader {
background-color: #93bd44;
color: #000000;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
padding: 4px 0px 4px 8px;
}
.entryHeader a{
color: #ffffff;
font-size: 14px;
}
.entryHeaderSubject {
font-weight: bold;
color: #ffffff;
}
.entryHeaderDate a {
color : #ffffff;
text-decoration : none;
}
.entryHeaderDate {
color : #ffffff;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #000000;
text-decoration : underline;
}
.entryMetadata {
padding-left: 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
}
.entryMetadata li {
list-style: none;
display: inline;
padding-right: 10px;
}
.entryMetadata-label {
font-weight: bold;
padding-right: 4px;
}
.entryLinkbar {
font-family: ;
font-size: 11px;
color: #000000;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
/*FOOTER*/
#footer-menu {
font-size: 11px;
}
#footer-menu a, .footer-menu a:visited {
color: #000000;
white-space: nowrap;
padding: 6px;
text-align: left;
}
/*SIDEBAR*/
.sidebar {
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
margin-right: 0px;
margin-left: 20px;
margin-top: 6px;
width: 200px;
background-color: #ffffff;
}
.sidebox {
color: #000000;
background-color: #ffffff;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
border-width:2px;
border-style:solid;
border-color: #93bd44;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 10px;
margin-right: 10px;
}
.sideboxTitle {
background-color: #ffffff;
color: #000000;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
letter-spacing: 5px;
font-weight: bold;
padding: 4px 0px 4px 8px;
text-align: left;
border-bottom: 2px solid #f0de1d;
}
.sideboxContent {
text-align: center;
padding: 2px 4px 2px 4px;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #tags_sidebox {
text-align: center;
}
.sidebox #systemlinks {
text-align: center;
}
.sidebox #latestmonth table{
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
.listtitle {
font-weight: bold;
}
.profile-label {
font-weight: bold;
}
/*OTHER PAGES*/
/* COMMENT PAGE */
.commentHolder {
color: #000000;
background-color: #ffffff;
border-top: 2px solid #93bd44;
font-family: ;
font-size: 12px;
margin: 4px 0px 4px 0px;
}
.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: #ffffff;
}
.commentUserinfo-usericon img {
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
border-width:2px;
border-style:solid;
border-color: #93bd44;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: #ffffff;
color: #000000;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #000000;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #f0de1d;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-family: ;
font-size: 11px;
color: #000000;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.replyform {
background-color: #f8f8f8;
color: #000000;
padding-left: 10px;
}
#commenttext{
width:100%;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 500px;
border: 1px solid #dddddd;
margin: 8px 8px 8px 40px;
}
.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #000000;
}
.day-blank {
border: 1px solid #dddddd;
}
.day {
border: 1px solid #dddddd;
}
.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #000000;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #000000;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #93bd44;
}
.tagstable { width: 500px; }
Colors:
It's been raining a lot here lately, and I think I was longing for spring while I made it, but if you want different colors, it's easy to change the green and/or yellow.
Just chose your own colors, with hex codes. Copy the layout codes into your notepad and use the find and replace function for each color you want to change.
Green (menu, headers, borderlines, links): #93bd44
Yellow (hover, underlines): #f0de1d
As an example I made this alternative blue layout:
Live preview
To get this: #93bd44 -> #494B8F and #f0de1d -> #926D98
But any two colors will do fine, just make sure your colors aren't to dark as that will mess with the text.
Other
- Please ask any questions you might have, I'll be happy to help :)
- Feel free to tweak this layout to your needs, but please keep the credit part of the layout there. (If you do change it I can't promise I can help with coding problems).
- This is my first attempt at a Lj layout, so I'm sorry if the coding is messy ^^
- A credit link back here would be greatly appreciated.