(LAYOUT 017 →) mystified flexi sqs, celebration!

Jul 10, 2011 19:17

WOOOOOO


Thanks for getting me to 600 watchers! In response to this unprecedented (not really) amount, I'm posting another layout. When we reach 1000 I plan on taking requests, so lets hurry this along, yes?
...



MYSTIFIED: static preview | live preview
COMPATIBLE BROWSERS*:
Firefox, Google Chrome, Safari, IE
*with minimal appearance differences, best viewed in FF and GC


( basic settings )

Account Types: Basic, Paid
Ad Placement: N/A - This Layout does not support Plus
Comment Pages: Sort of, but not really.
Sidebar Positioning: N/A

( how to install )

Go to Customize Your Journal Style. Make sure you have a Flexible Squares stylesheet selected, such as "Blue Gray." If not, type Flexible Squares into the search bar and select one.
Page setup -> 2 Column (sidebar on left) option selected.
Display tab -> Presentation -> Additional options -> user picture position should be set to right.
Custom CSS tab -> All dropdown menus should be set to NO.

Input the corresponding CSS:

MYSTIFIED //

/* entitled: mystified */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */

/* BODY ---------------- */

body {
background-color:black;
background-attachment:fixed;
background-image: url("http://i52.tinypic.com/i5ytfr.jpg");
margin: auto;
}

body, td, th {
font: normal 10px "Georgia", serif;
color: #B5B5B5;
line-height:13px;
text-align:justify;
}

/* PARENT LINKS, BLOCK QUOTE ---------------- */

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

b, strong {
color: #898989;

}

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

blockquote {
color:#444444;
padding: 15px;
border: 1px solid #E8E8E8;
border-left:10px solid #C5DDDD;
border-top:10px solid #E2E8D8;
background-color: #f7f7f7;
}

input, textarea, select {
background-color: #ffffff;
font: normal 11px "Courier New", monospace;
border:1px solid #EFEFEF;
}

/* CONTENT FORMATTING ---------------- */

#content {
margin:auto;
}

#maincontent {
margin:auto;
color: #999999;
font: 11px "Lucida Sans", sans-serif;
width:900px;
line-height: 1.5em;
border-top:1px dotted #565656;
clear:both;
}

.subcontent, .yeartable {
background-color:black;
margin:auto;
padding: 4px; }

/* HEADER AND FOOTER ---------------- */

#header {
position:absolute;
float:top;
top:0;
font: normal 13px "tahoma", sans-serif;
text-transform: uppercase;
letter-spacing:1px;
z-index: 20;
padding-top:85px;
opacity: .85;
text-align:center;
left: 50%;
margin-left: -381px;
width:763px;
}

.headerimage {position: relative; background: #000000 url(http://i52.tinypic.com/25u5pjb.jpg) no-repeat scroll 50% 50%; height:300px; width:auto;margin: 0 auto 0;border-top:90px solid #000000;border-bottom:10px solid #000000; margin-bottom:30px;}

#footer {
font: normal 12px "Arial", sans-serif;
text-transform: lowercase;
width: auto;
text-align: center;
letter-spacing: 0px;
color: #DBDBDB;
}

#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #999999;
}

#footer a:hover {
color: #AAAAAA;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #000000;
text-decoration: none;
}

div#header a:hover {
text-decoration: none;
color: #444444;
margin:0px;
}

ul.navheader {
}

ul.navheader li {
padding:35px;
display: inline;
margin-left:-5px;
}

