Nature is Green - S2 Smooth Sailing Layout
After working with Flexible Squares for quite awhile, I finally ventured into new territory. Namely, Smooth Sailing! After much much experimentation (quite a lot of it rather awful), I've finally come up with something I like. And here it is:
Style: S2 Smooth Sailing
Looks best in: All Browsers (tested in Firefox, Opera & IE)
Works with: Basic, Paid & Sponsored (looks odd with ads, though)
Live Preview: s2naturegreen
Code & Instructions
Instructions to Use
Don't forget to please credit tomorrow_brings for the layout and header in your userinfo if using this layout.
The following descriptions are for the new customize journal page. I tried to make it as easy to follow as possible, but I'm not quite used to it yet.
1) Go to the CUSTOMIZE page.
2) Make sure you have "S2" selected.
3) In the Search bar on the first page, type "Smooth Sailing". Find "Blue Days" (should be third one) and select "Apply".
4) On the very bottom of the page, under "Choose a Page Setup", select "2 Column (sidebar on right)".
5) In top right, under "Name's Current Theme" click "Customize Your Theme".
6) Go to Display and then scroll down to Presentation. Under "Additional Options", find "Wrap Entry text under userinfo" and set to "Yes".
7) Next go to "Custom CSS". Make sure that all drop-down options are set to "No".
8) Copy the codes from the textarea below and paste them into the box. Hit save and voila!
NOTE: I have disabled the top navigation for the original version of this layout. In order to have your regular links show up (Recent, Profile, Friends, etc), you will have to enable your Links in the "Sidebar" settings and then set up you Link List.
Stylesheet Code
/*---------------------------------------------------
Layout: Nature is Green
Stylesheet Created By: Amy of Tomorrow Brings (http://community.livejournal.com/tomorrow_brings)
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browsers: Firefox, Opera and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: Trebuchet MS, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #ffffff;
color: #959595;
background-image: url('');
}
a {
color: #cccccc;
}
a:visited {
color: #898989;
}
.pageblock{
width:900px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #959595;
padding: 4px 4px 4px 24px;
margin-top: 4px;
text-align: center;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #cccccc;
}
blockquote {
margin: 10px 10px 10px 10px;
padding: 10px 0px 0px 35px;
background:url(http://img47.imageshack.us/img47/2047/bqleftgx7.png) top left no-repeat;}
/* HEADER */
.pageheaderblock {
text-align: left;
height: 120px;
margin-top: 35px;
margin-left: 15px;
background-image: url('http://img250.imageshack.us/img250/7247/swheaderiv1.png');
background-repeat: no-repeat;
}
.header-title {
background-color: #6b7da6;
font-family: ;
font-size: 30px;
color: #ffffff;
padding: 0px 20px 0px 20px;
display: none;
}
.header-subtitle {
background-color: #6b7da6;
color: #ffffff;
font-family: ;
font-size: 24px;
padding: 0px 24px 0px 24px;
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
}
.header-menu {
padding: 0px;
background-color: #aabbdd;
border-top: 0px solid #ffffff;
padding-left: 19px;
font-family: ;
font-size: 12px;
line-height: 20px;
display: none;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: left;
padding: 2px 6px 2px 6px;
color: #ffffff;
text-decoration: none;
}
.header-menu a:hover {
background-color: #6b7da6;
color: #ffffff;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
/* BODY */
.bodyblock {
padding: 10px 20px 0px 20px;
background-color: #ffffff;
text-align: left;
clear: left;
}
.bodyheaderblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #ffffff;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #ffffff;
}
.body-title {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 24px;
display: none;
}
.body-midtitle {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 8px;
}
/*ENTRIES*/
.entryHolder {
color: #959595;
background-color: #ffffff;
font-family: ;
font-size: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #c2c2c2;
margin: 4px 0px 15px 0px;
}
.entryUserinfo {
text-align: center;
margin: 20px 8px 5px 0px;
background-color: #ffffff;
}
.entryUserinfo-usericon img {
border: 3px solid #ebebeb;
padding: 5px;
}
.entryText {
padding: 6px;
padding-top:20px;
padding-bottom:20px;
}
.entryHeader {
background-color: #ffffff;
color: #8dc63f;
font-family: ;
font-size: 12px;
padding: 10px 0px 0px 8px;
border-bottom: 3px solid #8dc63f;
}
.entryHeader a{
color: #cccccc;
}
.entryHeaderSubject {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate a {
color : #cccccc;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #cccccc;
text-decoration : underline;
}
.entryMetadata {
margin-top: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.entryMetadata-content img {
}
.entryMetadata ul {
list-style-type: none;
}
.entryMetadata-label {}
}
.entryLinkbar {
font-family: ;
font-size: 11px;
color: #959595;
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: #959595;
white-space: nowrap;
padding: 6px;
text-align: left;
}
/*SIDEBAR*/
.sidebar {
font-family: ;
font-size: 11px;
margin-right: 20px;
margin-left: 20px;
padding-left: 25px;
width: 200px;
border-left: 1px dotted #c2c2c2;
text-align: left;
padding-top: 7px;
}
.sidebox {
color: #959595;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #8dc63f;
border-bottom: 3px solid #8dc63f;
text-transform: uppercase;
font-family: ;
font-size: 12px;
padding: 2px 0px 0px 8px;
text-align: ;
}
.sideboxContent {
text-align: left;
padding: 10px 4px 10px 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: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
.listtitle {
font-weight: bold;
}
.profile-label {
font-weight: bold;
}
/*OTHER PAGES*/
/* COMMENT PAGE */
.commentHolder {
color: #ffffff;
background-color: #ffffff;
border-top: 2px solid #ffffff;
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 {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: #dddddd;
color: #ffffff;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #ffffff;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-family: ;
font-size: 11px;
color: #ffffff;
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: #ffffff;
color: #ffffff;
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: #959595;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #959595;
}
.day-blank {
border: 1px solid #dddddd;
}
.day {
border: 1px solid #dddddd;
}
.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #959595;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #959595;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Other Version
Several people have mentioned how they didn't like the way the navigation doesn't show up and you have to add it to your link list. If you would like the Navigation to show up (I originally left it out because I didn't like how it looked), you may use the codes in the textbox below. With the navigation on, your layout will look something like: THIS.
To use this layout just follow all the instructions above (except about adding your navigation to your link list.)
/*---------------------------------------------------
Layout: Nature is Green
Stylesheet Created By: Amy of Tomorrow Brings (http://community.livejournal.com/tomorrow_brings)
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browsers: Firefox, Opera and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: Trebuchet MS, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #ffffff;
color: #959595;
background-image: url('');
}
a {
color: #cccccc;
}
a:visited {
color: #898989;
}
.pageblock{
width:900px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #959595;
padding: 4px 4px 4px 24px;
margin-top: 4px;
text-align: center;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #cccccc;
}
blockquote {
margin: 10px 10px 10px 10px;
padding: 10px 0px 0px 35px;
background:url(http://img47.imageshack.us/img47/2047/bqleftgx7.png) top left no-repeat;}
/* HEADER */
.pageheaderblock {
text-align: left;
height: 140px;
margin-top: 35px;
margin-left: 15px;
background-image:url('http://img250.imageshack.us/img250/7247/swheaderiv1.png');
background-repeat: no-repeat;
background-position: bottom center;}
.header-title {
background-color: #6b7da6;
font-family: ;
font-size: 30px;
color: #ffffff;
padding: 0px 20px 0px 20px;
display: none;
}
.header-subtitle {
background-color: #6b7da6;
color: #ffffff;
font-family: ;
font-size: 24px;
padding: 0px 24px 0px 24px;
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
}
.header-menu {
padding: 0px;
height: 25px;
background-color: #FFFFFF;
border-top: 0px solid #959595;
color: #959595;
padding-left: 0px;
font-family: ;
text-transform: uppercase;
text-align: center;
font-size: 11px;
line-height: 20px;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: left;
padding: 2px 6px 2px 6px;
color: #959595;
text-decoration: none;
}
.header-menu a:hover {
background-color: #ffffff;
color: #c2c2c2;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
/* BODY */
.bodyblock {
padding: 10px 20px 0px 20px;
background-color: #ffffff;
text-align: left;
clear: left;
}
.bodyheaderblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #ffffff;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #ffffff;
}
.body-title {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 24px;
display: none;
}
.body-midtitle {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 8px;
}
/*ENTRIES*/
.entryHolder {
color: #959595;
background-color: #ffffff;
font-family: ;
font-size: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #c2c2c2;
margin: 4px 0px 15px 0px;
}
.entryUserinfo {
text-align: center;
margin: 20px 8px 5px 0px;
background-color: #ffffff;
}
.entryUserinfo-usericon img {
border: 3px solid #ebebeb;
padding: 5px;
}
.entryText {
padding: 6px;
padding-top:20px;
padding-bottom:20px;
}
.entryHeader {
background-color: #ffffff;
color: #8dc63f;
font-family: ;
font-size: 12px;
padding: 10px 0px 0px 8px;
border-bottom: 3px solid #8dc63f;
}
.entryHeader a{
color: #cccccc;
}
.entryHeaderSubject {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate a {
color : #cccccc;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #cccccc;
text-decoration : underline;
}
.entryMetadata {
margin-top: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.entryMetadata-content img {
}
.entryMetadata ul {
list-style-type: none;
}
.entryMetadata-label {}
}
.entryLinkbar {
font-family: ;
font-size: 11px;
color: #959595;
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: #959595;
white-space: nowrap;
padding: 6px;
text-align: left;
}
/*SIDEBAR*/
.sidebar {
font-family: ;
font-size: 11px;
margin-right: 20px;
margin-left: 20px;
padding-left: 25px;
width: 200px;
border-left: 1px dotted #c2c2c2;
text-align: left;
padding-top: 7px;
}
.sidebox {
color: #959595;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #8dc63f;
border-bottom: 3px solid #8dc63f;
text-transform: uppercase;
font-family: ;
font-size: 12px;
padding: 2px 0px 0px 8px;
text-align: ;
}
.sideboxContent {
text-align: left;
padding: 10px 4px 10px 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: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
.listtitle {
font-weight: bold;
}
.profile-label {
font-weight: bold;
}
/*OTHER PAGES*/
/* COMMENT PAGE */
.commentHolder {
color: #ffffff;
background-color: #ffffff;
border-top: 2px solid #ffffff;
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 {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: #dddddd;
color: #ffffff;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #ffffff;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-family: ;
font-size: 11px;
color: #ffffff;
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: #ffffff;
color: #ffffff;
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: #959595;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #959595;
}
.day-blank {
border: 1px solid #dddddd;
}
.day {
border: 1px solid #dddddd;
}
.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #959595;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #959595;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Layout Images
All the images used in the layout are uploaded to imageshack, so you do not have to re-upload them unless you want to. However if you do, here are links to all the images used in the layout:
Nature is Green Header (created by me, using images from Jupiter Images).
Green Quotes (for block quotes, created by me).
And that should be all! I hope you all like the layout, I encourage you to comment and let me know what you think. And of course, feel free to comment if you have any questions.
Style: S2 Smooth Sailing
Looks best in: All Browsers (tested in Firefox, Opera & IE)
Works with: Basic, Paid & Sponsored (looks odd with ads, though)
Live Preview: s2naturegreen
Code & Instructions
Instructions to Use
Don't forget to please credit tomorrow_brings for the layout and header in your userinfo if using this layout.
The following descriptions are for the new customize journal page. I tried to make it as easy to follow as possible, but I'm not quite used to it yet.
1) Go to the CUSTOMIZE page.
2) Make sure you have "S2" selected.
3) In the Search bar on the first page, type "Smooth Sailing". Find "Blue Days" (should be third one) and select "Apply".
4) On the very bottom of the page, under "Choose a Page Setup", select "2 Column (sidebar on right)".
5) In top right, under "Name's Current Theme" click "Customize Your Theme".
6) Go to Display and then scroll down to Presentation. Under "Additional Options", find "Wrap Entry text under userinfo" and set to "Yes".
7) Next go to "Custom CSS". Make sure that all drop-down options are set to "No".
8) Copy the codes from the textarea below and paste them into the box. Hit save and voila!
NOTE: I have disabled the top navigation for the original version of this layout. In order to have your regular links show up (Recent, Profile, Friends, etc), you will have to enable your Links in the "Sidebar" settings and then set up you Link List.
Stylesheet Code
/*---------------------------------------------------
Layout: Nature is Green
Stylesheet Created By: Amy of Tomorrow Brings (http://community.livejournal.com/tomorrow_brings)
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browsers: Firefox, Opera and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: Trebuchet MS, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #ffffff;
color: #959595;
background-image: url('');
}
a {
color: #cccccc;
}
a:visited {
color: #898989;
}
.pageblock{
width:900px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #959595;
padding: 4px 4px 4px 24px;
margin-top: 4px;
text-align: center;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #cccccc;
}
blockquote {
margin: 10px 10px 10px 10px;
padding: 10px 0px 0px 35px;
background:url(http://img47.imageshack.us/img47/2047/bqleftgx7.png) top left no-repeat;}
/* HEADER */
.pageheaderblock {
text-align: left;
height: 120px;
margin-top: 35px;
margin-left: 15px;
background-image: url('http://img250.imageshack.us/img250/7247/swheaderiv1.png');
background-repeat: no-repeat;
}
.header-title {
background-color: #6b7da6;
font-family: ;
font-size: 30px;
color: #ffffff;
padding: 0px 20px 0px 20px;
display: none;
}
.header-subtitle {
background-color: #6b7da6;
color: #ffffff;
font-family: ;
font-size: 24px;
padding: 0px 24px 0px 24px;
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
}
.header-menu {
padding: 0px;
background-color: #aabbdd;
border-top: 0px solid #ffffff;
padding-left: 19px;
font-family: ;
font-size: 12px;
line-height: 20px;
display: none;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: left;
padding: 2px 6px 2px 6px;
color: #ffffff;
text-decoration: none;
}
.header-menu a:hover {
background-color: #6b7da6;
color: #ffffff;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
/* BODY */
.bodyblock {
padding: 10px 20px 0px 20px;
background-color: #ffffff;
text-align: left;
clear: left;
}
.bodyheaderblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #ffffff;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #ffffff;
}
.body-title {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 24px;
display: none;
}
.body-midtitle {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 8px;
}
/*ENTRIES*/
.entryHolder {
color: #959595;
background-color: #ffffff;
font-family: ;
font-size: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #c2c2c2;
margin: 4px 0px 15px 0px;
}
.entryUserinfo {
text-align: center;
margin: 20px 8px 5px 0px;
background-color: #ffffff;
}
.entryUserinfo-usericon img {
border: 3px solid #ebebeb;
padding: 5px;
}
.entryText {
padding: 6px;
padding-top:20px;
padding-bottom:20px;
}
.entryHeader {
background-color: #ffffff;
color: #8dc63f;
font-family: ;
font-size: 12px;
padding: 10px 0px 0px 8px;
border-bottom: 3px solid #8dc63f;
}
.entryHeader a{
color: #cccccc;
}
.entryHeaderSubject {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate a {
color : #cccccc;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #cccccc;
text-decoration : underline;
}
.entryMetadata {
margin-top: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.entryMetadata-content img {
}
.entryMetadata ul {
list-style-type: none;
}
.entryMetadata-label {}
}
.entryLinkbar {
font-family: ;
font-size: 11px;
color: #959595;
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: #959595;
white-space: nowrap;
padding: 6px;
text-align: left;
}
/*SIDEBAR*/
.sidebar {
font-family: ;
font-size: 11px;
margin-right: 20px;
margin-left: 20px;
padding-left: 25px;
width: 200px;
border-left: 1px dotted #c2c2c2;
text-align: left;
padding-top: 7px;
}
.sidebox {
color: #959595;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #8dc63f;
border-bottom: 3px solid #8dc63f;
text-transform: uppercase;
font-family: ;
font-size: 12px;
padding: 2px 0px 0px 8px;
text-align: ;
}
.sideboxContent {
text-align: left;
padding: 10px 4px 10px 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: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
.listtitle {
font-weight: bold;
}
.profile-label {
font-weight: bold;
}
/*OTHER PAGES*/
/* COMMENT PAGE */
.commentHolder {
color: #ffffff;
background-color: #ffffff;
border-top: 2px solid #ffffff;
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 {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: #dddddd;
color: #ffffff;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #ffffff;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-family: ;
font-size: 11px;
color: #ffffff;
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: #ffffff;
color: #ffffff;
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: #959595;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #959595;
}
.day-blank {
border: 1px solid #dddddd;
}
.day {
border: 1px solid #dddddd;
}
.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #959595;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #959595;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Other Version
Several people have mentioned how they didn't like the way the navigation doesn't show up and you have to add it to your link list. If you would like the Navigation to show up (I originally left it out because I didn't like how it looked), you may use the codes in the textbox below. With the navigation on, your layout will look something like: THIS.
To use this layout just follow all the instructions above (except about adding your navigation to your link list.)
/*---------------------------------------------------
Layout: Nature is Green
Stylesheet Created By: Amy of Tomorrow Brings (http://community.livejournal.com/tomorrow_brings)
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browsers: Firefox, Opera and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: Trebuchet MS, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #ffffff;
color: #959595;
background-image: url('');
}
a {
color: #cccccc;
}
a:visited {
color: #898989;
}
.pageblock{
width:900px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #959595;
padding: 4px 4px 4px 24px;
margin-top: 4px;
text-align: center;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #cccccc;
}
blockquote {
margin: 10px 10px 10px 10px;
padding: 10px 0px 0px 35px;
background:url(http://img47.imageshack.us/img47/2047/bqleftgx7.png) top left no-repeat;}
/* HEADER */
.pageheaderblock {
text-align: left;
height: 140px;
margin-top: 35px;
margin-left: 15px;
background-image:url('http://img250.imageshack.us/img250/7247/swheaderiv1.png');
background-repeat: no-repeat;
background-position: bottom center;}
.header-title {
background-color: #6b7da6;
font-family: ;
font-size: 30px;
color: #ffffff;
padding: 0px 20px 0px 20px;
display: none;
}
.header-subtitle {
background-color: #6b7da6;
color: #ffffff;
font-family: ;
font-size: 24px;
padding: 0px 24px 0px 24px;
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
}
.header-menu {
padding: 0px;
height: 25px;
background-color: #FFFFFF;
border-top: 0px solid #959595;
color: #959595;
padding-left: 0px;
font-family: ;
text-transform: uppercase;
text-align: center;
font-size: 11px;
line-height: 20px;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: left;
padding: 2px 6px 2px 6px;
color: #959595;
text-decoration: none;
}
.header-menu a:hover {
background-color: #ffffff;
color: #c2c2c2;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
/* BODY */
.bodyblock {
padding: 10px 20px 0px 20px;
background-color: #ffffff;
text-align: left;
clear: left;
}
.bodyheaderblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
border-top: 0px solid #ffffff;
background-color: #ffffff;
color: #ffffff;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #ffffff;
}
.body-title {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 24px;
display: none;
}
.body-midtitle {
font-family: ;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-left: 8px;
}
/*ENTRIES*/
.entryHolder {
color: #959595;
background-color: #ffffff;
font-family: ;
font-size: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #c2c2c2;
margin: 4px 0px 15px 0px;
}
.entryUserinfo {
text-align: center;
margin: 20px 8px 5px 0px;
background-color: #ffffff;
}
.entryUserinfo-usericon img {
border: 3px solid #ebebeb;
padding: 5px;
}
.entryText {
padding: 6px;
padding-top:20px;
padding-bottom:20px;
}
.entryHeader {
background-color: #ffffff;
color: #8dc63f;
font-family: ;
font-size: 12px;
padding: 10px 0px 0px 8px;
border-bottom: 3px solid #8dc63f;
}
.entryHeader a{
color: #cccccc;
}
.entryHeaderSubject {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate {
text-transform: uppercase;
font-size: 12px;
}
.entryHeaderDate a {
color : #cccccc;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #cccccc;
text-decoration : underline;
}
.entryMetadata {
margin-top: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.entryMetadata-content img {
}
.entryMetadata ul {
list-style-type: none;
}
.entryMetadata-label {}
}
.entryLinkbar {
font-family: ;
font-size: 11px;
color: #959595;
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: #959595;
white-space: nowrap;
padding: 6px;
text-align: left;
}
/*SIDEBAR*/
.sidebar {
font-family: ;
font-size: 11px;
margin-right: 20px;
margin-left: 20px;
padding-left: 25px;
width: 200px;
border-left: 1px dotted #c2c2c2;
text-align: left;
padding-top: 7px;
}
.sidebox {
color: #959595;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #8dc63f;
border-bottom: 3px solid #8dc63f;
text-transform: uppercase;
font-family: ;
font-size: 12px;
padding: 2px 0px 0px 8px;
text-align: ;
}
.sideboxContent {
text-align: left;
padding: 10px 4px 10px 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: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
.listtitle {
font-weight: bold;
}
.profile-label {
font-weight: bold;
}
/*OTHER PAGES*/
/* COMMENT PAGE */
.commentHolder {
color: #ffffff;
background-color: #ffffff;
border-top: 2px solid #ffffff;
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 {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: #dddddd;
color: #ffffff;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #ffffff;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-family: ;
font-size: 11px;
color: #ffffff;
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: #ffffff;
color: #ffffff;
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: #959595;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #959595;
}
.day-blank {
border: 1px solid #dddddd;
}
.day {
border: 1px solid #dddddd;
}
.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #959595;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #959595;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Layout Images
All the images used in the layout are uploaded to imageshack, so you do not have to re-upload them unless you want to. However if you do, here are links to all the images used in the layout:
Nature is Green Header (created by me, using images from Jupiter Images).
Green Quotes (for block quotes, created by me).
And that should be all! I hope you all like the layout, I encourage you to comment and let me know what you think. And of course, feel free to comment if you have any questions.