(layout 025 →) flexi sqs, vacant pages.

Jun 01, 2012 21:27

So I've been making layouts like a dog. It's kind of ridiculous actually, but whatever. It's summer, I have time.



VACANT PAGES; static | live
Browsers: Chrome, Firefox, IE, Safari
Accounts: Basic, Paid (works with Plus but not recommended)


INSTALLATION 101
Go to Customize -> Select a Flexible Squares stylesheet.
Navigation strip -> set to light gray
Ad placement -> there should be none; between entries for Plus
Display tab -> Presentation -> Additional options -> user picture position should be set to right.
Custom CSS tab -> Set all dropdown menus to NO.
Active: Header, currents, tags
Inactive: Sidebar, title, subtitle

/* entitled: vacant pages */

/* maker: silentevocation @ fleeting_days */

/* for use at livejournal.com */

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

body {

background-color:#f7f7f7;

background-attachment:fixed;

margin: 10px 0 0px 0;

background-image:url("http://i52.tinypic.com/iw4093.png");

}

body, td, th {

font: normal 12px "Arial", sans-serif;

color: #404040;

line-height: 1.5em;

text-align:justify;

}

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

a, a:link, a:visited, a:active {

color: #545454;

text-decoration: none;}

b, strong {

color: #80BCAE;}

u { color: #111111;}

i { color: #90D6DB; font-family: Georgia, Times New Roman, Book Antiqua, serif;}

.ljuser a b { color: #404040;}

a:hover {

color: #90D6DB;

text-decoration: none;

}

blockquote {

border: 1px dotted #efefef;

padding: 15px;

background-color: #ffffff;

}

input, textarea, select {

background-color: #ffffff;

font: normal 11px "Courier New", monospace;

border:1px dotted #EFEFEF;

}

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

#content {

margin:auto;

}

#maincontent {

margin:auto;

color: #999999;

font: normal 12px "Arial", sans-serif;

line-height: 1.5em;

}

.subcontent, .yeartable {

background-color:white;

background-image:url("");

margin:auto;

width:750px;

z-index: 12; }

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

#header {

width: 100%;

background-color:#efefef;

margin:auto;

margin-top:-12px;

padding: 12px 0px 35px 0px;

text-align: center;

font: normal 20px "georgia", sans-serif;

color:#80BCAE;

letter-spacing: 0px;

margin-bottom:20px;

opacity:.50;

}

#footer {

font: normal 12px "Arial", sans-serif;

text-transform: lowercase;

width: 730px;

padding: 20px 20px 20px 20px;

text-align: center;

letter-spacing: 0px;

color: #C6C6C6;

margin:auto;

margin-top:0px;

}

#footer a, #footer a:link, #footer a:visited, #footer a:active {

padding: 10px;

border: 1px solid #DDDDDD;

font: italic 12px "Georgia", sans-serif;

color: #C6C6C6;

text-transform:uppercase;

background-color:#ffffff;

}

#footer a:hover {

color: #80BCAE;

}

div#header a, div#header a:link, div#header a:visited, div#header a:active {

text-transform:uppercase;

padding: 20px;

color:#80BCAE;

background-color:#ffffff;

border-bottom-left-radius: 80px;

-moz-border-radius-bottomleft: 80px;

border-bottom-right-radius: 80px;

-moz-border-radius-bottomright: 80px;

-webkit-border-radius-bottomright: 80px;

text-decoration: none;

margin:0px;

}

div#header a:hover {

text-decoration: none;

color: #7A7A7A;

border-bottom:6px solid #90D6DB;

margin:0px;

}

ul.navheader {

padding: 0px 0px 0px 0px;

margin: 0px;

}

ul.navheader li {

display: inline;

padding: 0 3px 0 3px;

}

ul.navheader li.view {

padding: 20px;

color:80BCAE;

border-bottom-left-radius: 80px;

-moz-border-radius-bottomleft: 80px;

border-bottom-right-radius: 80px;

-moz-border-radius-bottomright: 80px;

-webkit-border-radius-bottomright: 80px;

text-transform:uppercase;

background-color:#ffffff;

}

.title, .subtitle

{

display: none;

}

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

.entry {

border-top: 5px dashed #DBDBDB;

border-left:1px solid #DDDDDD;

border-right:1px solid #DDDDDD;

border-bottom:1px solid #DDDDDD;

padding: 5px;

color: #ffffff;

font: normal 12px "Arial", sans-serif;

line-height: 1.75em;

text-align: justify;

padding-bottom:10px;

margin-bottom:-10px;

}

.lj-view-recent .entry_text {

min-height:105px; }

.entry_text {

background: white;

color: #545454;

padding:5px 5px 5px 5px;

width: 730px;

}

.entry_text a:link, a:visited, a:active {

color:e3e3e3; }

.entry_text a:hover {

color:e3e3e3; }

.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: relative;

float: right;

background-color: transparent !important;

padding: 5px;

margin: -4px -4px 0px 0px;

z-index: 15;

text-align: center;

color: #ffffff;

}

.userpic img, .userpicfriends img, .defaultuserpic img {

width: 70px;

padding:1px;

border-left: 1px solid #DDDDDD;

border-bottom: 1px solid #DDDDDD;

background-color:#ffffff;

height: 70px;

opacity: .80;

}

.userpic a font, .userpicfriends a font {

color: #B5B5B5;

}