ul.navheader li.view {
padding: 35px;
color: #000000;}

div#header li {padding: 35px; background-color:#CFCDC8;}
div#header li + li{padding: 35px; background-color: #C7CFD2;}
div#header li + li + li {margin-bottom:-10px; padding: 35px; background-color: #C5DDDD;}
div#header li + li + li + li{padding: 35px; background-color: #E2E8D8;}
div#header li + li + li + li + li {padding: 35px; background-color:#F8FCF8;}

.title { display: none; }

.subtitle { display:none; }

/* ENTRY, ENTRY-LISTS ---------------- */

.entry {
background-image: url("http://i51.tinypic.com/2ebfgvq.png");
padding: 10px;
position: relative;
color: #383636;
font: normal 11px "Lucida Sans", sans-serif;
line-height: 2em;
text-align: justify;
}

.lj-view-recent .entry_text {
min-height:250px; }

.entry_text {
background: #ffffff;
padding:10px;
width: 700px;
margin-left:-2px;
margin-bottom:-18px;
opacity: .97;
}

.entry_text a, a:link, a:visited, a:active {
color:111111; }

.entry_text li {
color:111111; }

.entry_text a:hover {
color:444444; }

.entry_text img {
border: 1px dotted #CCCCCC;
padding:5px;
}

.entry ul li {
padding-left: 5px;
margin-left: 5px;
}

.entry ol li {
padding-left: 5px;
margin-left: 5px;
}

/* USER PIC CRAP ---------------- */

.userpic, .userpicfriends {
position:absolute;
float:right;
background-color: transparent !important;
padding: 5px;
margin: 72px 0px 0px 723px;
text-align: center;
color: #ffffff;
z-index: 5;
}

.userpic img, .userpicfriends img, .defaultuserpic img {
border-top: 50px solid #000000;
border-left: 16px solid #000000;
border-right: 13px solid #000000;
border-bottom: 50px solid #000000;
padding: 18px;
width: 100px;
height: 100px;
background-color: #9FC0BA;
background-image: url("http://i52.tinypic.com/2rnfw5i.png");
}

.userpic a font, .userpicfriends a font {
color: #B5B5B5;
}

.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color: #B5B5B5; }

/* DATE AND SUBJECT ---------------- */

.date {
text-transform:uppercase;
font: normal 12px "Lucida Console", sans-serif;
color: #383636;
width:400px;
margin-left:465px;
background-color:white;
border-top:3px solid #cccccc;
letter-spacing: 1px;
text-align:center;
padding: 5px 3px 3px 3px;
opacity: .97;
}

.subject, subject a, subject a:link {
text-transform:uppercase;
color: #ffffff;
background-color:#22292D;
line-height: 20px;
border-top:3px solid #F7F7F7;
margin-bottom:-4px;
padding:5px;
width:890px;
margin-left:-29px;
font: bold 17px "tahoma", sans-serif;
letter-spacing: -1px;
z-index: 25;
}

.subject a:hover {
color: #CCCCCC;
}

.datesubject {
background-image: url("");
text-align: center;
margin: 0px 0px -10px 5px;
padding: 20px;
}

/* FORMAT THE SIDEBAR ------------------ */

#sidebar { display:none; }

/* TAGS ------------------ */

.ljtags {
background: white;
padding:5px;
margin-top: 10px;
width: 690px;
border-top: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
font: italic 10px "Lucida Console", sans-serif;
text-transform: lowercase;
background: transparent url() no-repeat scroll 100% 50%; }

.ljtags a {
color: #414B4D;
}

.ljtags a:hover {
font-style: italic;
color: #111111; }

ul.ljtaglist {
width: 650px;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0;}

/* CURRENTS INFO ---------------- */

.currents {
background-color: #000000;
color:#ffffff;
position:absolute;
float:right;
text-align:left;
padding:5px;
border-bottom: 15px solid #000000;
border-top: 15px solid #000000;

width: 156px;
right:-2px;
bottom:65px;
margin:0 -300 0px 0;
font: normal 10px "Lucida Sans", sans-serif;
text-transform: uppercase;
z-index: 4;
}

.currents strong {
font-weight: normal;
}

/* COMMENT LINKS ---------------- */

.comments {
border-top: 4px solid #000000;
width: 893px;
border-bottom:1px dotted #565656;
text-align: right;
padding: 5px 4px 6px 4px;
background-color:black;
position: relative;
margin: 10px 0 -15px -15px;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #white;
background-color:#22292D;
font: normal 11px "Lucida console", sans-serif;
padding-bottom:15px;
letter-spacing: 2px;
margin-right:-4px;
margin-bottom:-3px;
text-transform:uppercase;
padding: 5px 5px 5px 5px;
}

div.comments a:hover {
color: #efefef;
text-decoration: none;
}

/* COMMENT-PAGE ---------------- */

.datesubjectcomment {
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
padding: 15px;
width: 80px;
height: 80px;
background-image: url("http://i52.tinypic.com/2rnfw5i.png");
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
clear: left;
}

input, textarea {
background-color: #ffffff;
border: 1px solid #e3e3e3;
padding: 3px;
font-family: arial;
color: #383636;
}

textarea.textbox {
width: 100% !important;
}

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
background-color: #ffffff;
padding:6px;
margin: 10px;
font-size: 10px;
font-family: "Lucida Sans", sans-serif;
color: #383636;
}

.commentbox {
background-color: #000000;
padding: 5px;
margin:10px;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
border: 1px solid #e3e3e3;
}

.commentinfo {
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
color: #ffffff;
text-align: left;
text-transform: uppercase;
padding-bottom: 20px;
}

/* ARCHIVE PAGE ---------------- */

ul.year {
text-align: center;
padding-bottom: 20px;
}

ul.year li {
display: inline;
}

table.yeartable {
width: 625px;
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
padding:10px;
}

table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}

