(layout 033 →) flexi sqs: starry eyed.

Sep 18, 2012 15:20

Let me be brief:


The causation


The reaction
Thanks a lot! So very appreciated. Now. Back to business.



Entitled: Starry Eyed.
Account Types: Paid, Basic and Plus.
Preview: static | live

INSTALLATION 101
Go to Customize -> Select a Flexible Squares stylesheet -> choose Customize your theme -> then click on Custom CSS in the menu on the left. Set all the dropdown menus to no and paste the css in the textbox, then save. For Plus accounts the ads can be set anywhere, but between entries should look better.

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

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

body {
background-color: #ECFCF4;
background-attachment:fixed; }

body, td, th {
font: normal 11px "Arial", sans-serif;
letter-spacing:0.05em;
color: #000000;
line-height:12px;
text-align:justify;
}

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

a, a:link, a:visited, a:active {
color: #000000;
padding: 1px;
text-decoration: none;
}

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

blockquote {
border:1px dotted #e2e2e2;
font: 9px "Lucida sans", sans-serif;
text-transform:uppercase;
line-height:1em;
background-image:url("http://i55.tinypic.com/2dcao36.gif");
opacity: .85;
padding: 12px;
color:#000000;
}

b, strong {
color:#3F3F3F;
}

em, i {
color: #888888;
}

input, textarea, select {
background-color: #ffffff;
font: normal 11px "Arial", monospace;
color: #888888;
}

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

#content {
width:75%;
margin: 0 auto;
border: 0px;
padding: 0px;}

#maincontent {
float: left;
width: 75%;
margin-top: 0px;
background-color: transparent;
color: #000000;
border: 0px;
text-align: left;}

.subcontent, .yeartable {
background-color:#ffffff;
padding:10px;
width:96%;
padding-bottom:0px;
padding-top: 10px; }

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

#header {
text-align: center;
padding-bottom: 30px;
color: #555555;
text-transform:lowercase;
font: normal 9px "Arial", sans-serif;
letter-spacing: 1px;
margin-top:35px;
}

.title, .subtitle {
display:none;
}

#footer {
width: 100%;
padding-top:30px;
text-align: left;
z-index: 100;
clear: both;
font: normal 11px "Arial", sans-serif;
letter-spacing: 2px;
}

#footer a {
color:#404040;
background-color: #transparent;
font: italic 11px "Arial", sans-serif;
padding: 5px;
letter-spacing:0px;}

div#header a, div#header a:link, div#header a:visited {
color: #000000;
padding: 12px;
font-size:11px;
text-decoration: none;
margin:0px;
}

div#header a:hover {
color: #000000;
font: italic 11px "Arial", sans-serif;
text-decoration: none;
margin:0px;
}

ul.navheader {
padding: 10px;
margin: 0 0 0 0px;
background-color: #transparent;
}

ul.navheader li {
padding: 10px;
display: inline;
margin:0 0px 0 0px;
padding:0;
}

ul.navheader li.view {
padding: 12px;
margin:2px 0px 0 0px;
background: #D5EDD8;
border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;
font: normal 11px "Arial", sans-serif;
color: #ffffff;}

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

.entry {
margin: 0;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
line-height: 1.75em;
text-align: left;
}

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

.entry_text {
color:#404040;
padding: 0 0 12px 0;}

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

.entry_text a:hover {font-color:000;}

.entry_text img {
border-top: 1px dotted #eee;
padding:5px;
}

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

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

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

.userpic {
position: relative;
float: right;
margin-right:-10px;
margin-top:-19px;
}

.userpicfriends {
position: relative;
float: right;
margin-right:-10px;
text-align:center;
margin-top:-19px;
}
.userpicfriends img {width:100px;
height:100px; padding-left:7px;padding-bottom:7px;
background: #ECFCF4; }

.userpic img {
width:100px;
height:100px;
padding:7px;
background: #ECFCF4;
margin: 0px -7px 0px 14px;

}

.userpicfriends a, .userpicfriends font{font: normal 10px "Arial", sans-serif; color:404040; }
.userpic a, .userpic font{display:;}

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

.date {
text-transform:lowercase;
font: italic 9px "Arial", sans-serif;
color: #000000;
padding: 7px 0 0 7;
letter-spacing: 1px;
}

.subject, .subject a, .subject a:link {
font: 12px "Tahoma", sans-serif;
color: #111111;
padding: 3px 3px 3px 3px;
letter-spacing:0px;
text-transform:uppercase;}

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

.datesubject {
padding: 0px 10px 0px 0px;
text-align: right;
background-color: #ECFCF4;

}

/* FORMAT THE SIDEBAR ------------------ */
#sidebar {
padding-top: 10px;
font: normal 10px "Tahoma", sans-serif;
color: #404040;
width: 25%;
float:right;
margin-top:-5px;
text-align: justify;
line-height: 15px; }

.defaultuserpic {
display: none;
}

li.sbartitle {
display:none;
}

.sbarbody {text-align:left;}

.sbarbody2 {
margin-top: 7px;
font: normal 10px "Tahoma", sans-serif;
padding: 22px 10px 10px 10px;
border-bottom:none;
line-height: 1.5em;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color:#000000;
font: normal 10px "Tahoma", sans-serif;
text-transform:lowercase;
}

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

table.calendar {
display:none;
}

.sbarcalendar {
display:none;
}

.sbarcalendarposts {
display:none;
}

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

}