.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{

color: #B5B5B5; }

.userpic img:hover {opacity: 1.0;}

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

.date {

text-transform:uppercase;

font: normal 9px "georgia", sans-serif;

color: #C6C6C6;

letter-spacing: 1px;

width:200px;

background-color:white;

margin-bottom: -2px;

padding: 3px 3px 3px 10px;

}

.subject {

text-transform:lowercase;

background-image:url("");

padding: 3px;

margin-top:4px;

margin-bottom: 5px;

font: italic 28px "Georgia", sans-serif;

letter-spacing: -2px;

}

.subject a, subject a:link {

color: #DBDBDB;

}

.subject a:hover {

color: #80BCAE;

}

.datesubject {

width: 740px;

background-image: url("");

background-color:#f4f4f4;

text-align: left;

margin: 0px 0px 0 0px;

border-left:1px solid #DDDDDD;

border-right:1px solid #DDDDDD;

border-top:1px solid #DDDDDD;

padding: 5px 3px 5px 5px;

}

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

#sidebar { display: none; }

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

.ljtags {

background: white;

margin-top: 15px;

padding:5px;

letter-spacing:1px;

width: 720px;

font: normal 10px "times", sans-serif;

text-transform: lowercase; }

.ljtags a {

color: #606060;

}

.ljtags a:hover {

color: #AAAAAA; }

ul.ljtaglist {

width: 675px;

background-color:#white;

padding: 5px;

padding-top:20px;

list-style:none;

margin:0;}

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

.currents {

padding: 0 0 0 10px;

color: #545454;

line-height:1.25em;

}

.currents strong {

color:#AAAAAA;

text-transform:lowercase;

}

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

.comments {

background-image:url("");

padding:0px;

width: 740px;

text-align:right;

text-transform:uppercase;

color: #white;

}

div.comments a, div.comments a:link, div.comments a:visited {

width:670px;

text-align:center;

font: italic 12px "Georgia", sans-serif;

color: #A3CEC5;

margin-bottom:12px;

border-top:4px solid #efefef;

border-bottom:4px solid #efefef;

letter-spacing: 1px;

text-transform:uppercase;

padding:3px;

}

div.comments a:hover {

border-top:4px solid #efefef;

border-bottom:4px solid #90D6DB;

opacity:.85;

text-decoration: none;

}

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

.box {text-align: left; margin-bottom:1px; padding: 0px; clear: left;margin-left: auto; margin-right: auto}

.datesubjectcomment {text-align: left; color: #999999; margin-top: 0px}

.userpiccomment { position: relative; padding: 3px; border: 1px solid #DDDDDD; background-color: #ffffff; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left}

textarea.textbox {width: 100% !important}

.reply { border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.75}

.replytosubject {letter-spacing:2px; font-weight: bold}

.commentreply { line-height:1.75; min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 120px}

.lj-view-reply .entry{padding:10px;min-height:90px}

.commentbox { border: 1px solid #DDDDDD; background-color: #FFFFFF; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px}

.commentbox:hover, .commentboxpartial:hover {border-color: #eeeeee}

.commentboxpartial { border: 0px solid #eeeeee; background-color: #FFFFFF; padding: 10px; margin: 10px; -moz-border-radius: 7px}

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

.skiplinks {text-align: center;margin: 0 auto 10px;padding: 10px 0px; font-size: 8pt; color: #ccc;background-color:#FFFFFF;border:1px solid #eee;width:750px;}

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

ul.year {

text-align: center;

padding-bottom: 20px;

}

ul.year li {

display: inline;

}

table.yeartable {

width: 725px;

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: 5px;

}

.skiplinks {

text-align: center;

text-transform:uppercase;

}

.separator{

height: 5px;

}

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://img19.imageshack.us/img19/2576/160w.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://img807.imageshack.us/img807/3271/159j.png") !important;padding: 15px 11px 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://i47.tinypic.com/2rh8cwm.gif");background-repeat:no-repeat !important;height:0;padding:18px 18px 0 0 !important;width:0;}

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

background-image:url("http://i45.tinypic.com/2zpic05.jpg");background-repeat:no-repeat !important;height:0;padding:18px 18px 0 0 !important;width:0;

}

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

div.ContextualPopup div.Inner {

padding: 10px 10px 8px 10px !important;

font-family: "Trebuchet MS", serif;

color: #999999 !important;

font-size: 10px;

width:210px;

border:1px solid #CCCCCC;

}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner

a:active {
color: #888888 !important;
font-weight: normal;
text-decoration: none !important;
}

div.ContextualPopup div.Inner a:hover {

color: #B7A8B5 !important;

font-weight: normal;

text-decoration: none !important;}

div.ContextualPopup .Relation {color: #B5B5B5;font-weight: normal !important;}

div.ContextualPopup .Userpic { padding: 8px; background-color: #f2f2f2;}

[ notes ]
- This one can be used for anything. Another soft gray layout which focuses on subtle differences as opposed to flashy boldness which is why they are so ubiquitous and work with pretty much everything.
- I'm starting to see the advantages to the rounded style because they provide so many ways to make a simple design more beautiful. I like.
- The comment pages actually don't look half bad, but I still prefer classic LJ comment pages. Use them at your own peril.
- (more to be added as necessary)

EXTRANEOUS
Taking Requests: request specific design for your own uses; lj tokens taken as payment
Layout Archive: browse through my older layout designs
Resources: precarious and hasty outline of various resources used.
WATCH // AFFILIATE

theme: monochromatic (b/w or gray), theme: minimalistic, !stylesheet: flexible squares, theme: rounded corners, #livejournal layouts

Previous post Next post
Up