Omg, honest, I'll stop the DOGS spam. e_______e; It's just that... Once I get the base coding down, it takes me, let's see... A sixth of the time to churn out a layout? XD;;;
Expect some A:tLA layouts soon, too :B
Style: S2 Smooth Sailing
Sidebar? Available with and without one.
Browser Compatibility: Firefox and IE compatible; there are some slight bugs in IE that I'm not going to bother to fix, though 8DD;;
Account Compatibility: All levels.
Navbar Compatibility: It was coded with it on, so it's compatible.
Working Preview:
hl_dogs2 (sidebar) |
hl_dogs2_nosb (no sidebar)
Credits:♥
Hybrid Genesis for textures;
♥
carriep63 for her excellent
Smooth Sailing CSS Breakdown;
♥
FamFamFam.com for the lovely silk icons; and
♥
loveicon for her
Tiny Icon Generator.
NOTES:
>> The layout is customized for ALL views, including archive, tags, etc.
>> If you want to change the navigation strip's colors, you must follow the instructions in the ADDITIONAL CUSTOMIZATION section.
>> 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 interfere with the layout AS LONG AS it's set to Horizontal/Placement Between Entries... Vertical's just ugly D:
INSTALLATION INSTRUCTIONS:
>>oo. PLUS USERS: Go to
Ad Settings → Ad Placement: Horizontal → Save. If you want it placed between entries, STILL FOLLOW that step, THEN change it to placement between entries so that the ads won't interfere with the other views, either. :B
>>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 → Sidebar link → Sidebar Position: Left if you want the sidebar; Do Not Show if you don't.
>>o5. Custom CSS tab → Use Layout's Stylesheet: Yes
>>o6. Copy the following code into the Custom Stylesheet box:
With Sidebar:
a:link, .entryHeader a {color: #E37897; text-decoration: none; border-bottom: 1px dotted #FFAFBC; font-weight: bold;}
a:visited, .entryHeader a:visited {color: #E37897; text-decoration: none; border-bottom: 1px dotted #FFAFBC; font-weight: bold;}
a:active {color: #E3271E; text-decoration: none; font-weight: bold;}
a:hover {color: #E37897; text-decoration: none; border: 0px; font-weight: bold;}
blockquote {background-color: #FFF9CF;
border: 1px dotted #FEEB6A;
padding: 5px;
color: #EF8577;
font-size: 7pt;}
body {background-color: #FFFBEF;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/bkgd.png');}
body, div, table, tr, td, center, p, textarea, input, form, .daysubjects, select {font-family: times new roman, georgia, palatino linotype;
font-size: 7pt;
color: #DA5F4D;
letter-spacing: 0.5pt;}
.bodyblock {margin: 0px;
padding: 0px;}
.bodyheaderblock, .body-midtitle, .bodynavblock, .body-title {background-color: #FBECE9;
color: #FFFFFF;}
.bodynavblock {color: #FFAFBC;}
.body-title {margin: 0px;
padding: 5px;
font-weight: bold;
text-transform: uppercase;
font-family: times new roman;
font-size: 8pt;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/rbkgd.png');
background-position: center right;
background-repeat: no-repeat;
background-color: #FBECE9;
color: #FFAFBC;}
.body-midtitle {margin: 0px;
padding: 5px;
font-weight: bold;
text-transform: uppercase;
font-family: times new roman;
font-size: 8pt;}
.commentHeader {overflow-x: auto;
background-color: #FFFFFF;
font-family: times new roman;
font-size: 11pt;
color: #FEEB6A;
text-transform: uppercase;
letter-spacing: -0.5pt;}
.commentHeaderScreened {background-color: #EFEFEF;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/screened.png');
background-position: center right;
background-repeat: no-repeat;
font-family: times new roman;
font-size: 11pt;
color: #CCCCCC;
text-transform: uppercase;
letter-spacing: -0.5pt;}
.commentHeaderSubject {background-color: transparent;
color: #E37897;}
.commentHolder, .commentText {overflow-x: auto;}
.commentLinkbar li {color: #E37897;}
.daytitles {background-color: #FFEFF0;
text-transform: uppercase;
color: #DA5F4D;
border: 1px solid #FFAFBC;}
.day, .day-blank {background-color: #FFFFFF;
color: #DA5F4D;
border: 1px solid #FFAFBC;}
.day-date {background-color: #FFFFFF;
color: #DA5F4D;
border-right: 1px solid #FFAFBC;
border-bottom: 1px solid #FFAFBC;}
div {background-color: #FFFFFF;}
.entryHeader {background-color: #FFFFFF;}
.entryHeaderDate {font-family: times new roman;
font-size: 14pt;
font-weight: normal;
color: #FEEB6A;
text-transform: uppercase;
letter-spacing: -1.5pt;}
.entryHeaderSubject {font-family: georgia;
font-size: 11pt;
font-weight: bold;
color: #E37897;
text-transform: uppercase;
letter-spacing: -1pt;}
.entryLinkbar {text-align: center;
background-color: #FFFFFF;
border-top: 1px dotted #FFAFBC;
border-bottom: 1px dotted #FFAFBC;}
.entryHolder {background-color: #FFFFFF;
width: 500px;
margin-left: 0px;}
.entryMetadata {padding-bottom: 10px;}
.entryText {background-color: #FFFFFF;
width: 490px;
text-align: justify;
overflow-x: auto;
padding-bottom: 10px;}
#footer-menu {background-color: #FFFFFF;
text-align: right;
margin: 0px;
padding: 5px;}
#footer-menu a, #footer-menu a:visited {font-family: times new roman;
font-size: 8pt;
text-transform: uppercase;
font-weight: bold;
color: #FFAFBC;}
.header-title, .header-subtitle, .header-icon {display: none;}
.header-menu {background-color: #DA5F4D;
padding: 0px;
margin-left: 0px;}
.header-menu a, .pagefooterblock a, .header-menu a:visited, .pagefooterblock a:visited, .bodynavblock a, .bodynavblock a:visited {color: #FFFFFF;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-family: times new roman;
font-size: 8pt;}
.header-menu a:hover, .pagefooterblock a:hover, .entryHeader a:hover {color: #FFFFFF;
background-color: #DA5F4D;
border: 0px;}
hr {border: 0px;
width: 100%;
height: 50px;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/hr.png');
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;}
.month {width: 525px;
background-color: #FFAFBC;
border: 1px solid #FFAFBC;}
.pageblock {width: 780px;
margin: left;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/header.jpg) no-repeat top left;}
.pagefooterblock {background-color: #DA5F4D;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/credit.png');
background-position: center bottom;
background-repeat: no-repeat;
color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 5px;
padding-bottom: 11px;}
.pageheaderblock {padding-top: 414px;
background-color: transparent;}
.replyform {background-color: #FFFFFF;}
.sidebar {width: 150px;}
.sidebox {background-color: #FFFFFF;
padding-top: 3px;}
.sideboxcontent {background-color: #FFFFFF;}
.sideboxTitle {text-align: center;
background-color: #FBECE9;
padding: 5px;
color: #EF8577;
font-size: 7pt;}
.tagstable {width: 525px;
border: 1px solid #FFAFBC;}
.tagstable td {border: 1px solid #FFAFBC;}
td {background-color: #FFFFFF;}
input, textarea, select {border: 1px solid #FFAFBC;
background-color: #FFFFFF;}
.subject img[src="
http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/lock.png); }
.subject img[src="
http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/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_dogs2/bullet_star.png); padding: 16px 16px 0 0px;
}
.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_dogs2/bullet_star.png); padding: 16px 16px 0 0px;
}
.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_dogs2/bullet_star.png); padding: 16px 16px 0 0px;
}
#lj_controlstrip_userpic, #lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_actionlinks, #lj_controlstrip_login {background-color: #FBECE9;
color: #FFAFBC;}
#lj_controlstrip_userpic a, #lj_controlstrip_user a, #lj_controlstrip_userlinks a, #lj_controlstrip_actionlinks a, #lj_controlstrip_login a {color: #FFAFBC;}
Without Sidebar:
a:link, .entryHeader a {color: #E37897; text-decoration: none; border-bottom: 1px dotted #FFAFBC; font-weight: bold;}
a:visited, .entryHeader a:visited {color: #E37897; text-decoration: none; border-bottom: 1px dotted #FFAFBC; font-weight: bold;}
a:active {color: #E3271E; text-decoration: none; font-weight: bold;}
a:hover {color: #E37897; text-decoration: none; border: 0px; font-weight: bold;}
blockquote {background-color: #FFF9CF;
border: 1px dotted #FEEB6A;
padding: 5px;
color: #EF8577;
font-size: 7pt;}
body {background-color: #FFFBEF;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/bkgd.png');}
body, div, table, tr, td, center, p, textarea, input, form, .daysubjects, select {font-family: times new roman, georgia, palatino linotype;
font-size: 7pt;
color: #DA5F4D;
letter-spacing: 0.5pt;}
.bodyblock {margin: 0px;
padding: 0px;}
.bodyheaderblock, .body-midtitle, .bodynavblock, .body-title {background-color: #FBECE9;
color: #FFFFFF;}
.bodynavblock {color: #FFAFBC;}
.body-title {margin: 0px;
padding: 5px;
font-weight: bold;
text-transform: uppercase;
font-family: times new roman;
font-size: 8pt;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/rbkgd.png');
background-position: center right;
background-repeat: no-repeat;
background-color: #FBECE9;
color: #FFAFBC;}
.body-midtitle {margin: 0px;
padding: 5px;
font-weight: bold;
text-transform: uppercase;
font-family: times new roman;
font-size: 8pt;}
.commentHeader {overflow-x: auto;
background-color: #FFFFFF;
font-family: times new roman;
font-size: 11pt;
color: #FEEB6A;
text-transform: uppercase;
letter-spacing: -0.5pt;}
.commentHeaderScreened {background-color: #EFEFEF;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/screened.png');
background-position: center right;
background-repeat: no-repeat;
font-family: times new roman;
font-size: 11pt;
color: #CCCCCC;
text-transform: uppercase;
letter-spacing: -0.5pt;}
.commentHeaderSubject {background-color: transparent;
color: #E37897;}
.commentHolder, .commentText {overflow-x: auto;}
.commentLinkbar li {color: #E37897;}
.daytitles {background-color: #FFEFF0;
text-transform: uppercase;
color: #DA5F4D;
border: 1px solid #FFAFBC;}
.day, .day-blank {background-color: #FFFFFF;
color: #DA5F4D;
border: 1px solid #FFAFBC;}
.day-date {background-color: #FFFFFF;
color: #DA5F4D;
border-right: 1px solid #FFAFBC;
border-bottom: 1px solid #FFAFBC;}
div {background-color: #FFFFFF;}
.entryHeader {background-color: #FFFFFF;}
.entryHeaderDate {font-family: times new roman;
font-size: 14pt;
font-weight: normal;
color: #FEEB6A;
text-transform: uppercase;
letter-spacing: -1.5pt;}
.entryHeaderSubject {font-family: georgia;
font-size: 11pt;
font-weight: bold;
color: #E37897;
text-transform: uppercase;
letter-spacing: -1pt;}
.entryLinkbar {text-align: center;
background-color: #FFFFFF;
border-top: 1px dotted #FFAFBC;
border-bottom: 1px dotted #FFAFBC;}
.entryHolder {background-color: #FFFFFF;
width: 670px;
margin-left: 0px;}
.entryMetadata {padding-bottom: 10px;}
.entryText {background-color: #FFFFFF;
width: 660px;
text-align: justify;
overflow-x: auto;
padding-bottom: 10px;
padding-left: 7px;}
#footer-menu {background-color: #FFFFFF;
text-align: right;
margin: 0px;
padding: 5px;}
#footer-menu a, #footer-menu a:visited {font-family: times new roman;
font-size: 8pt;
text-transform: uppercase;
font-weight: bold;
color: #FFAFBC;}
.header-title, .header-subtitle, .header-icon {display: none;}
.header-menu {background-color: #DA5F4D;
padding: 0px;
margin-left: 0px;}
.header-menu a, .pagefooterblock a, .header-menu a:visited, .pagefooterblock a:visited, .bodynavblock a, .bodynavblock a:visited {color: #FFFFFF;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-family: times new roman;
font-size: 8pt;}
.header-menu a:hover, .pagefooterblock a:hover, .entryHeader a:hover {color: #FFFFFF;
background-color: #DA5F4D;
border: 0px;}
hr {border: 0px;
width: 100%;
height: 50px;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/hr.png');
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;}
.month {width: 525px;
background-color: #FFAFBC;
border: 1px solid #FFAFBC;}
.pageblock {width: 780px;
margin: left;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/header.jpg) no-repeat top left;}
.pagefooterblock {background-color: #DA5F4D;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/credit.png');
background-position: center bottom;
background-repeat: no-repeat;
color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 5px;
padding-bottom: 11px;}
.pageheaderblock {padding-top: 414px;
background-color: transparent;}
.replyform {background-color: #FFFFFF;}
.tagstable {width: 525px;
border: 1px solid #FFAFBC;}
.tagstable td {border: 1px solid #FFAFBC;}
td {background-color: #FFFFFF;}
input, textarea, select {border: 1px solid #FFAFBC;
background-color: #FFFFFF;}
.subject img[src="
http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/lock.png); }
.subject img[src="
http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/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_dogs2/bullet_star.png); padding: 16px 16px 0 0px;
}
.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_dogs2/bullet_star.png); padding: 16px 16px 0 0px;
}
.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_dogs2/bullet_star.png); padding: 16px 16px 0 0px;
}
#lj_controlstrip_userpic, #lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_actionlinks, #lj_controlstrip_login {background-color: #FBECE9;
color: #FFAFBC;}
#lj_controlstrip_userpic a, #lj_controlstrip_user a, #lj_controlstrip_userlinks a, #lj_controlstrip_actionlinks a, #lj_controlstrip_login a {color: #FFAFBC;}
>>o7. Save Changes. You're done!
>>o8. 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♥
eight♥
nine 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_dogs2/ with your URL (minus the filename).
>> If you want the navigation strip to be a different color, then scroll to the bottom of the CSS code and find this line:
#lj_controlstrip_userpic, #lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_actionlinks, #lj_controlstrip_login {background-color: #FBECE9;
color: #FFAFBC;}
#lj_controlstrip_userpic a, #lj_controlstrip_user a, #lj_controlstrip_userlinks a, #lj_controlstrip_actionlinks a, #lj_controlstrip_login a {color: #FFAFBC;}
Replace #FBECE9 with the hex code or name of the color that you want. :) You may want to change the font color (color: #FFAFBC;) and link color (color: #FFAFBC;) with another set of contrasting colors, if you wish.
>> If you don't like having an image for a horizontal rule and would rather have the normal horizontal rule, then delete these lines of code from the CSS:
hr {border: 0px;
width: 100%;
height: 50px;
background-image: url('
http://i96.photobucket.com/albums/l173/hliconchallenge/layouts/hl_dogs2/hr.png');
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;}
>> If you do not like having your text justified, delete ALL lines of text that say text-align: justify; on the CSS. DO NOT FORGET TO DELETE THE SEMICOLON; it's important!
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. And for my own reference, people left comments
here too.
Thanks for looking! ♥
- hl