li.sbaritem {
border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
padding: 5px 0 2px 5px;
list-style: none;
margin: 5px 0 5px 0;
background-color:#D5EDD8;
}

li.sbaritem a{}

li.sbaritem:hover {
font: normal 9px "Verdana", sans-serif;
line-height: 15px;
background-color:#ffffff;
color:#404040;
text-align:right;
padding: 5px 5px 2px 0px; }

#sidebar_linklist {
padding: 5px;
margin-top: 10px;
border-bottom:none; }

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

.ljtags {
font: normal 9px "Trebuchet MS", sans-serif;
text-transform:lowercase;
padding-right: 5px;
padding-top: 15px;
padding-bottom: 5px;
margin: 0;
height: 10px;
position:relative;
text-align:left; }

.ljtags a {font: normal 9px "Tahoma", sans-serif; color: #9DC4B2;}

.ljtags a:hover {border-bottom: 1px dotted #CCCCCC;}

ul.ljtaglist {
width: 60%;
font-weight: none;
font-color:#E5FFE8;
border-bottom:none;
background-color:#transparent;
padding-left: 200px;
padding-top:10px;
margin:0 0 0 0;}

h2 { padding: 0px 0px 0px 200px; font-size: 9px; color:000000;font-weight: normal; text-transform: none; margin: 0px auto; }

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

.currents {
padding:6px;
background:white;
margin-top:-20px;
font: normal 9px "Arial", sans-serif;
text-transform: lowercase;
color: #404040;
}

.currents strong {
display: none;
}

.currentmood {
background: url('http://img219.imageshack.us/img219/4487/044z.png') no-repeat left center; padding-left: 14px;
}

.currentmusic {
background: url('http://img850.imageshack.us/img850/3669/060.png') no-repeat left center; padding-left: 14px;}

.currentlocation {display:none;}

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

.comments {
text-align: right;
padding: 4px 2px 1px 2px;
font-size:0;
margin: 0;
height:20px;
background-color:#ECFCF4;
}

.comments a {
font: normal 12px "Tahoma", sans-serif;
text-transform:lowercase;
letter-spacing:0px;
padding: 4px 5px 1px 5px;
color:#000000;
}

.comments a:hover {
font: normal 12px "Tahoma", sans-serif;
text-transform:lowercase;
letter-spacing:0px;
padding: 4px 5px 1px 5px;
color:#404040;
}

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

.datesubjectcomment {
padding: 5px;
background-color: #ECFCF4;
margin-top: 0px;
}

.userpiccomment {
position: relative;
top: -15px;
left: -15px;
margin: 0px 5px 0px 0px;
z-index: 15;
float: left;
width:100px;
height:100px;
padding:7px;
background-color: white;
}

.box {
width:98.5%;
float:left;
}

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

.reply {
position: relative;
margin: 10px 30px 10px 30px;
padding: 25px 10px 10px 10px;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
}

.commentbox {
background:#ffffff;
padding: 10px;
margin: 0px 10px 10px 0px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
}

.datesubjectcomment a:hover {
}

.commentboxpartial {
padding: 10px;
margin: 10px;
}

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

.commentbox > div > div > a > img {width: 14px; height: 14px;}

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

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

ul.year li {
display: inline;
}

table.yeartable {
width: 595px;
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{
text-align: center;
padding: 5px;
margin: 0px;
}

ul.navfooter li {
text-align: center;
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 !important;
height: 0 !important;
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 !important;
}

.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 !important;
height: 0 !important;
text-decoration: none !important;
}

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") !important;
background-repeat:no-repeat !important;
height:0 !important;
padding:18px 18px 0 0 !important;
width:0 !important;
}
img[src*="syndicated.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg") !important;
background-repeat:no-repeat !important;
height:0 !important;
padding:18px 18px 0 0 !important;
width:0 !important;
}

SETUP DETAILS
Design: Designed with simple in mind.
Active: Links list, Blurb
Appearance: Though not pictured this layout looks great with little text in entries. The entries stands out in relief against the light blue background while everything else blends in. The links reflect when hovered over. The purpose for this design was to have fewer entries on one page, and if possible to not even scroll at all. Very minimal and unobtrusive. A header is not recommended.

It would be greatly appreciated if you credit fleeting_days, leave feedback in comments, and watch the community!

theme: minimalistic, !stylesheet: flexible squares, #livejournal layouts, feature: rounded corners, theme: simple

Previous post Next post
Up