layout: sailing at dusk [+ 2 matching headers]
EDIT: THIS IS VERSION 2.0, ALL MINOR PROBLEMS SHOULD NOW BE FIXED.
works with: all LJ accounts
starts with style: S2 ---> Smooth Sailing BLUE DAYS
colors used: grey, white, black, cyan, pink
best viewed: Firefox browser.
SAILING AT DUSK
image preview | live preview
/* PAGE & BODY */
body {
font-family: Tahoma, Helvetica, sans-serif;
background-color: #FFFFFF;
background-image: url("http://i148.photobucket.com/albums/s11/vands88/misc/handwriting2.png");
background-attachment: fixed;
background-repeat: repeat;
}
.body-title, body-midtitle {
visibility: hidden;
background-color: #dddddd;
height: 0px;
}
a, a:link, a:active, a:visited {
color: #202020;
text-transform: uppercase;
text-decoration: none;
}
a:hover {
color: #83ccf2;
background-color: #ffffff;
text-transform: uppercase;
}
.pageblock {
position: center;
font-family: Sylfaen, sans-serif;
width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
background-color: #f8f8f8;
border-left: #dddddd solid 2px;
border-right: #dddddd solid 2px;
}
.bodyheaderblock {
visibility: hidden;
background-color: #b0ddff;
height: 0px;
}
.bodynavblock {
background-color: #ffffff;
line-height: 5px;
padding: 5px;
text-align: center;
}
/* HEADER AND FOOTER */
.header-title {
visibility: hidden;
}
.header-subtitle {
visibility: hidden;
}
.header-menu {
position: center;
text-transform: uppercase;
font-size: 8pt;
margin-top: 130px;
margin-bottom: 0px;
height: 20px;
padding-bottom: 8px;
padding-top: 8px;
padding-left: 2px;
padding-right: 2px;
border-bottom: 3px #ffc7e7 solid;
border-right: none;
border-left: none;
background-color: #b0ddff;
}
.header-menu a {
background-color: #dddddd;
border: 1px #ffffff solid;
margin-left: 2px;
margin-right: 3px;
color: #ffffff;
}
.header-menu a:active {
color: #ffffff;
background-color: #b0ddff;
}
.header-menu a:visited {
color: #ffffff;
}
.header-menu a:hover {
color: #FFFFFF;
background-color: #ffc7e7;
}
.pageheaderblock {
background-color: transparent;
background-image: url("http://img382.imageshack.us/img382/2947/grunge2fe1.png");
background-repeat: no-repeat;
width: 700px;
height: 200px;
margin-bottom: 25px;
margin-top: 0px;
border: none;
}
.pagefooterblock {
text-align: center;
font-size: 8px;
color: #202020;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
background-color: #ffc7e7;
border: none;
}
#footer-menu {
height: 0px;
margin-top: 0px;
padding: 0px;
visibility: hidden;
background-color: transparent;
}
/*ENTRIES*/
.entryHolder {
width: 500px;
margin-top: 25px;
margin-bottom: 5px;
padding: 0px;
border: 2px solid #dddddd;
}
.entryUserinfo {
padding: 0px 7px 0px 0px;
}
.entryUserinfo-usericon img {
border: 2px #dddddd solid;
margin: 5px;
}
.entryText {
color: #202020;
font-size: 14px;
}
.entryHeaderSubject {
align: right;
text-transform: uppercase;
font-size: 13px;
}
.entryHeaderDate {
text-transform: uppercase;
color: #ffffff;
font-size: 10px;
}
.entryLinkbar {
font-size: 10px;
background-color: #dddddd;
line-height: 15px;
height: 15px;
width: 500px;
margin-bottom: 2px;
margin-top: 8px;
}
.entryLinkbar a {
padding-right: 2px;
padding-left: 2px;
padding-top: 6px;
padding-bottom: 5px;
color: #FFFFFF;
}
.entryLinkbar a:hover {
padding-right: 2px;
padding-left: 2px;
padding-top: 6px;
padding-bottom: 5px;
background-color: #ffffff;
color: #fa8bb8;
}
.entryLinkbar li {
display: inline;
border-right: 1px #f8f8f8 solid;
border-left: 1px #f8f8f8 solid;
padding: 5px;
margin-bottom: 0px;
}
.entryMetadata {
font-size: 11px;
margin-top: 8px;
margin-bottom: 15px;
}
/*SIDEBAR*/
.sidebox {
width: 145px;
font-size: 10px;
margin-left: 0px;
margin-top: 25px;
padding-bottom: 8px;
}
.sideboxTitle {
text-transform: uppercase;
font-size: 12px;
border-bottom: 2px solid #ffc7e7;
border-top: 2px solid #ffffff;
margin-bottom: 3px;
}
.sidebox #tags_sidebox a {
display: block;
}
.sidebox #summary {
margin-bottom: 3px;
}
/* COMMENTS */
.commentHolder {
width: 450px;
border: 2px solid #dddddd;
margin-bottom: 5px;
padding-top 0px;
padding: auto;
}
.commentText {
padding: auto;
}
.commentLinkbar {
background-color: #b0ddff;
line-height: 8px;
height: 8px;
margin-bottom: 2px;
padding-bottom: 10px;
text-align: right;
padding: auto;
}
.commentLinkbar ul {
padding: auto;
}
.commentLinkbar li {
padding: auto;
display: inline;
}
.replyform textarea {
width: 400px;
}
.commentUserinfo-usericon img {
border: 2px #dddddd solid;
margin: 5px;
}
/* EXTRAS */
.month {
width: 400px;
background-color: #f8f8f8;
}
.daytitles {
width: 100px;
}
.day-count a {
color: #b0ddff;
}
.tagstable {
width: 450px;
}
INSTRUCTIONS:
1. Customize Journal --> Select New Theme --> Find "BLUE DAYS smooth sailing" and click Apply Theme (the quickest way to do this is searching for "smooth sailing" using the search feature)
2. Double check you've got the Blue Days theme, as we're pretty much doing an edit with this layout.
3. Scroll down and click the option with the sidebar on the RIGHT.
4. Click "customize theme" and under the DISPLAY area make these changes:
- Entries per page: pick between 3 and 10 (for an explanation as to why, see below)
- MetaData Position: above
- Wrap Entry text under userinfo: yes
- Linkbar Alignment in Entries: center
- Header Text Alignment: center
[To make the layout easier to use and navigate around, I suggest only having 3-7 entries per page. This will prevent it from looking cluttered and because the only navigation is positioned in the header, the fewer entries per page mean the quicker it will be when jumping backward and forward through journal entries.]
5. Customize Your Theme ---> Custom CSS ---> make sure the drop down boxes are set to YES
6. Copy and paste all the code from the above text box above and enter it into the Custom Stylesheet box
5. Save the changes
6. Customize Your Theme ---> Sidebar ---> Profile: HIDE. Pick what other tools you want to show or hide on the sidebar & the ordering you wish and save the changes.
7. Customize Your Theme ---> Text ---> Change whatever you want to change
(short text in uppercase will probably look the best with the layout)
8. Change any other minor details: moodthemes, your website, free text etc.
CHANGING THE HEADER/BACKGROUND:
TO PREVENT BANDWIDTH ISSUES & TO ENSURE THE IMAGES SHOW, PLEASE UPLOAD THE BACKGROUND AND THE HEADER TO YOUR OWN SERVER (e.g photobucket & imageshack). THANKS!
There are TWO DIFFERENT VERSIONS of the matching headers, both with a grunge look:
SIGN | LOVE
Once you have uploaded the banner of your choice to the server of your choice, simply copy the image location and paste it in the pageheaderblock section of the code in between the speech marks.
If you would like me to edit or personalise one of the banners, please just comment and I'll see what I can do!
You're more than welcome to use your own banner, simply follow the instructions above but remember to change the height and width data also in that section to match your chosen image.
If you're making your own, some useful info for you:
#ffc7e7 = pink
#b0ddff = cyan
#f8f8f8 = light grey
#dddddd = grey
#202020 = black
recommended width = 700px
recommended height = 200px
You may also need to change the size of margin-top in the header-menu section.
If you would like to delete the header then go to the custom CSS and delete the pageheaderblock section and adapt the margin-top in the header-menu section to make it look snazzy. I haven't attempted this yet though, so if you've got any problems give me a shout!
TIPS:
* I recommend between 3-7 entries per page (10 at a push) for reasons mentioned previously.
* Navigation & other header links should be kept as short as possible to ensure they fit on the navigation bar at the top of the page. The same goes for link bars at the bottom of entries.
* Upload background & header to own server (e.g. photobucket) to prevent bandwidth issues and to increase the probability of images showing.
TERMS OF USE:
1. Please credit geeky_ness or vands88@geeky_ness somewhere in your profile/sidebar.
2. Editing is okay, but editing it and then calling it yours is NOT.
3. No stealing my codes...please?
4. Comment if taking. Not mandatory, but it's good manners.
I strongly suggest you don't edit the codes unless you know what you're doing. I don't have time to answer and solve all of the comments saying "I changed this and now it's gone all wrong"...plus, the odds are I won't know what to do. So, if you edit it, on your own head be it.
However, if you do have a query, want something customised or need a little help, I'm your girl. :-)
Ok, I'm done! Enjoy it!
.
works with: all LJ accounts
starts with style: S2 ---> Smooth Sailing BLUE DAYS
colors used: grey, white, black, cyan, pink
best viewed: Firefox browser.
SAILING AT DUSK
image preview | live preview
/* PAGE & BODY */
body {
font-family: Tahoma, Helvetica, sans-serif;
background-color: #FFFFFF;
background-image: url("http://i148.photobucket.com/albums/s11/vands88/misc/handwriting2.png");
background-attachment: fixed;
background-repeat: repeat;
}
.body-title, body-midtitle {
visibility: hidden;
background-color: #dddddd;
height: 0px;
}
a, a:link, a:active, a:visited {
color: #202020;
text-transform: uppercase;
text-decoration: none;
}
a:hover {
color: #83ccf2;
background-color: #ffffff;
text-transform: uppercase;
}
.pageblock {
position: center;
font-family: Sylfaen, sans-serif;
width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
background-color: #f8f8f8;
border-left: #dddddd solid 2px;
border-right: #dddddd solid 2px;
}
.bodyheaderblock {
visibility: hidden;
background-color: #b0ddff;
height: 0px;
}
.bodynavblock {
background-color: #ffffff;
line-height: 5px;
padding: 5px;
text-align: center;
}
/* HEADER AND FOOTER */
.header-title {
visibility: hidden;
}
.header-subtitle {
visibility: hidden;
}
.header-menu {
position: center;
text-transform: uppercase;
font-size: 8pt;
margin-top: 130px;
margin-bottom: 0px;
height: 20px;
padding-bottom: 8px;
padding-top: 8px;
padding-left: 2px;
padding-right: 2px;
border-bottom: 3px #ffc7e7 solid;
border-right: none;
border-left: none;
background-color: #b0ddff;
}
.header-menu a {
background-color: #dddddd;
border: 1px #ffffff solid;
margin-left: 2px;
margin-right: 3px;
color: #ffffff;
}
.header-menu a:active {
color: #ffffff;
background-color: #b0ddff;
}
.header-menu a:visited {
color: #ffffff;
}
.header-menu a:hover {
color: #FFFFFF;
background-color: #ffc7e7;
}
.pageheaderblock {
background-color: transparent;
background-image: url("http://img382.imageshack.us/img382/2947/grunge2fe1.png");
background-repeat: no-repeat;
width: 700px;
height: 200px;
margin-bottom: 25px;
margin-top: 0px;
border: none;
}
.pagefooterblock {
text-align: center;
font-size: 8px;
color: #202020;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
background-color: #ffc7e7;
border: none;
}
#footer-menu {
height: 0px;
margin-top: 0px;
padding: 0px;
visibility: hidden;
background-color: transparent;
}
/*ENTRIES*/
.entryHolder {
width: 500px;
margin-top: 25px;
margin-bottom: 5px;
padding: 0px;
border: 2px solid #dddddd;
}
.entryUserinfo {
padding: 0px 7px 0px 0px;
}
.entryUserinfo-usericon img {
border: 2px #dddddd solid;
margin: 5px;
}
.entryText {
color: #202020;
font-size: 14px;
}
.entryHeaderSubject {
align: right;
text-transform: uppercase;
font-size: 13px;
}
.entryHeaderDate {
text-transform: uppercase;
color: #ffffff;
font-size: 10px;
}
.entryLinkbar {
font-size: 10px;
background-color: #dddddd;
line-height: 15px;
height: 15px;
width: 500px;
margin-bottom: 2px;
margin-top: 8px;
}
.entryLinkbar a {
padding-right: 2px;
padding-left: 2px;
padding-top: 6px;
padding-bottom: 5px;
color: #FFFFFF;
}
.entryLinkbar a:hover {
padding-right: 2px;
padding-left: 2px;
padding-top: 6px;
padding-bottom: 5px;
background-color: #ffffff;
color: #fa8bb8;
}
.entryLinkbar li {
display: inline;
border-right: 1px #f8f8f8 solid;
border-left: 1px #f8f8f8 solid;
padding: 5px;
margin-bottom: 0px;
}
.entryMetadata {
font-size: 11px;
margin-top: 8px;
margin-bottom: 15px;
}
/*SIDEBAR*/
.sidebox {
width: 145px;
font-size: 10px;
margin-left: 0px;
margin-top: 25px;
padding-bottom: 8px;
}
.sideboxTitle {
text-transform: uppercase;
font-size: 12px;
border-bottom: 2px solid #ffc7e7;
border-top: 2px solid #ffffff;
margin-bottom: 3px;
}
.sidebox #tags_sidebox a {
display: block;
}
.sidebox #summary {
margin-bottom: 3px;
}
/* COMMENTS */
.commentHolder {
width: 450px;
border: 2px solid #dddddd;
margin-bottom: 5px;
padding-top 0px;
padding: auto;
}
.commentText {
padding: auto;
}
.commentLinkbar {
background-color: #b0ddff;
line-height: 8px;
height: 8px;
margin-bottom: 2px;
padding-bottom: 10px;
text-align: right;
padding: auto;
}
.commentLinkbar ul {
padding: auto;
}
.commentLinkbar li {
padding: auto;
display: inline;
}
.replyform textarea {
width: 400px;
}
.commentUserinfo-usericon img {
border: 2px #dddddd solid;
margin: 5px;
}
/* EXTRAS */
.month {
width: 400px;
background-color: #f8f8f8;
}
.daytitles {
width: 100px;
}
.day-count a {
color: #b0ddff;
}
.tagstable {
width: 450px;
}
INSTRUCTIONS:
1. Customize Journal --> Select New Theme --> Find "BLUE DAYS smooth sailing" and click Apply Theme (the quickest way to do this is searching for "smooth sailing" using the search feature)
2. Double check you've got the Blue Days theme, as we're pretty much doing an edit with this layout.
3. Scroll down and click the option with the sidebar on the RIGHT.
4. Click "customize theme" and under the DISPLAY area make these changes:
- Entries per page: pick between 3 and 10 (for an explanation as to why, see below)
- MetaData Position: above
- Wrap Entry text under userinfo: yes
- Linkbar Alignment in Entries: center
- Header Text Alignment: center
[To make the layout easier to use and navigate around, I suggest only having 3-7 entries per page. This will prevent it from looking cluttered and because the only navigation is positioned in the header, the fewer entries per page mean the quicker it will be when jumping backward and forward through journal entries.]
5. Customize Your Theme ---> Custom CSS ---> make sure the drop down boxes are set to YES
6. Copy and paste all the code from the above text box above and enter it into the Custom Stylesheet box
5. Save the changes
6. Customize Your Theme ---> Sidebar ---> Profile: HIDE. Pick what other tools you want to show or hide on the sidebar & the ordering you wish and save the changes.
7. Customize Your Theme ---> Text ---> Change whatever you want to change
(short text in uppercase will probably look the best with the layout)
8. Change any other minor details: moodthemes, your website, free text etc.
CHANGING THE HEADER/BACKGROUND:
TO PREVENT BANDWIDTH ISSUES & TO ENSURE THE IMAGES SHOW, PLEASE UPLOAD THE BACKGROUND AND THE HEADER TO YOUR OWN SERVER (e.g photobucket & imageshack). THANKS!
There are TWO DIFFERENT VERSIONS of the matching headers, both with a grunge look:
SIGN | LOVE
Once you have uploaded the banner of your choice to the server of your choice, simply copy the image location and paste it in the pageheaderblock section of the code in between the speech marks.
If you would like me to edit or personalise one of the banners, please just comment and I'll see what I can do!
You're more than welcome to use your own banner, simply follow the instructions above but remember to change the height and width data also in that section to match your chosen image.
If you're making your own, some useful info for you:
#ffc7e7 = pink
#b0ddff = cyan
#f8f8f8 = light grey
#dddddd = grey
#202020 = black
recommended width = 700px
recommended height = 200px
You may also need to change the size of margin-top in the header-menu section.
If you would like to delete the header then go to the custom CSS and delete the pageheaderblock section and adapt the margin-top in the header-menu section to make it look snazzy. I haven't attempted this yet though, so if you've got any problems give me a shout!
TIPS:
* I recommend between 3-7 entries per page (10 at a push) for reasons mentioned previously.
* Navigation & other header links should be kept as short as possible to ensure they fit on the navigation bar at the top of the page. The same goes for link bars at the bottom of entries.
* Upload background & header to own server (e.g. photobucket) to prevent bandwidth issues and to increase the probability of images showing.
TERMS OF USE:
1. Please credit geeky_ness or vands88@geeky_ness somewhere in your profile/sidebar.
2. Editing is okay, but editing it and then calling it yours is NOT.
3. No stealing my codes...please?
4. Comment if taking. Not mandatory, but it's good manners.
I strongly suggest you don't edit the codes unless you know what you're doing. I don't have time to answer and solve all of the comments saying "I changed this and now it's gone all wrong"...plus, the odds are I won't know what to do. So, if you edit it, on your own head be it.
However, if you do have a query, want something customised or need a little help, I'm your girl. :-)
Ok, I'm done! Enjoy it!
.