MIISCEA ► FIVE

[miiscea]

I'm pretty sick of Flexible Squares too, but it's the easiest to edit. :[ I'll try to do other styles too!



flexible squares: o4

→ PREVIEW



LAYOUT INFO & DOWNLOAD

1.

STYLE: S2 Flexible Squares
TESTED IN: Mozilla Firefox
HEADER IMAGE: Not recommended.
WORKS FOR: Basic/Plus/Paid Accounts
ADVERTISEMENT-PLACEMENT: Between Entries/Horizontal
RESOURCES: can be found here!

Sidebar alignment info: (everything else is set to "Yes")

[Show tags in the sidebar?] No.
[Show the page summary in the sidebar?] No.
[Show the calendar in the sidebar?]

ORDERING: (Default Userpic) -> (Blurb) -> (Link List) -> (Calendar) -> (Tags) -> (Page Summary)

2.
/* ----------------------------------------------
Flexible Squares [do not remove credits]
"o4" by miiscea/triclementia (at) lj
---------------------------------------------- */

body {
background: #444;
font: 11px/22px lucida sans unicode;
color: #aaa;
text-align: justify;
}

#content {
position: absolute;
top: 80px;
right: 40px;
width: 600px;
}

#maincontent {
width: 600px;
}

.headerimage {
display: yes;
position: absolute;
top: 80px;
right: 40px;
width: 600px;
height: 0px;
background: url('') no-repeat;
}

/* ------------------------ main links, colors */

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

a:hover {
color: #bbb;
cursor: hand;
text-decoration: none;
}

::-moz-selection {
background: #ddd;
}

i {
color: #aaa;
}

blockquote {
margin: 0px 10px;
padding: 5px 15px;
font: 11px/16px arial;
background: #ddd;
}

/* ----------------------------------------------
header & footer
---------------------------------------------- */

#header {
font: 18px georgia;
text-align: right;
text-transform: lowercase;
padding: 20px 20px 0px 0px;
background: #666;
border-right: 10px double #888;
}

#footer {
font: 10px georgia;
text-align: left;
text-transform: lowercase;
margin-bottom: 10px;
clear: both;
}

div#header a, div#header a:visited, div#footer a, div#footer a:visited {
color: #ccc;
margin-left: 10px;
}

div#header li.view, div#footer li.viewing {
color: #aaa;
margin-left: 10px;
}

div#header a:hover, div#footer a:hover {
color: #bbb;
}

.title, .subtitle {
display: none;
}

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

ul.navheader li, ul.navfooter li {
display: inline;
list-style: none;
padding: 0px;
}

/* ----------------------------------------------
sidebar
---------------------------------------------- */

#sidebar {
width: 550px;
border-right: 10px double #888;
background: #666;
padding: 5px 20px 20px;
margin-bottom: 20px;
}

div#sidebar a, div#sidebar a:visited {
color: #fff;
}

div#sidebar a:hover {
color: #ccc;
}

.defaultuserpic {
float: right;
position: relative;
margin: 5px 0px 0px 10px;
background: #ddd !important;
padding: 5px;
}

.defaultuserpic img {
width: 70px;
height: 70px;
}

.sbarbody {
margin: 0px;
padding-top: 5px;
text-align: right;
}

.sbarbody2 {
font: 11px/22px verdana;
}

li.sbartitle {
display: none;
padding: 5px;
font: 36px/14px script;
color: #fff;
display: block;
text-transform: lowercase;
}

li.sbaritem {
display: inline;
padding: 5px;
list-style: none;
font: 12px/16px arial;
text-transform: lowercase;
background: #555;
margin: 3px;
}

li.sbaritem:hover {
background: #777;
}

