MIISCEA ► SIX

[miiscea]

flexible squares: o5

→ PREVIEW


❥ layout info

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

❥ how to use the layout

01: Go to Select Journal Style. The link should give you all Flexible Squares themes available and if not, type the name in the search field. Pick any Flexible Squares theme listed there. Specifically, I used "Chocolate Milkshake".
02: Go to Custom CSS and set "No" for [Use layout's stylesheet(s)] and [Use external stylesheets]. If you scroll down, you will find a huuge textarea. It's time to insert the stylesheet!

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

body {
background: #f0f0f0;
font: 10px/22px arial;
color: #a2a2a0;
text-align: justify;
}

#content {
margin: 20px auto;
width: 600px;
}

#maincontent {
width: 600px;
}

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

a:hover {
color: #6aadcd;
text-decoration: none;
}

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

b {
color: #cb70a4;
}

i {
color: #aaa;
}

blockquote {
margin: 0px 10px;
padding: 5px 15px;
font: 11px/16px verdana;
background: #eee url(http://imgboot.com/images/Miiscea/bglj8.png);
}

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

#header {
font: 11px arial;
text-transform: lowercase;
padding: 280px 0px 10px 0px;
background: url(http://imgboot.com/images/Miiscea/at3ban.png) no-repeat;
}

#footer {
font: 11px arial;
text-transform: lowercase;
clear: both;
margin-top: -21px;
padding: 10px 0px 280px 0px;
background: url(http://imgboot.com/images/Miiscea/at3ban2.png) no-repeat;
}

div#header a, div#header a:visited, div#footer a, div#footer a:visited {
color: #c58aa5;
padding: 10px;
background: #f5f1f5;
border: 1px solid #e5ddee;
}

div#header li.view, div#footer li.viewing {
color: #aaa;
padding: 10px;
background: #f9f9f9;
border: 1px solid #e5ddee;
}

div#header a:hover, div#footer a:hover {
color: #9c71a2;
background: #f0eaf0;
}

.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: 600px;
color: #aaa;
margin-bottom: 20px;
}

div#sidebar a, div#sidebar a:visited {
color: #65a8c8;
}

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

.defaultuserpic {
position: relative;
display: none;
margin: 0px auto;
background: none !important;
}

.sbarbody {
margin: 0px;
padding: 1px 10px;
background: #e5ddee;
text-align: right;
}

.sbarbody2 {
font: 11px/22px tahoma;
padding: 10px 20px;
background: #fafafa;
}

li.sbartitle {
padding: 10px;
font: 16px/14px courier new;
color: #c388a4;
display: inline;
text-transform: lowercase;
text-align: left;
}

li.sbaritem {
display: inline;
padding: 2px 10px;
list-style: none;
font: 14px/16px arial;
text-transform: lowercase;
letter-spacing: -1px;
}

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

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: #fafafa;
}

.entry {
background: #fafafa;
}

.entry_text {
padding: 20px 20px 0px;
margin-left: 110px;
}

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

.userpic, .userpicfriends {
background: #f9f9f9 !important;
float: left;
margin: 40px 20px 10px 20px;
position: relative;
font: 8px/16px arial;
text-transform: uppercase;
text-align: center;
z-index: 15;
}

.userpic img, .userpicfriends img {
width: 80px;
height: 80px;
padding-right: 1px;
border-right: 10px solid #ccc;
}

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

/* -------------- date, subject, current, tags */

.datesubject {
color: #cb70a4;
text-align: left;
font: 9px arial;
text-transform: uppercase;
height: 40px;
}

.date {
background: #f5f1f5;
padding: 5px 10px;
width: 300px;
}

.date:hover {
background: #fff;
}

.subject {
padding-left: 20px;
}

.subject a, .subject a:visited {
color: #b9806a;
font: 14px arial;
text-transform: lowercase;
}

.currents {
display: none;
padding-left: 20px;
}

.currents strong {
color: #aaa;
}

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

.ljtags {
display: none;
margin: 20px 0px -52px 0px;
font: 9px arial;
text-transform: uppercase;
}

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

.comments {
text-align: right;
padding: 0px 20px 15px;
text-transform: lowercase;
color: #eee;
font: 14px arial;
letter-spacing: -1px;
margin-top: -20px;
}

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

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

.box {
padding: 5px;
border: 0px;
background: #fafafa;
}

.commentbox {
margin: 10px;
padding-left: 10px;
border: 0px;
}

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

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

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

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

input, textarea, select, option, button {
border: 0px;
font: 11px arial;
color: #aaa;
background: #f4f4f4;
border: 1px solid #ddd;
padding: 0px 4px;
}

.skiplinks {
text-align: center;
text-transform: uppercase;
margin-bottom: -20px;
color: #eee;
background: #fafafa;
}

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

table.yeartable {
padding: 5px;
}

table.yeartable td.yeardate {
background: #fafafa;
padding: 5px 15px;
}

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

table.yeartable td.yearday {
color: #666;
background: #e5ddee;
font: 14px arial;
text-align: center;
text-transform: lowercase;
padding: 5px;
}

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

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

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

.ljtaglist {
background: #fafafa;
color: #888;
padding: 15px 45px;
font: 11px/24px verdana;
}

h2 {
color: #c388a4;
text-align: right;
text-transform: lowercase;
padding-right: 15px;
font: normal 21px courier new;
}

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

.clear {
background-color: transparent;
}

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

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

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

.ljuser a, .ljuser a:visited {
color: #825d6d;
font-family: verdana;
}

.ljuser a:hover {
color: #bbb;
}

.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: #f7f7f7 !important;
border: 2px solid #cb886f !important;
border: 0px;
padding: 5px;
color: #777 !important;
}

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

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

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

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

#lj_controlstrip a {
text-transform: uppercase;
font-size: 8px;
font-family: verdana;
color: #aaa;
}

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

#lj_controlstrip a:hover {
color: #fff;
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: #c388a4;
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: #aaa;
}

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

#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.) Hit Save Changes and you're done.

❥ additional info

Sidebar alignment info: (everything else is set to "Yes")
[Title of the blurb sidebar box] Blurb (this is your site title, remove blurb and add something)
[Title of the links sidebar box] Links (remove the text so it's blank)
[Show tags in the sidebar?] No.
[Show the page summary in the sidebar?] No.
[Show the calendar in the sidebar?] No.

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

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