I'm medicated - Post a comment

Previous | Memories | Tell Someone | Next

heylove (

heylove) wrote on June 13th, 2010 at 07:21 pm

Aery - Flexible Squares

I made an LJ "version" of this layout for anyone interested. It's not an exact copy, because I haven't found a layout compatible to blanket over at LJ, but I've put much work in it nonetheless. I also decided to not put a header on, because in my opinion it didn't fit with the rest of the layout. If you want one nonetheless, I left the header properties in the code. If you have any questions, need help or want to tell me you like it, feel free to leave a comment. :)

One thing beforehand, though. I usually code exclusively for firefox because honestly, IE is hell for anyone doing web design and I usually try to not care for IE users. Yet, I always try to make it look at least acceptable in IE. Since IE is very buggy, there's always minor differences, especially in means of margins and paddings. Feel free to download Firefox to enjoy layouts the way they're supposed to be. ^^

Layout: Flexible Squares
Browsers: Firefox 3.6, IE 8
Navbar: Yes
Customized Comments/Tags/Archive Pages: Yes
Resolutions: 1024x768, 1280x800, 1440x900
Credit:

heylove

You can see a live preview with customized calendar, comment pages and everything here or if you prefer an image preview simply click on the pic.

>> Please upload the images to your on server/imagehost: Image1 | Image2

/*------AERY by-----------------------------------
--------heylove.dreamwidth.org----------------------------FLEXIBLE SQUARES------------------------*/

body { 
background: #191919 url(URL to Image1) fixed; 
color: #aaaaaa;
font-family: verdana;
font-size: 10px;
line-height: 150%;
text-align: justify;
margin: 40px;}

a, a:link, a:visited {
color: #4DC5CF;
text-decoration: none;}

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

a {outline:0;}

.ljuser a {color: #888888!important;}

.ljuser a:hover {color: #191919!important;}

blockquote {
padding: 10px; 
color: #aaaaaa;
border: 1px solid #dedede;
background: #eeeeee;
text-align: justify;}

::-moz-selection { 
background: #191919; 
color: #aaaaaa;}

p, td {border: 0px !important;}

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

#content { 
width: 870px; 
margin:50px auto 25px auto;}

#maincontent {
margin: 0px 250px -20px 90px;
padding: 0;}

/*------ SIDEBAR ------*/

#sidebar { 
float: right; 
width: 250px; 
padding: 20px; 
color: #444444;
background: transparent;
margin-right: -50px;}

div#sidebar a:link, div#sidebar a:visited { 
color: #000000;
font-size: 10px;}

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

li.sbartitle {
padding-right: 15px;
list-style: none;
border-bottom: 1px solid #21211F;
margin-bottom: 10px;
margin-top: 10px;
font-family: georgia;
color: #21211F;
font-size: 24px;
line-height: 80%;
text-transform: lowercase;}

li.sbaritem {
font-size: 10px;
padding: 2px 3px 2px 13px; 
margin-bottom: 5px;
list-style: none;}

li.sbaritem a {
font-size: 10px;
font-weight: bold;}

.sbarheader {padding: 0px 5px 0px 5px;}

.sbarbody {padding: 0px 3px 15px 3px;}

.sbarbody2 {padding: 0 3px 0 3px;}

table.calendar {
margin-right : auto;
margin-left : auto;}

.sbarcalendar {
margin: 2px;
padding: 7px;
text-align: center;}

.sbarcalendarposts {
margin: 2px;
padding: 7px;
text-align: center;
background: transparent url(URL to Image2)!important;}

