Windows 2000/Classic CSS theme for Flexible Squares

Jan 06, 2010 23:49

...I think I'm actually done with this. Maybe. More or less, anyway. Huh. ♥

It's my first finished CSS layout... I've tested it in Google Chrome, Firefox 3.5.7, and Internet Explorer 6 (which is pretty freaking simplistic as far as what CSS it'll handle, I think.) and it works fine in all of them, though the gradient backgrounds in the subject lines only stretch like I want them to in Chrome. Oh well. The other browsers should catch up with CSS3 sooner or later. And I figured, since I'm happy with it, I might as well share the layout code!

So, here's the details...

Account type: All (yes, including Basic/Plus!)
Comment pages: yes
Archive/Tags/Etc pages: yes

CSS Code:

/* Windows 2000/Classic CSS theme for Flexible Squares by http://LadyAsul.livejournal.com */

body {
background-color: #3a6ea5;
text-align: center;
color: #3a6ea5;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
/* background-image: url(http://????); Note, if you want to use this, adjust the left margin in #content too. */
background-repeat: no-repeat;
background-position: 0px 45px;
background-attachment: scroll;
}

a, a:link, a:visited {
color: #ffffff;
text-decoration: none;
}

a:hover {
color: #ffffff;
background-color: #0a246a;
}

p, td, blockquote {
font-size: 11px;
}

code, kbd, pre, tt {
font-family: monospace;
}
code {
background-color: #e8e8e8;
}

div[style~="728px;"] { /* affects the ads in most browsers! */
background-color: transparent !important;
border: none !important;
}

/* un-comment this to add your own row of icons above the header!
.headerimage {
position: relative;
margin: 15px auto;
border: none;
width: ??????px;
height: ??????px;
background-image: url(http://??????);
background-repeat: no-repeat;
background-color: transparent;
background-position: 80px 0px;
} */

#content {
margin-left: 5px; /* adjust this value here, if you want to add a row of icons on the left, in the Body background, like I did. */
margin-right: 5px;
border-width: 0px;
border-style: none;
padding: 0px;
width: auto;
}

#maincontent {
margin-top: 15px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #ffffff;
border-style: none;
margin-left: 180px;
text-align: left;
}

#sidebar {
padding-top: 15px;
padding-bottom: 15px;
margin-top: 15px;
background-color: #ffffff;
border-color: #d1d1d1;
border-width: 3px;
border-style: ridge;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
width: 160px;
float: left;
text-align: left;
}

#header, #footer, ul.year {
padding: 5px;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #d1d1d1;
border-top: 2px solid #e8e8e8;
border-left: 2px solid #e8e8e8;
border-right: 2px solid #8b8b8b;
border-bottom: 2px solid #8b8b8b;
color: #6a6a6a;
}
#footer {
clear: both;
z-index: 100;
}

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited, ul.year a, td.yearmonth

a {
color: #000000;
padding: 3px;
border: solid 1px #d1d1d1;
}

div#header a:hover, div#footer a:hover, ul.year a:hover, td.yearmonth a:hover {
color: #000000;
text-decoration: none;
border-top: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
border-right: 1px solid #8b8b8b;
border-bottom: 1px solid #8b8b8b;
padding: 3px;
background-color: transparent;
}
div#header a:active, div#footer a:active, ul.year a:active, td.yearmonth a:active {
color: #000000;
text-decoration: none;
border-top: 1px solid #8b8b8b;
border-left: 1px solid #8b8b8b;
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
padding: 3px;
}

ul.navheader {
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

.title, .subtitle {
display: none;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #0a24aa;
}

div#sidebar a:hover {
color: #ffffff;
text-decoration: none;
}

.defaultuserpic {
text-align: center;
}
.defaultuserpic a:hover {
background-color: transparent;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px;
}

#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 1px #d1d1d1 solid;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
border-color: #000000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.sbarcalendarposts {
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #a6caf0;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts a:visited {
color: #6a6a6a;
}
.sbarcalendarposts a:hover {
background-color: transparent;
color: #ffffff;
}
.sbarcalendarposts:hover {
background-color: #0a246a;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem, .tagcloud, .sbarbody2 {
padding-left: 15px;
list-style: none;
}

li.sbartitle {
padding-left: 10px;
list-style: none;
border-style: none;
background-color: transparent;
margin: 20px 0px -8px 0px;
font-size: 12px;
font-weight: bold;
}

/* maincontent */