td.yearmonth {
border-style: none;
}

/* FOOTER ---------------- */

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

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

.clearfoot {
clear: both;
height:0;
}

/* MISC, SPACE SEPARATOR ----------------*/

.clear {
height: 6px;
}

.skiplinks {
text-align: center;
text-transform:uppercase;
}

.separator{
height: 10px;
}

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

/* LJ USER IMG ICONS ---------------- */

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img [src*="openid-profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url("http://img855.imageshack.us/img855/8118/userd.png") !important;
padding: 15px 11px 0 0 !important;
text-decoration: none;
}

.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {

background-repeat: no-repeat !important;

background-image: url("http://img220.imageshack.us/img220/7496/communityg.png") !important;

padding: 13px 12px 0 0 !important;

width:0;

height: 0;

text-decoration: none;

}

img[src*="icon_protected.gif"] {

display: none;
}

img[src*="icon_private.gif"] {
display: none;

}

img[src*="newsinfo.gif"] {
background-image:url("http://img94.imageshack.us/img94/3993/syndicatei.png");
background-repeat:no-repeat !important;
height:0;
padding:13px 12px 0 0 !important;
width:0;
}

img[src*="syndicated.gif"] {
background-image:url("http://i52.tinypic.com/f0c6t5.png");
background-repeat:no-repeat !important;
height:0;
padding:14px 14px 0 0 !important;
width:0;}

/* CONTEXTUAL POP-UP ---------------- */

div.ContextualPopup div.Inner {display:none;
}

LAYOUT DETAILS:
All sidebar content is disabled: sidebar links, calendar, page summary, free blurb, tags list, and sidebar userpic. The header is 900px wide. If you want to replace the header, your image should be at least 900px in width. This layout must have a header!! It works best if one is used. Do not ask me about disabling the header, it is part of and crucial to the design of this particular design.

( additional )

Saving/Hosting: All tiny icons should be SAVED SAVED SAVED to your own hardrive and reuploaded onto an image hosting site, in case mine go out. This is not required, obviously, just suggested.
Editing: Feel free to change/edit the backgrounds, color scheme, etc.
Just don't change the framework CSS and be sure to have a link back to this community or my journal as credit somewhere, anywhere on your livejournal.
Questions: Check out the FAQ and see if your question is answered. If not, leave a comment, and I'll do my best to help with any problems.

WATCH // AFFILIATION

Credit to:
milou_veronica;; used her li coding to color the different block links in the header.
Phillip Klinger Photography for the gorgeous mountain headerimage.

!stylesheet: flexible squares, theme: dark palette, #livejournal layouts, feature: header, feature: background

Previous post Next post
Up