.sbarcalendarposts a {
font-size: 10px!important;
color: #f7f7f7!important;}

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

/*------ ENTRIES ------*/

.subcontent { 
background: #F7F7F7;
margin-bottom: 15px;
border-bottom: 5px solid #191919;}

.entry {text-align: justify;}

.entry dl {padding: 45px;}

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

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

.skiplinks {
color: #191919;
background: #191919;
padding: 10px;
text-align: center; 
text-transform: lowercase;}

.skiplinks a, .skiplinks a:link, .skiplinks a:visited { 
color: #808080; 
text-transform: lowercase;
font-size: 10px;}

.skiplinks a:hover {color: #D1D1D1;}

.entry_text {padding:0 45px 30px 45px;}
.entry_text img {max-width: 440px!important;}

.date {
color: #dddddd;
font-family: georgia;
font-size: 12px;
text-transform: lowercase;}

.subject {
color: #000000;
font-family: georgia;
font-size: 26px;
font-style: italic;
text-transform: lowercase;
text-decoration: none;}

.subject a, .subject a:link, .subject a:visited {
color: #000000;
font-family: georgia;
font-size: 26px;
font-style: italic;
text-transform: lowercase;
text-decoration: none;}

.subject img {
position: relative;
top: 2px; 
right: 2px;}

.datesubject {
text-align: right;
padding:25px;}

.entry_text img {max-width: 440px!important;}

.LJ_Placeholder_Container {max-width: 440px!important;}

object > embed {max-width: 440px!important;}

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

.currents {
color: #dddddd;
padding-left: 45px;
font-size: 10px;
text-transform: lowercase;}

.currents, .currentmood, .currentmusic {
font-size: 10px;}

.currentlocation {display: none;}

.currentmood strong, .currentmusic strong, .currentgroups { 
font-size: 10px;
text-transform: lowercase;}

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

.ljtags { 
font-size: 10px;
font-weight: bold!important;
margin-top: 25px;
margin-bottom: -30px; 
color:#dddddd;
text-transform: lowercase;}

.ljtags a {
color: #aaaaaa!important;
font-size: 10px;
font-weight: normal!important;
text-transform: lowercase;}

/*------ ENTRY COMMENTS ------*/

.comments { 
text-align: right; 
color: #F7F7F7;
font-size: 10px;
text-transform: lowercase;
background: #F7F7F7; 
padding: 20px 15px 25px 5px; 
position: relative;}

div.comments a { 
text-align:center;
font-size: 10px;
color: #21211F;
padding: 5px 10px 5px 10px;
margin:5px;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;}

/*------ HEADER ------*/

#header {display: none;}

.headerimage {}

ul.navheader {}

ul.navheader li {}

.title, .subtitle {display: none;}

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

#footer { 
width: 529px; 
text-align: center; 
text-transform: lowercase; 
letter-spacing: 1px; 
clear: both;
margin-left: 91px;}

div#footer a, div#footer a:link, div#footer a:visited { 
color: #f7f7f7; 
text-transform: lowercase;}

div#footer li.viewing {
color: #f7f7f7;
margin: 0 10px 0 10px;}

ul.navfooter {
color: #f7f7f7;
margin: 0;
padding: 0;
width: 520px;}

ul.navfooter li {
padding: 15px;
background-color: #000000;
color: #f7f7f7;
margin: 0;
list-style: none; 
display: inline; 
background:transparent;}

