s2 Bloggish: Seasonal Snow Globe
Layout Name: Seasonal Snow Globe
S2 Style: Bloggish
Layout In Use: here
Tested In: Works in Firefox 3.5, Chrome, and Safari. Unsurprisingly, as IE does not come close to rendering CSS as it's meant to, it is not recommended for IE8.
Other: LJ & IJ compatible. Comes with four interchangeable, seasonal headers.
How to Install
- Go to the Customize Journal page.
- Working in s2, select the Bloggish "Unstyled" theme. Make sure that your sidebar is positioned on the left.
- Click Custom CSS. Make sure "Use layout's "Base Weblog" stylesheet" is set to yes. In the area for custom stylesheets (not external custom stylesheets), paste the codes below.
- Rehosting these images is very much appreciated, as I'm not sure how much hotlinking a free photobucket account can accommodate, and this way if anything ever goes awry your journal will not be effected!
- Be sure to credit "quibblercons at InsaneJournal" in your profile bio section so if someone admires the layout they'll know where to find it!
- Some answers ahead of time: No, this layout cannot have a taglist, entries list, link list, or calendar and still look as nice as it does at the moment. Or if it can, I don't know how to do it, sorry! I don't do moodthemes, so I always have them turned off. I'm pretty sure it's an easy fix if you look through the code for something about a metadata img, and display: none; and remove that tidbit. If you want your LJ navigation bar back, find #lj_controlstrip
{ display: none !important;} and remove that. :)
To Change Your SeasonFind the url "http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/autumnhead.png" within the codes below, and change 'autumn' to whichever season you prefer: 'spring' 'winter' or 'summer'. Click the images below to view them full size.
The Codes/* Bloggish: Seasonal Snow Globe */
/* Layout available at www.quibblercons.insanejournal.com */
/* Bloggish starter sheet by grrliz on thefulcrum.livejournal.com */
html body
{
padding-top: 0 !important;
}
/* -------------------------- */
/* ---------- MISC ---------- */
/* -------------------------- */
a { color: #2972A3; text-decoration: none; }
a:hover { color: #80CC33; }
h1, h2, h3, h4, h5, h6 {margin: 5px 0px 10px 0px; font-weight: bold;}
blockquote {
margin: 10px 30px;
padding: 10px 2px;
border: 3px double #dfdfdf;
border-left: 0px solid #dfdfdf;
border-right: 0px solid #dfdfdf;
}
ol {
margin: 5px 40px;
padding: 0px;
list-style: upper-roman;
}
input, textarea {
margin: 1px;
border: 1px solid #dfdfdf;
background: #f6f6f6;
color: #383838;
}
font {font-family: inherit; font-size: inherit; color: inherit;}
/* --------------------------------- */
/* ---------- PAGE LAYOUT ---------- */
/* --------------------------------- */
html {margin: 0px; padding: 0px;
}
html body {
padding-top: 0 !important;
}
body {
margin: 0px;
padding: 0px;
color: #383838;
font-family: helvetica,arial,tahoma,sans-serif;
font-size: 11px !important;
line-height: 1.7em;
text-align: center;
background:#AACCFF url(http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/autumnhead.png) repeat-x top center !important;
}
#container {
margin: 0px auto !important;
background-color: #AACCFF;
background: url() bottom center repeat-x !important;
}
#container-inner {
margin: 0px auto;
padding: 0px;
text-align: justify;
padding: 80px 0px;
background: url() center bottom no-repeat transparent !important;
}
#pagebody {
margin: 0px auto !important;
}
#pagebody-inner {
padding: 0px;
margin: 0px auto !important;
}
p.content-nav {width: 200px; height: 40px; margin: 20px 20px -1px 260px; align: center; text-align: center; background: transparent url(http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/center.png) no-repeat top center; padding-top: 10px; padding: 0px auto; position: absolute; bottom: -50px;
}
.content-nav,
.skiplinks {margin-top: 30px !important; margin: 0px auto; text-align: center; padding: 0px auto;}
#alpha {
width: 800px;
display: inline;
position: relative;
float: left;
}
#beta {
width: 710px;
display: inline;
position: relative;
float: left;}
#gamma {
width: auto;
display: inline;
position: relative;
float: left;}
/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */
#banner {
height: 70px;
background-color: transparent;
margin: 0px auto !important;
border: 0px solid #555;
background-image: url();
background-position: center;
background-repeat: no-repeat;
}
#banner-inner {
padding: 55px 24px;
text-align: center;
color: #ccc;
}
#banner h1 {
font-family: Georgia,Palatino Linotype;
color: #FFFFFF;
font-size: 260%;
text-transform: uppercase;
font-weight: 300;
letter-spacing: .22em;
}
#banner h2 {
display:none;
}
/* ----------------------------- */
/* ---------- CONTENT ---------- */
/* ----------------------------- */
.entry {
border-bottom: 0px solid #d2d2d2;
padding: 0px auto;
text-align: justify;
margin: 0px auto !important;}
.entry-content {
padding: 0px auto;
position: static; clear: both;
background: url(http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/cloudbottom.png) repeat-x bottom left transparent !important;}
.entry-body{
padding: 0px 19px 0px 20px;
position: static; clear: both;
min-height: 100px;
background:#FFFFFF;}
.entry-content li {margin: 10px 0px;}
.content-nav,
.skiplinks {padding: 10px 20px; text-align: right;}
.date-header,
div.day h2 {
margin: 0px auto;
padding: 5px 20px 5px 0px;
background: transparent;
color: #FFFFFF;
font-size: 1.5em;
font-family: "palatino linotype", georgia, "times new roman", serif;
text-transform: uppercase;}
.entry-userpic {
float: right !important;
display: inline !important;
margin: 5px 20px 5px 10px !important;
text-align: center;}
h3.entry-header {
height: 40px;
padding: 25px 20px 0px 20px;
margin-bottom: -10px !important;
color: #2972A3;
font-family: "palatino linotype", georgia, "times new roman", serif;
font-size: 1.2em;
line-height: 1.3em;
text-transform: uppercase;
letter-spacing: 1px;
background: url(http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/cloudtop.png) repeat-x top left transparent !important;}
}
.entry-body {padding: 0px 20px; line-height: 1.5em;}
.entry-body ol {margin: 10px 0px 10px 20px;}
.entry-body ul {margin: 10px 0px 10px 20px; list-style-type: none;}
.entry-body ul li {margin: 0px; padding: 3px 0px 3px 17px;background: url(http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/bullet_blue.png) 0px 5px no-repeat;}
.entry-body a {font-weight: normal;}
.entry-body a:hover {}
.metadata {margin: 10px 0px; line-height: 1.2em;}
.metadata img {display: none;}
.ljtags {font-weight: normal; text-transform: lowercase;}
.ljtags a {color: #2972A3; text-decoration: none;}
.ljtags a:hover {color: #80CC33;}
.entry-footer a,
.entry-footer a:link,
.entry-footer a:visited,
.entry-footer a:active {color: #2972A3; text-decoration: none;}
.entry-footer a:hover {color: #80CC33;}
.post-footers {display: block; margin: 3px 20px 0px 20px; }
.entry-footer {
height: 50px;
width: 890px;
margin: 0px auto;
padding: 10px 20px 0px 20px;
line-height: 1.5em;}
.separator {}
.comment {margin-bottom: 10px; border-top: 1px solid #e3e3e3;}
.comment-content {padding: 0px;}
.comments-content, .comments-header {margin: 0px 20px;}
.comments, .comments-open-header {line-height: 1.5em;}
.comment-footer {}
.entry,
.trackbacks,
.comments,
.archive {position: static; overflow: hidden; margin-bottom: 0px;}
.entry-content,
.trackbacks-info,
.trackback-content,
.comment-content,
.comments-open-content,
.comments-closed { margin: 0px;}
.entry-excerpt,
.entry-body,
.entry-more-link,
.entry-more {}
.entry-footer,
.trackback-footer,
.comment-footer,
.comments-open-footer,
.archive-content { margin: 5px 0px 15px 0px;}
.comments-open label { display: block; }
#comment-author, #comment-email, #comment-url, #comment-text {width: 240px;}
#comment-bake-cookie {margin-left: 0px; vertical-align: middle;}
#comment-post {font-weight: normal;}
img.image-full {width: 100%;}
.image-thumbnail {float: left; width: 115px; margin: 0px 10px 10px 0px;}
.image-thumbnail img {width: 115px; height: 115px; margin: 0px 0px 2px 0px;}
ul.ljtaglist a, dl a {text-decoration: none;}
ul.ljtaglist a:hover, dl a:hover {color: #80CC33;}
ul.ljtaglist {margin: 0px; padding: 0px 0px 20px 30px; list-style-type: none;}
ul.ljtaglist li {margin: 0px; padding: 3px 0px 3px 17px;background: url(http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/bullet_blue.png) 0px 5px no-repeat;}
/* ----------------------------- */
/* ---------- MODULES ---------- */
/* ----------------------------- */
.module {font-family: "palatino linotype", georgia, "times new roman", serif; }
.module-header {padding: 5px 10px; background: url() right center repeat-y transparent; font-size: 1.2em; text-transform: lowercase;}
.module-content {margin: 0px !important; padding: 0px 10px 20px 10px;}
.module-content a {color: #2972A3; text-decoration: none;}
.module-content a:hover {color: #80CC33;}
.module-list {margin: 0px; padding: 0px; list-style-type: none;}
.module-list-item {margin: 0px; padding: 3px 0px 3px 17px;background: url(http://i654.photobucket.com/albums/uu265/tqlayouts/seasonal/bullet_blue.png) 0px 5px no-repeat;}
/* --- default userpic --- */
.module-photo {display: none;}
/* --- default LJ links --- */
.module-viewlinks {
position: static;
margin: 0px auto !important;
font-family: Georgia,Palatino Linotype;
color: #FFFFFF;
font-size: 100%;
text-transform: uppercase;
font-weight: 200;
letter-spacing: .22em;}
.module-viewlinks .module-content {
position: relative;
height: 50px;
margin: 0px auto;
padding: 0px auto;}
.module-viewlinks ul {
position: absolute;
top: 0px;
margin: 0px 0px 0px 128px;
font-size: 1em;
line-height: 30px;
list-style-type: none;}
.module-viewlinks li.module-list-item {
display: inline !important;
float: left;
width: auto;
padding: 10px;
text-align: center;
background: none;}
.module-viewlinks a {color: #ffffff;}
.module-viewlinks a:hover {color: #2972A3;}
/* --- lj navigation bar --- */
#lj_controlstrip {
display: none !important;}
/* --- link list --- */
.module-typelist {display: none;}
/* --- tags --- */
.module-categories {display: none;}
/* --- page summary --- */
.module-pagesummary {display: none;}
/* --- sidebar calendar --- */
.module-calendar {display: none;}
/* --- powered by box --- */
.module-powered {text-transform: lowercase;}
.module-powered .module-content {margin: 0px; padding: 0px 5px;}
.module-powered a, .module-powered a:link {font-weight: bold;}
.module-syndicate {display: none;}
.module-powered {display: none;}
/* ------------------------------ */
/* ---------- CALENDAR ---------- */
/* ------------------------------ */
.lj-view-entry .entry {padding: 20px 0px 0px 0px;}
.lj-view-archive #beta-inner,
.lj-view-month #beta-inner,
body.lj-view-tags #beta-inner {padding: 0px 20px 20px 20px !important; background-color: #ffffff; text-align: left; border: 10px double #2972A3 !important; }
body.lj-view-tags #beta-inner h2 {padding: 0px 20px !important;}
.lj-view-archive #beta-inner table {width: 90%; margin-left: auto !important; margin-right: auto !important; border: 10px double #AACCFF !important; background-color: #ffffff; }
.lj-view-archive #beta-inner table th {padding: 5px 0px; border: 1px solid #AACCFF !important; text-align: center;}
.lj-view-archive #beta-inner table td {padding: 5px 2px; border: 1px solid #AACCFF !important;}
.lj-view-archive #beta-inner ul {margin: 0px 20px; list-style-type: none;}
.lj-view-archive #beta-inner ul li {display: inline; padding-right: 20px;}
.lj-view-month #beta-inner dl {line-height: 1.5em;}
.lj-view-month #beta-inner dt {margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #AACCFF ;}
.lj-view-month #beta-inner dd {margin-bottom: 1em; padding-left: 3em;}
/* ----------------------------------------------------- */
/* WHATEVER YOU DO, DO NOT EDIT ANYTHING BELOW THIS LINE */
/* ----------------------------------------------------- */
/* .pkg class wraps enclosing block element around inner floated elements */
.pkg:after
{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
* html .pkg { display: inline-block; }
/* no ie mac \*/
* html .pkg { height: 1%; }
.pkg { display: block; }
/* */
/* ----------------------------------------------------- */
/* ---------- ADD FURTHER CSS OVERRIDES BELOW ---------- */
/* ----------------------------------------------------- */
.largefont{
font-family: Georgia,Palatino Linotype;
color: #AACCFF;
font-size: 260%;
text-transform: uppercase;
font-weight: 300;
letter-spacing: .2em;
line-height: .2em;}