ul.ljtaglist li {
padding: 0px;
margin: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

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

.sbarcalendar, .sbarcalendarposts {
display: none;
}

/* ----------------------------------------------
recent entries
---------------------------------------------- */

.subcontent {
background: #666;
border-right: 10px double #888;
}

.entry {
background: #eee;
margin-right: 50px;
}

.entry_text {
padding: 20px;
}

.entry ul li, .entry ol li {
padding: 0px;
margin: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

/* ---------------------------------- userpics */

.userpic, .userpicfriends {
background: #ddd !important;
float: right;
padding: 10px;
margin: 0px 50px 10px 10px;
position: relative;
font: 8px arial;
text-transform: uppercase;
text-align: center;
z-index: 15;
}

.userpic img, .userpicfriends img {
width: 70px;
height: 70px;
}

.userpic font, .userpicfriends font {
color: #aaa;
}

/* ----------------------------- date, subject */

.datesubject {
color: #ccc;
text-align: right;
letter-spacing: 3px;
font: 9px arial;
text-transform: uppercase;
background: #999;
padding: 10px 10px 0px;
height: 40px;
margin-right: 50px;
}

.subject, .subject a, .subject a:visited {
color: #eee;
font: 12px georgia;
text-transform: lowercase;
}

/* ---------------------------- currents, tags */

.currents {
padding-left: 20px;
}

.currents strong {
color: #aaa;
}

.currents, .currentmood, .currentmusic {
font: 9px arial;
letter-spacing: 1px;
text-transform: uppercase;
}

.ljtags {
margin: 20px 0px -52px 0px;
font: 9px arial;
letter-spacing: 1px;
text-transform: uppercase;
}

/* ---------------------------------- comments */

.comments {
text-align: right;
padding: 0px 20px 15px;
text-transform: lowercase;
color: #e8dbd8;
font: 12px arial;
letter-spacing: 2px;
}

div.comments a, div.comments a:visited {
color: #888;
}

div.comments a:hover {
color: #aaa;
}

/* --------------------------- custom comments */

.box {
padding: 15px;
border: 0px;
background: #666;
border-right: 10px double #888;
}

.commentbox {
margin: 10px;
border: 0px;
background: #eee;
}

.commentreply {
text-align: justify;
font-size: 10px;
margin: 15px;
}

form#qrform table {
border: 0px !important;
}

.userpiccomment {
float: left;
margin: 0px 10px 0px 5px;
position: relative;
font-size: 9px;
z-index: 15;
width: 50px;
height: 50px;
border: 5px solid #ddd;
}

.datesubjectcomment {
padding: 5px;
font: 9px arial;
color: #eee;
text-transform: uppercase;
background: #999;
}

input, textarea, select, option, button {
border: 0px;
font: 11px arial;
color: #888;
background: #eee;
padding: 2px 4px;
}

.skiplinks {
text-align: center;
text-transform: uppercase;
margin-bottom: -10px;
color: #666;
background: #666;
border-right: 10px double #888;
}

/* ----------------------------------------------
calendar/archive
---------------------------------------------- */

table.yeartable {
padding: 5px;
}

table.yeartable td.yeardate {
background: #666;
color: #ddd;
padding: 5px;
}

table.yeartable td.yeardate:hover {
background: #777;
}

table.yeartable td.yearday {
color: #fff;
background: #bbb;
font-size: 9px;
text-align: center;
text-transform: uppercase;
}

td.yearmonth {
color: #fff;
font: 21px georgia;
}

ul.year, ul.year li {
color: #fff;
display: inline;
text-align: center;
margin: 0px auto;
}

/* ----------------------------------------------
tags page
---------------------------------------------- */

.ljtaglist {
background: #666;
color: #d9d9d2;
padding: 15px 45px;
font: 11px georgia;
}

h2 {
font-family: georgia;
font-weight: normal;
color: #fff;
text-align: right;
text-transform: lowercase;
padding-right: 15px;
font-size: 21px;
}

/* ----------------------------------------------
miscellany
---------------------------------------------- */

img:hover {
filter: alpha(opacity=80);
moz-opacity: .80;
opacity: .80;
}

/* -------------------------------- mini icons */

.ljuser a, .ljuser a:visited {
color: #888;
font-style: italic;
}

.ljuser img {
display: none;
}

img[src*="icon_protected.gif"]{
width: 0px;
height: 0px;
padding: 16px 16px 0px 0px !important;
background: url(http://imgboot.com/images/Miiscea/lock.gif) no-repeat;
background-position: center left;
}

/* -------------------------- contextual popup */

div.ContextualPopup div.Inner {
background: #888 !important;
border-right: 10px double #ccc !important;
border: 0px;
padding: 5px;
color: #ddd !important;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal !important;
color: #eee !important;
}

div.ContextualPopup .Relation, div.ContextualPopup .Content .OnlineStatus {
font-weight: bold !important;
color: #eee;
}

/* ----------------------------------- spacing */

.clear {
background-color: transparent;
}

.clearfoot {
height: 0px;
background: transparent;
}

.separator {
height: 0px;
background: #666;
}

/* ------------------------------ controlstrip */

#lj_controlstrip {
top: 0;
left: 0;
width: 100%;
height: 45px;
margin: 0;
padding: 0;
position: absolute;
background: #666;
}

#lj_controlstrip table {
margin: 0;
padding: 0;
width: auto;
}

#lj_controlstrip a {
text-transform: uppercase;
font-size: 9px;
font-family: arial;
color: #999;
text-decoration: none;
}

#lj_controlstrip td {
color: #ccc;
font: 11px/16px arial;
}

#lj_controlstrip a:hover {
color: #ccc;
text-decoration: none;
}

#lj_controlstrip_userpic {
vertical-align: top;
width: 43px;
background-image: url(/img/controlstrip/ljlogo-light.gif);
background-repeat: no-repeat;
background-position: top left;
}

#lj_controlstrip_statustext {
color: #ccc;
font: 11px courier new;
}

#lj_controlstrip img {
background: none;
margin: 0;
padding: 0;
border: 0;
}

#lj_controlstrip a img {
padding: 0;
margin: 0;
border: 0;
}

#lj_controlstrip form {
border: 0px;
font: 11px arial;
color: #ccc;
}

#lj_controlstrip input {
border: 0px;
font: 11px arial;
color: #aaa;
background: #eee;
padding: 2px;
}

#lj_controlstrip_user {
text-align: left;
vertical-align: middle;
padding: 0 1em 0 1em;
white-space: nowrap;
width: 18em;
}

#lj_controlstrip_actionlinks {
text-align: left;
vertical-align: middle;
padding: 0 1em 0 1em;
white-space: nowrap;
width: 33em;
}

#lj_controlstrip_actionlinks a {
white-space: nowrap;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 0px solid #ccc;
}

---------------------------------------------- */
(Right click in the textarea and pick "Select All" and push Ctrl+C.)

INSTRUCTIONS FOR USING & RULES. GIVE CREDIT TO TRICLEMENTIA.
COMMENTS, FEEDBACK AND SUCH ARE GREATLY APPRECIATED. ♥