(LAYOUT 05 →) white dwarf.

Dec 30, 2010 21:38

Still waiting to reach that magic 200 number.
Well, this is my last update for the year. Hopefully y'all liked all these ridiculous updates this holiday season. I've updated like 6 times this month. See you in 2011.



Live Preview | Static Preview

layout 04 - (mastering flexible squares). basics:
Stylesheet: Flexible Squares
Compatible Browsers: Firefox, Chrome, Safari, Internet Explorer
Account Types: Basic, Plus, Paid
Comment Pages: More or less
Appearance: Topbar with blurb and links
Alternate Versions: NONE

installation:
Go to customize your journal style.
Choose a 'Flexible Squares' style-sheet and have the '2 column (sidebar on right)' is selected under Page Setup. Then click on customize your theme. Go to 'Custom CSS', set the first two drop-downs to NO, and insert the CSS provided below.

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

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

body {
background-color: #F4F4F4;
background-attachment:fixed;
background-image: url("");
margin: 20px 0 20px 0;
}

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

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

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

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

blockquote {
border: 1px dotted #CCCCCC;
padding: 15px;
background-color: #F4F4F4;
}

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

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

#content {
width: 696px;
margin-left: auto;
margin-right:180px;
}

#maincontent {
margin-top: 5px;
background-color: #transparent;
text-align: auto;
color: #b5b5b5;
font: normal 11px "Arial", sans-serif;
}

.subcontent, .yeartable {
background-color:#ffffff;
padding: 4px;
padding-top:9px; }

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

#header {
width: auto;
padding: 10px 0px 15px 20px;
margin-right: 30px;
text-align: right;
font: normal 14px "Lucida Sans", sans-serif;
text-transform: lowercase;
font-weight: normal;
letter-spacing: 0px;
color: #D5D5D5;
}

.title {
display: none;
}

.subtitle {
display: none; }

#footer {
font: normal 14px "Lucida Sans", sans-serif;
text-transform: lowercase;
width: auto;
padding: 0px 0px 0px 10px;
margin-left: 30px;
text-align: left;
letter-spacing: 0px;
color: #ADADAD;
}

#footer a {
color: #D5D5D5;
}

div#header a, div#header a:link, div#header a:visited {
color: #D5D5D5;
text-decoration: none;
margin:0px;
}

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

ul.navheader {
padding: 5px 5px 2px 0px;
margin: 0px;
}

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

ul.navheader li.view {
padding: 10px;
color: #AFAFAF;}

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

.entry {
margin: 0px 10px 10px 0px;
padding: 7px;
color: #b5b5b5;
font-family: "Arial", sans-serif;
font-size: 11px;
text-align: left;
}

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

.entry_text {
margin-bottom: 20px;
}

.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: left;
background-color: transparent !important;
padding: 5px;
margin: 10px 0px 0px -147px;
z-index: 15;
text-align: center;
color: #ffffff;
}

.userpic img, .userpicfriends img, .defaultuserpic img {
background-image: url("http://i51.tinypic.com/dyr7g0.jpg");
border: 1px solid #e3e3e3;
padding: 12px;
width: 100px;
height: 100px;
background-color: #efefef;
}

.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-size: 8px;
color: #CCCCCC;
letter-spacing: 1px;
text-align: center;
padding: 0px;
}

.subject, subject a, subject a:link {
font-weight: normal;
font-color: #d5d5d5;
text-transform: lowercase;
font: normal 17px "Lucida Sans", sans-serif;
}

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

.datesubject {
width: 667px;
border: 1px dotted #e3e3e3;
text-align: center;
margin: 0px 0px 5px 5px;
padding: 5px;
}

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