ul.navfooter li.viewing {
padding: 15px;
background-color: #000000;
color: #f7f7f7;}

*ul.navfooter li {
line-height: 600%;}

ul.navfooter li a {padding: 15px;background-color: #000000; color: #f7f7f7;}

ul.navfooter li a:hover {padding: 15px;background-color: #f7f7f7; color: #000000!important;}
 /* IE FIX */

h2 {
color: #f7f7f7;
font-weight: bold;
font-size: 16px;
font-family: arial;
text-align: center;
line-height: 200%;
background: transparent url(URL to Image2)!important;}

/*------ USERPICS ------*/

.defaultuserpic {
text-align: center;
padding-bottom: 25px;}

.defaultuserpic img {
background: #f7f7f7;
padding: 20px;}

.userpic {
position: relative;
float: left;
margin: 0px 30px 30px -135px;}

.userpicfriends {
position: relative;
float: left;
margin: 0px 30px 30px -135px;
text-align:center;
background: transparent url(URL to Image2)!important; 
font-size: 0px;}

.userpic img, .userpicfriends img {
padding: 10px; 
width: 80px; 
height: 80px;
background: transparent url(URL to Image2)!important;}

.userpicfriends a font {
font-size: 10px;
color: #4DC5CF;
font-weight: normal;
padding: 5px;
background: transparent!important;}

/*------ TAGLIST ------*/

ul.ljtaglist li {
list-style-type: none;
padding-left: 5px;
margin-left: 10px;}

ul.ljtaglist {
text-align: left;
margin-right: auto;
margin-left: auto;
padding: 30px;
background: #191919;}

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

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

ul.year li { 
margin: 5px;
padding: 10px;
color: #f7f7f7;
font-weight: bold;
font-size: 16px;
font-family: arial;
background: #000000;
display: inline;}

ul.year li a {
color: #f7f7f7;
font-weight: bold;
font-size: 16px;
font-family: arial;
background: #000000;}

table.yeartable { 
margin: auto; 
padding: 15px;
background: transparent url(URL to Image2)!important;}

table.yeartable td.yeardate, table.yeartable td.yearday { 
color: #D1D1D1; 
background: #F7F7F7;
padding: 5px; 
border: 1px solid #9C8664; 
text-align: center;}

td.yeardate a {
font-size: 16px;
font-weight: bold;
font-family: arial;}

table.yeartable td.yearday { 
background: #333333; 
padding: 5px; 
text-align: center;}

td.yearmonth { 
color: #f7f7f7; 
font-family: georgia;
font-style: italic;
font-size: 24px;
padding-bottom: 15px;}

td.yearmonth a {color: #f7f7f7;}

*td.yearmonth a {padding: 10px;} /* IE FIX */

*td.yearmonth {padding-top: 15px; padding-left: 15px;} /* IE FIX */

/*------ COMMENTS PAGE ------*/

.box {color: #c0c0c0;
background: transparent url(URL to Image2)!important;
padding:20px;}

.box a {
color: #4DC5CF;
text-decoration: none;
font-size: 10px;}

.box center {
padding: 10px;
width:460px;}

.box input {margin-bottom: 15px;}

.datesubjectcomment {
color: #444;
padding: 5px;}

.datesubjectcomment b {
color: #444;}

.quickreply {
margin-top: 20px;
padding:10px;
background:#000000;}

.userpiccomment {
position: relative;
padding: 10px; 
width: 80px; 
height: 80px;
background: #282828;
margin: 0px 10px -20px 0px;
z-index: 15;
float: left;}

input, textarea {
border: 1px solid #191919;
background: #191919;
color: #444444;
padding: 3px;
font-family: trebuchet ms;
font-size: 10px;}

textarea.textbox {
width: 95% !important;
font-family: trebuchet ms;
color: #444444;}

.reply {
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: left;
background: #191919;
color: #444444;}

.replytosubject {font-weight: bold;}

.commentreply {
position: relative;
margin: 10px;
color: #aaaaaa;
min-height: 30px;}

.commentbox {
color: #444;
padding: 10px;
margin: 10px;
background: #191919;}

*.commentbox {height:auto !important;} /* IE FIX */

.commentbox a {color: #444;}

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

.datesubjectcomment a:hover {color: #444;}

.commentboxpartial {
padding: 10px;
margin: 10px;
color: #F8F8EB;
background: #191919;}

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

tr#lj_more, #userpics {padding: 0;}
#userpics select {border:1px solid #191919;}

/*------ CONTEXTUAL POPUP ------*/

div.ContextualPopup div.Inner {
background:transparent!important;
color: #333029 !important;
border:none;
padding:10px;
width: 245px;}

div.ContextualPopup .Content {
padding:12px 15px;
margin-right:80px;
background-color: #fff;}

div.ContextualPopup div.Inner .Userpic {
max-width: 50px;
max-height: 50px;
padding:10px;
margin:0px;
background-color: #fff;}

div.ContextualPopup img {max-width: 50px!important;max-height: 50px!important;}

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

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

div.ContextualPopup .Relation {
letter-spacing:0px;
border-bottom: 3px solid #000;
margin-bottom:4px;
padding-bottom:4px;}

/*------ LJ CONTROLSTRIP (NAVBAR) ------*/

#lj_controlstrip {background:#000;}

#lj_controlstrip_statustext, #lj_controlstrip a {color:#777;}

#lj_controlstrip_user,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search, 
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic,
#lj_controlstrip_login td,
#lj_controlstrip td td {
border:none !important;}

#lj_controlstrip input {
background:#181818 !important;
color:#777 !important;}

#lj_controlstrip_search_input_text,
#lj_controlstrip select, 
#lj_controlstrip_search_submit,
input#Logout, 
#lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password,
#lj_controlstrip input#xc_remember {
background:#131313 !important;
color:#777 !important;
border: 1px solid #444!important;}

#lj_controlstrip .ljuser a b {
color:#666;
padding-right: 15px;
text-decoration:none !important;}

/*------ ETC ------*/

.clear {height:0px!important;}

.clearfoot {}

.separator {height: 25px;}

input {
border: 1px solid #191919!important;
background: #191919;
font-size: 10px;
color: #444444;
text-transform: lowercase;}

select {
border: 1px solid #191919!important;
background: #191919;
font-size: 10px;
color: #444444;
text-transform: lowercase;}

PLEASE NOTE: Since there is no header, you'll have to put the navgation links into the "linklist" which can be found in the customization area. Again, if there are any questions, feel free to ask. :)