Okay, okay. I'm done. I'm done! I swear!
Style: S2 Smooth Sailing
Sidebar? No
Browser Compatibility: Firefox and IE compatible; there are some slight bugs in IE that I'm not going to bother to fix, though :)
Account Compatibility: All levels.
Navbar Compatibility: Compatible *g*
Working Preview:
hl_atla1Credits:♥
Iroh.org for the panoramic screencap;
♥
carriep63 for her excellent
Smooth Sailing CSS Breakdown;
♥
FamFamFam.com for the lovely silk icons; and
♥
loveicon for her
Tiny Icon Generator.
Note: The little Aang head used for the user icon and the Air symbol for communities were both drawn by me. *g*
NOTES:
>> The layout is customized for ALL views, including archive, tags, etc.
>> Do you hate it when someone posts a really big picture or a long string of letters that just totally stretches out your layout and kills it? Yeah, me too, so I coded for it so that the layout will
scroll when something too large is put into it.
>> PLUS USERS: The ad placement will not affect the layout on the Recent, Friends, and Day views, but it WILL affect your layout if you use customized comment pages, and it'll affect your archive views and yadda yadda yadda. It won't stretch it out; it'll just look a little ugly. :B
INSTALLATION INSTRUCTIONS:
>>oo. PLUS USERS: Go to
Ad Settings → Ad Placement: Horizontal → Save. Then, after the page has finished reloading, repeat EXCEPT set Ad Placement: Placement Between Entries → Save. This is so that pages without the Placement Between Entries option will use the Horizontal option. VERTICAL WILL NOT WORK; it'll just make the layout look wonky. *g*
>>o1. Go to the
Customize page.
>>o2. Style System → S2 → Save Changes
>>o3. Look and Feel tab → Layout & Language: Smooth Sailing → Save Changes
>>o4. Custom Options tab → Presentation link → Usericon Visibility: Show on all pages
>>o5. Custom Options tab → Sidebar link → Sidebar Position: Do Not Show
>>o6. Custom CSS tab → Use Layout's Stylesheet: No
>>o7. Copy the following code into the Custom Stylesheet box:
/* PAGE */
body {
font-family: century gothic, sans-serif;
font-size: 8pt;
margin: 0px;
background-color: #daeec4;
color: #8483bc;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/bkgd.png');
background-position: center top;
background-repeat: repeat-y;
}
.pageblock {
width: 598px;
margin: 0 auto;
background: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/header.jpg');
background-repeat: no-repeat;
background-position: top center;}
.pagefooterblock {
background-color: #8483bc;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/credit.png');
background-position: center bottom;
background-repeat: no-repeat;
text-align: center;
color: #fff4cd;
margin: 0px;
padding: 5px;
padding-bottom: 10px;
text-transform: uppercase;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #fff4cd;
}
hr {
height: 0px;
color: #fff4cd;
background-color: #fff4cd;
border-top: 1px dashed #8483bc;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
}
/* HEADER */
.pageheaderblock {
padding-top: 400px;
background-color: transparent;
}
.header-title {
display: none;
}
.header-subtitle {
display: none;
}
.header-icon {
display: none;
}
.header-menu {
background-color: #8483bc;
text-align: center;
padding: 4px 0px 4px 0px;
}
.header-menu a, .header-menu a:visited, .header-menu a:link {
white-space: nowrap;
text-align: left;
padding: 2px 6px 2px 6px;
color: #fff4cd;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-family: tahoma;
font-size: 8pt;
}
.header-menu a:hover {
background-color: transparent;
color: #fff4cd;
border-bottom: 1px dashed #6361B4;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
/* BODY */
.bodyblock {
padding: 0px;
}
.bodyheaderblock {
background-color: #bfd9c2;
color: #fff4cd;
text-align: center;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
background-color: #8483bc;
color: #fff4cd;
margin: 4px 4px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #fff4cd;
}
.body-title {
font-family: tahoma;
font-size: 8pt;
color: #fff4cd;
text-align: center;
padding: 5px;
font-weight: bold;
text-transform: uppercase;
}
.body-midtitle {
font-family: tahoma;
color: #fff4cd;
font-size: 8pt;
padding: 5px;
font-weight: bold;
text-transform: uppercase;
border-top: 1px solid #f6e89f;
}
div, table, tr, td, center, p, textarea, input, form, .daysubjects, select {
font-family: century gothic;
font-size: 8pt;
color: #8483BC;
letter-spacing: 0pt;
}
a:link, .entryHeader a {
color: #DCB1A2;
text-decoration: none;
font-weight: bold;
padding: 1px;
}
a:visited, .entryHeader a:visited {
color: #DCB1A2;
text-decoration: none;
font-weight: bold;
padding: 1px;
}
a:active {
color: #DCB1A2;
text-decoration: none;
font-weight: normal;
padding: 1px;
}
a:hover {
color: #DCB1A2;
border-bottom: 1px dashed #6361B4;
text-decoration: none;
font-weight: bold;
padding: 1px;
}
/*ENTRIES*/
.entryHolder {
color: #8483bc;
background-color: #fff4cd;
width: 480px;
}
.entryUserinfo {
text-align: center;
margin: 8px 8px 8px 10px;
background-color: #fff4cd;
width: 100px;
}
.entryUserinfo-usericon img {
border: 0;
}
.entryText {
padding: 6px;
background-color: #fff4cd;
width: 460px;
text-align: justify;
overflow-x: auto;
}
.entryHeader {
background-color: #fff4cd;
}
.entryHeader a{
color: #dcb1a2;
}
.entryHeaderSubject {
font-family: arial black;
font-size: 10pt;
font-weight: normal;
color: #dcb1a2;
text-transform: uppercase;
letter-spacing: -0.5pt;
padding-right: 5px;
}
.entryHeaderDate a {
color: #dcb1a2;
text-decoration: none;
}
.entryHeaderDate {
font-family: tahoma;
font-size: 12pt;
font-weight: normal;
color: #CCCCCC;
text-transform: uppercase;
letter-spacing: -1.5pt;
padding-left: 5px;
}
.entryHeaderDate a:hover {
color: #dcb1a2;
text-decoration: none;
border-bottom: 1px dashed #6361b4;
}
.entryMetadata {
padding-left: 6px;
padding-bottom: 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 {
color: #6361b4;
padding: 4px 0px 4px 0px;
text-align: center;
background-color: #bfd9c2;
width: 598px;
}
.entryLinkbar a {
color: #fff4cd;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
blockquote {
background-color: #bfd9c2;
color: #6361B4;
padding: 5px;
border: 1px dashed #6361B4;
}
input, textarea, select {
background-color: #bfd9c2;
color: #6361B4;
border: 0px;
}
/*FOOTER*/
#footer-menu {
font-size: 11px;
background-color: #fff4cd;
text-align: right;
margin: 0px;
padding: 5px;
}
#footer-menu a, .footer-menu a:visited {
white-space: nowrap;
padding: 6px;
text-align: left;
font-family: tahoma;
font-size: 8pt;
text-transform: uppercase;
font-weight: bold;
color: #bfd9c2;
}
/*SIDEBAR*/
.sidebar {
DISPLAY: NONE;
font-family: ;
font-size: 11px;
margin-right: 20px;
width: 200px;
}
.sidebox {
color: #8483bc;
background-color: #f8f8f8;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #f6e89f;
color: #8483bc;
border-top: 2px solid #ffffff;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
text-align: ;
}
.sideboxContent {
text-align: left;
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: 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: #8483bc;
background-color: #fff4cd;
font-family: ;
font-size: 8pt;
margin: 4px 0px 4px 0px;
overflow-x: auto;
}
.commentUserinfo {
text-align: center;
margin: 8px 8px 8px 10px;
background-color: #fff4cd;
width: 100px;
}
.commentUserinfo-usericon img {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: #fff4cd;
color: #cccccc;
font-family: tahoma;
font-size: 11pt;
padding: 4px 0px 4px 8px;
text-transform: uppercase;
letter-spacing: -0.5pt;
}
.commentHeader a{
color: #dcb1a2;
}
.commentHeaderScreened {
font-family: tahoma;
font-size: 11pt;
background-color: #efefef;
padding: 4px 0px 4px 8px;
color: #cccccc;
}
.commentHeaderSubject {
font-weight: bold;
color: #dcb1a2;
}
.commentLinkbar {
font-family: ;
font-size: 8pt;
color: #dcb1a2;
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: #fff4cd;
color: #8483bc;
}
#commenttext{
width:100%;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 599px;
border: 1px solid #f6e89f;
margin: 0 auto;
}
.daysubjects {
color: #8483bc;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #f6e89f;
background: #fff4b9;
color: #8483bc;
}
.day-blank {
border: 1px solid #f6e89f;
}
.day {
border: 1px solid #f6e89f;
}
.day-date {
border-right: 1px solid #f6e89f;
border-bottom: 1px solid #f6e89f;
color: #8483bc;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #8483bc;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #8483bc;
}
.tagstable { width: 100%; }
/*TINY ICONS*/
.subject img[src="
http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 2px;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/lock.png); }
.subject img[src="
http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 2px;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/eye.png); }
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/userinfo.gif); padding: 7px 7px 0 2px;
padding-bottom: 3px;
}
.ljuser img[src="
http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/userinfo.gif); padding: 7px 7px 0 2px;
padding-bottom: 3px;
}
.ljuser img[src="
http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/community.gif); padding: 10px 10px 0 2px;
}
>>o8. Save Changes. You're done!
>>o9. If the bar at the top is overflowing, you may wish to go back to the
Customize page, go to the Custom Options tab, go to the Menu subheading, then change the text to something shorter so that it all fits. :)
NOTES ON COMPATIBILITY:
These are the following known bugs regarding the layout in IE:
♥ The PNGs will not display their transparency.
♥ There is a border around the horizontal rule, which can't be fixed as far as I know, because IE has little customization for horizontal rules.
♥ IE does not support scrolling for things that stretch out the layout.
If you find any more, don't hesitate to let me know :)
ADDITIONAL CUSTOMIZATION:
>> I do allow you to direct-link, but if you can host your own images (Photobucket, Imageshack, Tinypic, own domain, etc.), then I would prefer if you would do so, as it lessens the strain on my bandwidth. :) If you're going to do that (thank you!), then these are the images you need to save and upload:
♥
one♥
two♥
three♥
four♥
five♥
six♥
seven And if you want the Friends Only banner, then:
♥
eight Then, copy the CSS to Notepad or a similar no-frills text editor, press Ctrl + H to bring up the Replace feature, and replace
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_atla1/ with your URL (minus the filename).
Rules:
♥ You steal, you die. It's that simple. 8D
♥ Credit isn't necessary, since it's embedded into the layout. HOWEVER, if you remove the credit line, I do require that you add some sort of link in your profile directing people to
helium_icons and/or this entry.
♥ Comments are greatly appreciated :B Especially if you find a (Firefox-related) bug.
Thanks for looking! ♥
- hl