.subcontent {
margin: 0px 0px 0px 0px;
padding: 0px ;
border-width: 3px 3px 3px 3px;
border-color: #d1d1d1;
border-style: ridge;
background-color: #ffffff;
min-height: 100px;
min-width: 300px;
}
.subcontent a, .subcontent a:link, subcontent a:visited {
color: #0a24aa;
}
.subcontent a:hover {
color: #ffffff;
}

.entry {
margin: -40px 0px 0px 0px;
padding: 10px 10px 10px 10px;
background-color: #ffffff;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-style: none;
min-height: 50px;
}

.entry ul li, .entry ol li {
padding: 0px;
margin: 0px;
}

.entry_text {
min-height: 35px;
padding-bottom: 50px;
}

.userpic {
float: left;
padding: 0px;
margin: 0px 10px 20px 0px;
z-index: 15;
border-style: none;
background-color: transparent !important;
}
.userpic a:hover {
background-color: transparent;
}

.userpicfriends {
float: left;
padding: 0px;
margin: 0px 10px 10px 0px;
text-align: center;
background-color: #ffffff !important;
color: #000000;
border-style: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}
.userpicfriends a:hover {
background-color: transparent;
}

.date {
line-height: 200%;
top: 5px;
color: #ffffff;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.subject {
font-weight: bold;
padding: 10px;
color: #ffffff;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover {
color: #ffffff;
text-decoration: none;
}

.datesubject {
background-color: #a6caf0;
background-image: url(http://i47.tinypic.com/rwuekx.jpg);
background-repeat: repeat-y;
background-position: left;
background-size: 100%;
padding: 5px;
border-style: none;
border-bottom: solid 1px #000000;
padding: 5px 5px 5px 0px;
margin: 0px 0px 40px 0px;
color: #ffffff;
}
.datesubject a, .datesubject a:link, .datesubject a:visited {
color: #ffffff;
}
.datesubject a:hover {
background-color: transparent;
color: #a6caf0;
}

.currents, .currentmood, .currentmusic, .ljtags {
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.ljtags {
font-weight: bold;
margin: 50px 0px -50px 0px;
}
.ljtags a {
font-weight: normal;
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: right;
background-color: #d1d1d1;
padding: 0px 5px 0px 5px;
margin: 10px -10px -10px -10px;
}

div.comments a, div.comments a:link, div.comments a:visited, div.comments a:hover {
color: #000000;
text-decoration: none;
background-color: transparent;
}

/* maincontent -- entry, reply pages */

.box {
border-style: none;
padding: 10px 0px;
clear: right;
color: #ffffff;
}

#qrformdiv table {
border: 2px outset #d1d1d1 !important;
background-color: #d1d1d1;
color: #000000;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
margin-bottom: 10px;
}
#qrformdiv a, #qrformdiv a:link, #qrformdiv a:visited, #qrformdiv a:hover {
color: #0a24aa;
background-color: transparent;
}

input, textarea {
color: #000000;
font-family: Verdana, sans-serif;
font-size: 11px;
}

input.textbox textarea.textbox {
width: 95% !important;
background-color: #ffffff;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #d4dce8;
color: #000000;
}

.replytosubject {
font-weight: bold;
}

.commentbox {
border-color: #d1d1d1;
border-width: 3px;
border-style: ridge;
margin: 10px 0px 10px 10px;
padding: 0px 10px 0px 0px;
background-color: #ffffff;
color: #000000;
min-width: 200px;
}
.commentbox a, .commentbox a:link, .commentbox a:visited {
color: #0a24aa;
}
.commentbox a:hover {
color: #ffffff;
}

.userpiccomment {
position: relative;
padding: 0px;
margin: -5px 10px 10px 0px;
z-index: 15;
float: left;
border-style: none;
}

.datesubjectcomment {
background-color: #a6caf0;
background-image: url(http://i47.tinypic.com/rwuekx.jpg);
background-repeat: repeat-y;
background-position: left;
background-size: 100%;
color: #ffffff;
padding: 5px 5px 5px 0px;
margin: 0px -10px 0px 0px;
border: none;
border-bottom: 1px solid #000000;
}

.datesubjectcomment a, .datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #a6caf0;
background-color: transparent;
}

.commentreply {
position: relative;
margin: 1px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border-style: none;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
}

.commentbox div[style="padding: 10px; text-align: right;"] {
padding-right: 0px !important;
}

