POST #059
Name: Only Stardust
Style: Flexible Squares
Browsers: Firefox, glow does NOT work in IE or Safari
Features: Tiny icons, versions with or without topbar, and instructions on how to get rid of the glow.
larger image preview (some tiling bg issues in the preview, since it’s set to fixed position)| live preview
Version with topbar
/*- layout by haribo @ crook
tinyicons by damnicons -*/
body {
text-align: justify;
margin: 40px 0 0;
background: #000 url(http://i31.tinypic.com/2hhq63p.jpg) fixed;
}
a, a:link, a:visited {
color: #888;
text-decoration: none;
}
a:hover {
color: #ccc;
text-decoration: underline;
}
p, td, blockquote {
font-size: 10px;
text-transform: uppercase;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content {
width: 600px;
margin-left: auto;
margin-right: auto;
border-width: 0;
padding: 0;
background: transparent;
}
#maincontent {
margin-top: 15px;
background: transparent;
}
#sidebar {
padding-bottom: 15px;
margin-top: 15px;
border-color: #eee;
border-width: 1px;
border-style: solid;
color: #333;
width: 600px;
float: top;
height: auto;
text-align: left;
background: #fff;
font: 9px lucida sans unicode;
-moz-box-shadow:0 0 4em 0 #fff;
}
#header {
width: 100%;
padding: 10px 0;
margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
border-style: solid;
border-color: #eee;
border-width: 1px;
color: #000;
background: #fff;
font: 9px georgia;
-moz-box-shadow:0 0 4em 0 #fff;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #888;
}
div#header a:hover, div#footer a:hover {
color: #ccc;
text-decoration: none;
}
.title, .subtitle {
display: none;
}
ul.navheader {
padding: 0;
margin: 3px 0;
}
ul.navheader li {
display: inline;
padding: 10px 10px 0 0;
}
.subcontent {
border-style: solid;
border-color: #eee;
border-width: 1px;
padding-bottom: 15px;
background: #fff;
-moz-box-shadow:0 0 4em 0 #fff;
}
.entry {
margin-left: 120px;
padding: 15px 10px 10px;
margin-top: -12px;
color: #333;
text-align: justify;
border-width: 0 0 0 1px;
border-color: #eee;
border-style: dashed;
background: #fff;
font: 9px lucida sans unicode;
}
.userpic {
position: relative;
float: left;
padding: 0 10px 10px;
margin-top: 10px;
z-index: 15;
border-width: 0;
border-color: #eee;
border-style: dashed;
}
.date {
display: none;
}
.subject {
padding-left: 10px;
color: #000;
text-transform: uppercase;
margin-left: 110px;
background: #fff;
font: 11px georgia;
}
.subject a, .subject a:link, .subject a:visited {
color: #333;
}
.subject a:hover {
color: #ccc;
text-decoration: none;
}
.datesubject {
padding: 10px 0 0 10px;
background: transparent;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.currents, .currentmood, .currentmusic {
letter-spacing: 1px;
text-transform: uppercase;
font: 8px lucida sans unicode;
}
.comments {
text-transform: uppercase;
margin-left: -120px;
letter-spacing: 1px;
width: 100px;
text-align: left;
color: #222;
padding: 0;
position: relative;
top: 15px;
background: transparent;
font: 10px georgia;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #888;
}
div.comments a:hover {
color: #ccc;
text-decoration: none;
}
.separator {
height: 5px;
}
.userpicfriends {
position: relative;
float: left;
padding: 0 10px 10px;
margin-top: 10px;
z-index: 15;
border-width: 0;
border-color: #eee;
border-style: dashed;
}
.defaultuserpic {
float: left;
padding: 10px;
}
.sbarheader {
display: none;
}
.sbarbody {
display: none;
}
.sbarbody2 {
padding: 10px 10px 0 15px;
text-align: justify;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #888;
}
div#sidebar a:hover {
color: #ccc;
text-decoration: none;
}
table.calendar, .sbarcalendar, .sbarcalendarposts {
display: none;
}
ul.sbarlist {
display: none;
}
li.sbaritem {
display: none;
}
li.sbartitle {
display: none;
}
#footer {
width: 100%;
text-align: center;
padding: 10px 0;
text-transform: uppercase;
letter-spacing: 1px;
color: #222;
border-color: #eee;
border-width: 1px;
border-style: solid;
background: #fff;
font: 9px georgia;
-moz-box-shadow:0 0 4em 0 #fff;
}
ul.navfooter {
padding: 0;
margin: 0;
}
ul.navfooter li {
display: inline;
margin: 0 5px;
}
.clearfoot {
clear: both;
}
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #eee;
}
table.yeartable td.yearday {
text-align: center;
background: #fff;
}
td.yearmonth {
border-style: none;
}
.datesubjectcomment {
padding: 5px;
margin-top: 20px;
background: #fff;
}
.userpiccomment {
position: relative;
border-width: 1px;
top: -30px;
left: 0;
padding: 5px;
margin: 10px 10px -20px;
z-index: 15;
float: left;
border-color: #eee;
border-style: solid;
background: #fff;
}
.box {
border-style: solid;
border-width: 1px 0 0;
border-color: #eee;
padding: 10px;
clear: left;
}
input, textarea {
color: #000;
background: #fff;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px;
padding: 25px 10px 10px;
text-align: left;
color: #000;
background: #fff;
font: 10px/125% lucida sans unicode;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
color: #222;
font: 11px lucida sans unicode;
}
.commentbox {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background: #fff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #888;
}
.datesubjectcomment a:hover {
color: #ccc;
}
.commentboxpartial {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background: #fff;
}
.commentinfo {
margin-top: 10px;
width: 100%;
background: #fff;
}
.skiplinks {
text-align: center;
}
.clear {
height: 15px;
}
.ljuser img {
width: 0;
height: 0;
background: transparent url() no-repeat 0 0;
padding: 10px 5px 0 2px !important;
vertical-align: baseline !important;
}
.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i32.tinypic.com/4rdv02.jpg) no-repeat center left !important;
padding: 10px 10px 0 2px !important;
}
.ljuser img[src*="community.gif"] {
background: transparent url(http://i26.tinypic.com/r0b9td.jpg) no-repeat scroll 0 0 !important;
padding: 10px 10px 0 2px !important;
}
Version without topbar
/*- layout by haribo @ crook
tinyicons by damnicons -*/
body {
text-align: justify;
margin: 40px 0 0;
background: #000 url(http://i31.tinypic.com/2hhq63p.jpg) fixed;
}
a, a:link, a:visited {
color: #888;
text-decoration: none;
}
a:hover {
color: #ccc;
text-decoration: underline;
}
p, td, blockquote {
font-size: 10px;
text-transform: uppercase;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content {
width: 600px;
margin-left: auto;
margin-right: auto;
border-width: 0;
padding: 0;
background: transparent;
}
#maincontent {
margin-top: 15px;
background: transparent;
}
#sidebar {
display: none;
}
#header {
width: 100%;
padding: 10px 0;
margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
border-style: solid;
border-color: #eee;
border-width: 1px;
color: #000;
background: #fff;
font: 9px georgia;
-moz-box-shadow:0 0 4em 0 #fff;
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #888;
}
div#header a:hover, div#footer a:hover {
color: #ccc;
text-decoration: none;
}
.title, .subtitle {
display: none;
}
ul.navheader {
padding: 0;
margin: 3px 0;
}
ul.navheader li {
display: inline;
padding: 10px 10px 0 0;
}
.subcontent {
border-style: solid;
border-color: #eee;
border-width: 1px;
padding-bottom: 15px;
background: #fff;
-moz-box-shadow:0 0 4em 0 #fff;
}
.entry {
margin-left: 120px;
padding: 15px 10px 10px;
margin-top: -12px;
color: #333;
text-align: justify;
border-width: 0 0 0 1px;
border-color: #eee;
border-style: dashed;
background: #fff;
font: 9px lucida sans unicode;
}
.userpic {
position: relative;
float: left;
padding: 0 10px 10px;
margin-top: 10px;
z-index: 15;
border-width: 0;
border-color: #eee;
border-style: dashed;
}
.date {
display: none;
}
.subject {
padding-left: 10px;
color: #000;
text-transform: uppercase;
margin-left: 110px;
background: #fff;
font: 11px georgia;
}
.subject a, .subject a:link, .subject a:visited {
color: #333;
}
.subject a:hover {
color: #ccc;
text-decoration: none;
}
.datesubject {
padding: 10px 0 0 10px;
background: transparent;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.currents, .currentmood, .currentmusic {
letter-spacing: 1px;
text-transform: uppercase;
font: 8px lucida sans unicode;
}
.comments {
text-transform: uppercase;
margin-left: -120px;
letter-spacing: 1px;
width: 100px;
text-align: left;
color: #222;
padding: 0;
position: relative;
top: 15px;
background: transparent;
font: 10px georgia;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #888;
}
div.comments a:hover {
color: #ccc;
text-decoration: none;
}
.separator {
height: 5px;
}
.userpicfriends {
position: relative;
float: left;
padding: 0 10px 10px;
margin-top: 10px;
z-index: 15;
border-width: 0;
border-color: #eee;
border-style: dashed;
}
.defaultuserpic {
float: left;
padding: 10px;
}
.sbarheader {
display: none;
}
.sbarbody {
display: none;
}
.sbarbody2 {
padding: 10px 10px 0 15px;
text-align: justify;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #888;
}
div#sidebar a:hover {
color: #ccc;
text-decoration: none;
}
table.calendar, .sbarcalendar, .sbarcalendarposts {
display: none;
}
ul.sbarlist {
display: none;
}
li.sbaritem {
display: none;
}
li.sbartitle {
display: none;
}
#footer {
width: 100%;
text-align: center;
padding: 10px 0;
text-transform: uppercase;
letter-spacing: 1px;
color: #222;
border-color: #eee;
border-width: 1px;
border-style: solid;
background: #fff;
font: 9px georgia;
-moz-box-shadow:0 0 4em 0 #fff;
}
ul.navfooter {
padding: 0;
margin: 0;
}
ul.navfooter li {
display: inline;
margin: 0 5px;
}
.clearfoot {
clear: both;
}
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #eee;
}
table.yeartable td.yearday {
text-align: center;
background: #fff;
}
td.yearmonth {
border-style: none;
}
.datesubjectcomment {
padding: 5px;
margin-top: 20px;
background: #fff;
}
.userpiccomment {
position: relative;
border-width: 1px;
top: -30px;
left: 0;
padding: 5px;
margin: 10px 10px -20px;
z-index: 15;
float: left;
border-color: #eee;
border-style: solid;
background: #fff;
}
.box {
border-style: solid;
border-width: 1px 0 0;
border-color: #eee;
padding: 10px;
clear: left;
}
input, textarea {
color: #000;
background: #fff;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px;
padding: 25px 10px 10px;
text-align: left;
color: #000;
background: #fff;
font: 10px/125% lucida sans unicode;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
color: #222;
font: 11px lucida sans unicode;
}
.commentbox {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background: #fff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #888;
}
.datesubjectcomment a:hover {
color: #ccc;
}
.commentboxpartial {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background: #fff;
}
.commentinfo {
margin-top: 10px;
width: 100%;
background: #fff;
}
.skiplinks {
text-align: center;
}
.clear {
height: 15px;
}
.ljuser img {
width: 0;
height: 0;
background: transparent url() no-repeat 0 0;
padding: 10px 5px 0 2px !important;
vertical-align: baseline !important;
}
.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i32.tinypic.com/4rdv02.jpg) no-repeat center left !important;
padding: 10px 10px 0 2px !important;
}
.ljuser img[src*="community.gif"] {
background: transparent url(http://i26.tinypic.com/r0b9td.jpg) no-repeat scroll 0 0 !important;
padding: 10px 10px 0 2px !important;
}
To get rid of the glow
Find every -moz-box-shadow:0 0 4em 0 #fff; and delete it.
To install:
- In Customize, choose any Flexible Squares layout.
- Only the blurb is displayed in the topbar. You need to add your own links. If you want them aligned to the right, use this code:
- Set all drop down menus to no.
- Credit haribo @ crook
- Feel free to change the background, colors, etc, as long as you keep credit!
(crossposted to mintyapple.)