#sidebar {background: #FFFFFF;
width: 676px;
border: 0px solid #DDDDDD;
font: normal 11px "Arial", sans-serif;
text-align: justify;
color: #B5B5B5;
min-height: 150px;
margin-left: auto;
margin-right:180px;
margin-top: 5px;
margin-bottom: 25px;
list-type: block;
padding: 10px;}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited, li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active{ font: normal 11px "Lucida Sans", sans-serif; color: #BCCED8; text-align: center; text-transform: lowercase; border: 1px dotted #e3e3e3; padding: 7px; }

div#sidebar a:hover, li.sbaritem a:hover{ color: #ADADAD; text-decoration: none; text-align: center; }

.sbarbody{ text-align: center; padding: 13px; }

.sbarbody2{ padding: 10px; background: #ffffff; color: #CCC; }

li.sbaritem{ display: inline; list-style-type: none; margin: 0; padding: 0 10px; background: #ffffff; text-align: center; color: #CCC; }

li.sbaritem a{ text-align: center; font-size: 12px; letter-spacing: 1px; }

li.sbaritem:hover{ background: #ffffff; text-align: center; color: #CCC; }

ul.sbarlist{ margin: 0; list-style-type: none; display: inline; text-align: center; }

.sbarbody2 {
margin-left: 0;
width: 656px;
text-align: justify;
padding: 5px; }

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

li.sbaritem {list-style-type: none;
text-align: center;
width: 100px;
margin: 0 5px 0 20px;
padding: 0 4px 0 4px;}

.sidebar-links {
margin-left:20px; }

.sbarbody#sidebar_tags, .sbarbody#sidebar_calendar, .sbarbody#sidebar_summary, .defaultuserpic, .sbarheader, li.sbartitle { display: none; }

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

.ljtags {
margin-top: 20px;
margin-bottom: -20px;
font: normal 11px "Lucida Sans", sans-serif;
text-transform: lowercase;
background: transparent url() no-repeat scroll 100% 50%; }

.ljtags a {
color: #BCCED8;
}

.ljtags a:hover {
color: #d5d5d5; }

ul.ljtaglist {
width: 676px;
background-color:#ffffff;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0;}

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

.currents {
font-family: "Lucida Sans", sans-serif;
font-size: 11px;
text-transform: lowercase;
}

.currents strong {
font-weight: normal;
}

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

.comments {
text-align: center;
padding: 4px;
position: relative;
font-size:0;
margin: 0 0 0 0px;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #d5d5d5;
font: normal 14px "Lucida Sans", sans-serif;
padding: 3px;
}

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

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

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

.userpiccomment {
position: relative;
border: 1px solid #e3e3e3;
padding: 10px;
width: 70px;
height: 70px;
background-image: url("http://i51.tinypic.com/dyr7g0.jpg");
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: #b5b5b5;
}

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

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Arial", sans-serif;
color: #b5b5b5;
}

.commentbox {
background-color: #ffffff;
padding: 10px;
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: 696px;
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: 20px;
}

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://i52.tinypic.com/2mpe6bn.jpg) !important;
padding: 14px 13px 0 0 !important;
text-decoration: none;
}

.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image: url(http://i55.tinypic.com/mwt8id.jpg) !important;
padding: 14px 14px 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://i52.tinypic.com/2vi07bq.png");
background-repeat:no-repeat !important;
height:0;
padding:14px 14px 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 {
padding: 10px 10px 8px 10px !important;
background-color: #ffffff;
font-family: "Lucida Sans", serif;
color: #A3A3A3 !important;
font-size: 8px;
text-transform:uppercase;
width:210px;
border:1px dotted #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: #BCCED8 !important;
font-weight: normal;
text-decoration: none !important;
}

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

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

settings:
Disabled: The calendar, tags list and page summary in the Topbar. The title and subtitle display. Header image is not recommended.
Enabled: Topbar links and blurb.
Additional: On the 'Display' menu, under the Additional Options tab, select YES to show the user picture on all entries and then select LEFT as the position for the user picture in each entry. Also, order the Blurb first and the Links second.
Ad Placement: Ad placement should be set to 'Horizontal' or 'Between Entries'.

notes:
Saving/Hosting: All tiny icons should be saved to your own hardrive and reuploaded onto an image hosting site, just to be on the safe side.
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 fleeting_days as credit somewhere, anywhere on your livejournal.
Questions(?): If you have any problems, please comment. A small help tutorial will be coming soon.

WATCH, IF YOU PLEASE. // AFFILIATION, YES?

theme: monochromatic (b/w or gray), theme: minimalistic, !stylesheet: flexible squares, #livejournal layouts, theme: simple, style: light

Previous post Next post
Up