.commentboxpartial {
border: ridge 3px #d1d1d1;
padding: 5px 10px 10px 10px;
margin: 10px 0px;
background-color: #c0c0c0;
background-image: url(http://i45.tinypic.com/2v9sw2e.jpg);
background-repeat: repeat-y;
background-position: left;
background-size: 100%;
min-width: 200px;
}
.commentboxpartial a:hover {
background-color: transparent;
}

.commentinfo {
background-color: #d1d1d1;
margin-top: 10px;
width: 100%;
}

/* maincontent -- year/achive pages */

ul.year {
text-align: center;
margin-bottom: 20px;
letter-spacing: 1px;
}
ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
border: 2px outset #d1d1d1;
background-color: #d1d1d1;
color: #000000;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 3px;
}
td.yearmonth {
border-style: none;
padding: 5px;
font-weight: bold;
color: #6a6a6a;
}
td.yearmonth a {
color: #000000;
background-color: transparent;
margin: -1px -3px;
}

td.yearday {
border: 2px inset #d1d1d1;
background-color: #6a6a6a;
text-align: center;
padding: 3px;
color: #ffffff;
}

td.yeardate {
border: 2px inset #d1d1d1;
background-color: #ffffff;
padding: 5px;
text-align: center;
}
td.yeardate a {
color: #0a246a;
}
td.yeardate a:hover {
color: #ffffff;
}

dl { /* for the month view? */
margin: 0px 0px 20px 0px;
}
dt { /* for the day-date on the month view? */
margin: 10px 0px 0px 0px;
}

/* footer */

ul.navfooter {
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/* misc */

.clear {
display: none;
}

.skiplinks {
text-align: center;
color: #3a6ea5;
line-height: 40px;
margin: -5px 0px 10px 0px;
}

.skiplinks a, .skiplinks a:link, .skiplinks a:visited, .skiplinks a:hover {
color: #000000;
text-decoration: none;
background-color: #d1d1d1;
border-top: 2px solid #e8e8e8;
border-left: 2px solid #e8e8e8;
border-right: 2px solid #8b8b8b;
border-bottom: 2px solid #8b8b8b;
padding: 5px 10px 5px 10px;
margin: 10px 2px 10px 0px;
}
.skiplinks a:active {
border-top: 2px solid #8b8b8b;
border-left: 2px solid #8b8b8b;
border-right: 2px solid #e8e8e8;
border-bottom: 2px solid #e8e8e8;
}

.separator {
/* for formatting separators just under the entries */
display: none;
}
.lj-view-recent .separator, .lj-view-friends .separator, .lj-view-day .separator {
/* only appear on the Recent Entries, Friends, and Day views, kthx. */
display: block;
height: 30px;
}

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #d1d1d1;
background-color: #c2cde0;
}

.lj-view-reply * div[style="margin:0px 10px 50px 30px; overflow: hidden;"] {
/* gets rid of the space under the comment, on comment reply pages -- unfortunately, doesn't work in IE6. :( */
display: none !important;
}

Instructions:
First, go to Select Journal Style and search for Flexible Squares. Pick and apply any of them. Yes, any of them.

Then go to Customize your theme and select the CSS option. Have all three drop-downs set to No and then paste the above CSS code into the Custom stylesheet box and save changes.

Last step! Go to the Style page for a moment... and in the top (Page) section, find where it says "Background color of the outer table" (fourth box down) and paste in "#3a6ea5", and then lower down, in the Entries section, the third option down, "Border color of the content and header/footer boxes" paste "#3a6ea5" there too.

Save your changes again... and you're done!

...and if you want desktop icons on the left in the background, you can screencap those yourself. :) There's a spot that's commented out, in the body section of the CSS, for the url for your desktop icons. I didn't leave the url to mine in there because... well, they're my own desktop icons. As in, the ones on my computer at home here. You can customize this for yourself if you use it.

And I'm curious as to who uses this. Leave me a comment?

Please credit!

Questions welcome.

Edit: (3-15-2010) Fixed a couple things. Eliminated the .separator divs on all but the Recent Entries and Friends views, added padding to "reply to this comment" pages so the icon doesn't go below the comment box, and a few other minor tweaks, some of which don't even work in some versions of IE. Stupid IE. :|

Edit: (4-23-2010) I thought I'd fixed the minimum comment and entry widths before, but apparently not. Fixed now. Also made the previously dark blue links a brighter blue.

Edit: (5-24-2010) Adjusted the sidebar tags. A little indentation for wrapped-around longer tags does nice things for it.

public, geekery, lj layouts (css post), lj layouts, resources

Previous post Next post
Up