010: Missing Pieces

Jan 21, 2011 01:21

Coincidentally, this entry also marks the return of trodain to something...more active. Ahaha, this layout was severely delayed due to laziness to customize the little details but it's complete now! Incidentally, this would be the complement to this layout. ;D



Live preview dragovia Temporary live preview in case the live one doesn't work.

Missing Pieces
Style: Flexible Squares
Resolution: 800 x 600 minimum
Browsers tested: Google Chrome, IE. Should work fine with all.
Features: Topbar, customized comment pages, customized navigation bar.
Disabled: The usual deal like tags in entries.



1) Change your layout to Flexible Squares.

2) Go to "Customize your theme" and make sure you do the following things*:

b) Sidebar:

- Default userpic: Yes (1st)
- Blurb/free text: Yes (2nd position)
- Link list: Yes (3rd position).
- Tags: No.

*** Your header should be 800px wide; otherwise, go nuts.

Please set the ads to horizontal/between entries and make sure all of the dropdown boxes at the "Custom CSS" section are set to 'no'.

body{ background-color: #fff; text-align: center; color: #666; font-family: "Geneva", sans-serif; font-size: 11px; margin: 50px auto; line-height: 150%;}

div {border-color: #f1f1f1!important;}

a, a:link, a:visited {color: #197CBA; text-decoration: none;}

h1, h2, h3, h4, h5, h6, b, i {color: #197CBA; font-weight: normal;}

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

blockquote {padding: 10px; border: 1px solid #f1f1f1; background: #f4f4f4;}

p, td, blockquote {font-size: 11px;}

code, kbd, pre, tt {font-family: monospace;}

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

#maincontent {font-family: "Geneva", sans-serif; font-size: 11px; background-color: #fff; color: #666; text-align: left;}

#sidebar {background-color: #fff; font-size: 11px;
font-family: "Geneva", sans-serif; color: #666; width: 800px; text-align: left; min-height: 140px; padding-bottom: 20px;}

#header {padding: 10px 0px; text-align: right; width: 800px; margin: 20px auto; font-variant: small-caps;}

.headerimage {margin: 0 auto; width: 800px; height: 180px; padding: 10px 0px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Headers%20and%20banners/Seaheader-1.png); background-repeat: no-repeat; background-position: top center;}

#footer {width: 780px; text-align: right; font-family: "Geneva", sans-serif; font-size: 11px; font-weight: normal; background-color: #fff;
color: #666; z-index: 100; clear: both; font-variant: small-caps; padding: 20px 10px 0px 10px; margin: 20px auto;}

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {color: #666;}

div#header a:hover, div#footer a:hover {color: #777; text-decoration: none;}

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

ul.navheader li {display: inline; margin: -2px; padding: 10px; background: #f5f5f5; font-family: "Garamond", serif; border-bottom: 5px solid #f1f1f1;}

div#header li.view {background: #f1f1f1;}

ul.navheader li:hover {background: #f1f1f1;}

.title, .subtitle {display: none;}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {color: #777; text-align: right; font-family: "Georgia", serif; font-variant: small-caps;}

div#sidebar a:hover {color: #1C89CD;text-decoration: none;}

.defaultuserpic {float: left;}

.defaultuserpic img {border: 1px solid #f1f1f1; padding: 9px; margin-right: 10px; margin-top: 10px;}

.sbarbody#sidebar_linklist {width: 230px; float: right;}

.sbarbody2 {width: 430px; float: left; margin-top: 10px;}

table.calendar {display: none;}

.sbarcalendar {border: #f1f1f1 1px solid; text-align: center; font-family: "Geneva", sans-serif; font-size: 11px;}

.sbarcalendarposts {border: #f1f1f1 1px solid; background-color: #fff; text-align: center; font-family: "Geneva", sans-serif; font-size: 11px;}

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

li.sbaritem {padding: 5px 5px 5px 15px; margin: 2px; list-style: none; border-bottom: 1px solid #f1f1f1; text-align: right; display: block!important; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/gear-small.png); background-repeat: no-repeat; background-position: 0px 5px;}

li.sbartitle {display: none;}

/* maincontent */

.subcontent {width: 800px; border-top: 15px solid #197CBA; margin: 20px auto;}

.entry {padding: 20px 10px 10px 10px; color: #666; font-family: "Geneva", sans-serif; font-size: 11px; text-align: left; margin-left: 120px;}

.entry_text img {max-width: 640px; padding: 4px; border: 1px solid #f1f1f1;}

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

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

.userpic, .userpicfriends {float: left; padding: 0px; text-align: center; border: none!important; font-family: "Georgia", serif; font-size: 11px; z-index: 15; background: #fff!important; font-variant: small-caps; text-transform: capitalize; color: #fff!important;}

.userpic a font, .userpic a, .userpicfriends a, .userpicfriends a font {color: #777!important;}

.userpic img, .userpicfriends img {border: 1px solid #f1f1f1; padding: 9px; margin-top: 15px;}

.date {display: none;}

.subject {color: #666; font-family: "Garamond", serif; font-size: 20px; font-weight: normal; font-variant: small-caps; text-align: right;}

.subject a, .subject a:link, .subject a:visited {color: #777; text-align: right; line-height: 150%;}

.subject a:hover {color: #1C89CD;}

.datesubject {background-color: #fff; padding: 10px 0px;}

.currents {background: #f4f4f4; padding: 4px; text-transform: capitalize; border: 1px solid #f1f1f1;}

.currents strong {display: none;}

.currentmusic {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/bell-6.png); background-repeat: no-repeat;
background-position: left center; padding: 2px 0px 0px 20px;}

.currentmood {text-transform: capitalize; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/book-bookmark-1.png); background-repeat: no-repeat; background-position: left center; padding: 2px 0px 0px 20px;}

.currentmood img {float: right; margin-top: -10px; padding: 4px; border: 1px solid #f2f2f2;}

.currentlocation {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/compass.png); background-repeat: no-repeat; background-position: left center; padding: 2px 0px 0px 20px;}

.ljtags {display: none;}

.comments {font-family: "Garamond", serif; font-size: 11px; text-align: right; background-color: #fff; padding: 10px 0px; position: relative;
top: 15px; border-top: 1px solid #197CBA; color: #fff;}

div.comments a, div.comments a:link, div.comments a:visited{color: #777; font-size: 15px; font-variant: small-caps;}

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

/* maincontent -- entry, reply pages */

.datesubjectcomment {padding: 10px; border-bottom: 1px solid #f1f1f1; background: #fff; margin: 0px 10px; border-top: 5px solid #197CBA;}

.userpiccomment {position: relative; float: left; padding: 9px; border: 1px solid #f2f2f2!important; margin: 10px; text-align: center; font-family: "Geneva", sans-serif;font-size: 11px; z-index: 15; background: #fff!important; color: #fff!important;}

.box {padding: 10px; clear: left;}

input, textarea {background-color: #fff; color: #777777;}

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

#qrform table {border: none !important;}

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

.replytosubject {font-weight: normal!important;}

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

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

.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #197CBA;}

.datesubjectcomment a:hover {color: #66C9FF;}

.commentboxpartial {padding: 10px; margin: 10px; background-color: #fff;}

.commentinfo {background-color: #fff; margin-top: 10px; width: 100%;}

input, textarea, select {font-family: "Geneva", sans-serif;font-size: 11px; color: #777777; border: 1px solid #f2f2f2;}

/* maincontent -- year/archive pages */

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

ul.year li {display: inline; padding: 10px; font-size: 12px; background: #f4f4f4; border-bottom: 5px solid #f1f1f1; font-family: "Garamond", serif;}

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

table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #f1f1f1;}

table.yeartable td.yearday {background-color: #f1f1f1; text-align: center; color: #777; font-variant: small-caps; font-family: "Garamond", serif;}

td.yearmonth {border-style: none;}

/* footer */

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

ul.navfooter li {display: inline; margin: -2px; padding: 10px; background: #f5f5f5; font-family: "Garamond", serif; border-bottom: 5px solid #f1f1f1;}

.clearfoot {clear: both; display: none;}

/* misc */

.clear {display: none;}

.skiplinks {text-align: center; color: #fff;}

/*------------------------------------
Look of contextual Popup
------------------------------*/

div.ContextualPopup div.Inner {background: transparent!important; color: #777!important; padding: 5px; width: 300px;
font-family: Georgia, serif; font-weight: normal!important; font-size: 11px;
border: none!important;}

div.ContextualPopup .Content {padding: 5px; margin-right: 80px; line-height: 150%; background: #fff!important; color: #666!important;
border: none!important;}

div.ContextualPopup .Userpic {margin: 0px; padding: 9px; border: 1px solid #f1f1f1; background: #fff;}

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

div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {text-decoration: none !important; font-weight:normal; color: #197CBA! important; font-variant: small-caps;}

div.ContextualPopup .Relation {margin-bottom: 3px; padding-bottom: 3px; text-transform: capitalize; font-weight: normal!important; font-variant: small-caps;}

div.ContextualPopup .Content .OnlineStatus {font-weight: normal!important; color: #197CBA! important;}

img[src*="http://l-stat.livejournal.com/img/icon_protected.gif"], [src="http://l-stat.livejournal.com/img/icon_private.gif"], [src="http://l-stat.livejournal.com/img/icon_groups.gif"] {width: 0;height: 0;padding: 0 16px 16px 0;
background: url("http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/lock-6.png");}

img[src*="userinfo.gif"], img[src="http://livejournal.com/img/newyearpic_1.gif"], img[src="http://www.livejournal.com/stc/img/userinfo-support.gif"], img[src*="http://l-stat.livejournal.com/img/user_ontd.gif"] {width: 0; height: 0; padding: 16px 0 0 16px;
background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/wall.png); background-repeat: no-repeat; background-position: left center;}

img[src*="syndicated.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/feed-5.png);
background-repeat: no-repeat; background-position: left center; padding: 16px 0 0 16px; width: 0; height: 0;}

img[src*="newsinfo.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/newspaper-2.png);
background-repeat: no-repeat; background-position: left center; padding: 16px 0 0 16px; width: 0; height: 0;}

img[src*="community.gif"]
{width: 0; height: 0; padding: 16px 0 0 16px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/leaf-wormhole.png); background-repeat: no-repeat; background-position: left center;}

img[src*="btn_del.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-repeat:no-repeat !important;
height: 0; padding: 12px 12px 0 0!important; width:0; background-position: left center;}

img[src*="facebook-profile.gif"], img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="twitter-profile.gif"] {background-repeat:no-repeat !important;
height: 0; padding: 16px 16px 0 0!important; width:0; background-position: left center;}

img[src*="btn_del.gif"]{background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/035.png);}
img[src*="btn_scr.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/032.png);}
img[src*="btn_unscr.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/100-1.png);}
img[src*="btn_freeze.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/050.png);}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/globe-small-green.png);}
img[src*="btn_track.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/147.png);}
img[src*="btn_tracking.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/030-1.png);}
img[src*="btn_tracking_thread.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/lightning_add.png);}
img[src*="openid-profile.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/openid-1.png);}
img[src*="talk/none.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/093-1.png);}
img[src*="help.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/053.png);}
img[src*="pencil.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/060-1.png);}
img[src*="btn_edit.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/092-1.png);}
img[src*="upgrade-paid-icon.gif"] {display: none;}
img[src*="facebook-profile.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/book-bookmark.png);}
img[src*="anonymous.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/user--exclamation.png);}
img[src*="twitter-profile.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/weather-moon.png);}

.ljuser a b {font-family: "Georgia", serif; font-variant: small-caps;}

h2 {font-weight: normal; font-family: "Georgia", serif; font-variant: small-caps;}

.ljtaglist li {padding: 5px 5px 5px 15px; list-style-type: none; border-bottom: 1px solid #f1f1f1; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/clock-small.png); background-repeat: no-repeat; background-position: left center; font-variant: small-caps; font-family: "Georgia", serif;}

/* -------------------------------------------- NAVSTRIP --------------------------------------
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

#lj_controlstrip {background: #fff; color: #777; font-weight: normal; border-bottom: 1px solid #f2f2f2; padding: 5px 0px; font-family: Times New Roman, serif!important; color: #777!important;}

#lj_controlstrip_statustext {color: #777; font-family: Geneva, sans-serif!important; font-weight: normal!important;}

#lj_controlstrip a {color: #197CBA!important; font-variant: small-caps; font-family: Georgia, serif!important;}

#lj_controlstrip a:hover {text-decoration: none !important; color: #197CBA;}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login {
border-right: 0 none;}

#lj_controlstrip_userpic, #lj_controlstrip_loggedout_userpic {display: none;}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
background: #fafafa; color: #777; border: 0;}

#lj_controlstrip .ljuser a b {font-variant: small-caps; font-weight: normal; margin-left: 2px; text-transform: capitalize; font-family: Geneva, sans-serif!important;}

#lj_controlstrip input {background: #f5f5f5; border: 1px solid #ebebeb; padding: 2px; color: #777!important; font-size: 11px; font-family: Geneva, sans-serif!important;}

#lj_controlstrip_search {max-width: 400px;}

#lj_controlstrip_search_input_text {border: 1px solid #ebebeb; font-family: Georgia, serif!important; color: #777!important; font-size: 11px;}

#lj_controlstrip_actionlinks:hover {text-decoration: none !important;}

.ljcut-link {color: #fff; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/point-small.png); background-repeat: no-repeat; background-position: left center; padding-left: 12px;}

Like what you see? Watch trodain! Also, trodain has a new layout and please welcome crashingly too! She will be providing codes while I do layouts and icons. :3

maker: arisato, layout: flexible squares, layouts

Previous post Next post
Up