ATOMIC #1 ( S2 FLEXISQUARES )
PREVIEWS: img | live (temp)
DOWNLOAD LINKS: css | icons
THEME:select any flexible squares layout.
make sure you haven't disabled the sidebar (doesn't matter if it's left or right).
DISPLAY:disable your navigation strip.
also disable customized comments for your journal.
TEXT:shorten all link titles to one or two words only.
this part is optional; you don't have to do it, but i think it looks better this way.
SIDEBAR:make sure you have only your icon, blurb and links enabled.
LINKS LIST:designate up to five custom links.
CUSTOM CSSmake sure all three dropdown boxes are set to 'no.'
finally, paste the layout codes in the box and hit 'save changes.'
FONTS & COLORS:the only font used in this layout is 'helvetica.'
the colors used in this layout are as follows:
#FEFEFE(topbar font color, entry bg color, some links)
#101010(entry font color, topbar bg color, entry icon border)
#AAAAAA (page bg color)
#888888(default icon border, entry links)
CSS:/* atomic #1 ( s2 flexisquares layout by atomic @ lj.com ) */
/* please do not remove credit or redistribute as your own */
body { background-color: #aaaaaa; background-repeat: repeat-x; color: #101010; font-family: Helvetica; font-size: 12px; }
a { color: #fefefe; text-decoration: none; font-weight: bold; text-transform: uppercase; }
blockquote { color: #fefefe; font-family: Helvetica; font-size: 12px; text-align: justify; background-color: #101010; padding: 5px; -moz-border-radius: 10px; border-radius: 10px; }
#content { width: 80%; margin: auto; }
#maincontent { width: 80%; margin-top: 325px; margin-left: -65px; font-family: Helvetica; font-size: 1px; color: #aaaaaa; }
#maincontent a { font-size: 12px; }
#sidebar { width: 100%; height: 200px; background-color: #101010; color: #fefefe; font-size: 12px; text-align: justify; position: absolute; top: 75px; left: 0px; }
#header { color: #101010; font-family: Helvetica; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-align: left; text-transform: uppercase; z-index:20; position: absolute; top: 75px; left: 925px; }
div#header a { color: #101010; font-size: 12px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; }
div#footer a { color: #101010; font-family: Helvetica; font-size: 40px; font-weight: bold; text-transform: uppercase; }
.title, .subtitle{ display: none; }
ul.navheader { padding-left: 0px; margin-left: 0px; list-style: none; display: block; }
ul.navheader li { width: 200px; padding: 5px; margin-bottom: 10px; background-color: #fefefe; border-bottom: 1px solid #aaaaaa; display: block; }
ul.navheader li a { color: #101010; font-size: 12px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; }
ul.navheader li a:hover { padding: 5px; }
.entry { color: #101010; font-family: Helvetica; font-size: 12px; line-height: 15px; text-align: justify; margin: auto; background-color: #fefefe; padding: 10px; -moz-border-radius: 10px; border-radius: 10px; text-transform: none; font-weight: normal; }
div.entry a { color: #888888; font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; }
.userpic { position: relative; float: left; margin: 10px; z-index: 15; background-color: #101010; padding: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.date { line-height: 27px; top: 5px; color: #101010; font-family: Helvetica; font-size: 25px; font-weight: bold; text-transform: uppercase; }
.subject, .subject a { line-height: 27px; top: 5px; color: #fefefe; font-family: Helvetica; font-size: 25px !important; font-weight: bold; text-transform: uppercase; }
.datesubject { padding: 2px; }
.entry ul li, .entry ol li { padding-left: 5px; margin-left: 15px; }
.currents, .currentmood, .currentmusic, .ljtags { display: none; }
.comments { font-size: 1px; color: #fefefe; text-align: right; position: relative; top: 0px; }
div.comments a { color: #888888 !important; font-family: Helvetica; font-size: 50px !important; font-weight: bold; text-transform: uppercase; padding: 0px 5px 0px 5px; }
.separator { height: 35px; }
.userpicfriends { color: #101010; font-size: 1px; position: relative; float: left; margin: 10px; z-index: 15; background-color: #101010 !important; padding: 5px; -moz-border-radius: 5px; border-radius: 5px; }
div.userpicfriends a font { color: #aaaaaa; font-size: 12px; }
#sidebar_summary, #sidebar_tags, #sidebar_calendar, li.sbartitle { display: none; }
div#sidebar a { font-family: Helvetica; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.defaultuserpic { color: #888888; font-family: Helvetica; font-size: 12px; font-weight: bold; text-transform: uppercase; text-align: center; letter-spacing: 1px; position: relative; float: left; margin-top: 10px; margin-left: 50px; z-index: 15; background-color: #888888; padding: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; }
.sbarbody { float: left; }
.sbarbody2 { width: 500px; margin-top: 10px; margin-left: 20px; float: left; }
#sidebar_linklist { position: absolute; top: 0px; margin-left: 700px; }
ul.sbarlist { padding-left: 0px; margin-left: 0px; list-style: none; display: block; }
li.sbaritem { width: 200px; padding: 5px; margin-bottom: 10px; background-color: #fefefe; border-bottom: 1px solid #aaaaaa; display: block; }
li.sbaritem a { color: #101010; font-size: 12px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; }
li.sbaritem a:hover { padding: 5px; }
li.sbartitle { display: none; }
#footer { width: 100%; text-align: left; font-size: 0px; clear: both; }
ul.navfooter { padding: 0px; margin: 0px; }
ul.navfooter li { display: inline; margin: 0 5px 0 5px; }
.clearfoot { clear: both; }
ul.year { font-size: 50px; text-align: center; }
ul.year li{ color: #101010; font-family: Helvetica; font-size: 50px; line-height: 53px; font-weight: bold; display: inline; padding: 20px; }
ul.year li a { color: #fefefe; font-size: 50px !important; }
table.yeartable { color: #101010; margin: auto; width: 720px; background-color: #fefefe; padding: 10px; -moz-border-radius: 10px; border-radius: 10px; }
table.yeartable a { color: #888888; }
table.yeartable td.yeardate a { font-size: 25px !important; font-weight: bold; text-transform: uppercase; padding: 5px; }
table.yeartable td.yeardate, table.yeartable td.yearday { color: #101010; font-family: Helvetica; font-size: 25px !important; font-weight: bold; text-transform: uppercase; padding: 5px; }
table.yeartable td.yearday { color: #888888; font-size: 30px !important; text-align: center; }
td.yearmonth { font-size: 12px; font-weight: bold; text-transform: uppercase; }
.skiplinks { color: #aaaaaa; font-size: 1px; text-align: center; }
.skiplinks a { font-size: 30px; padding: 15px; }
.clear { height: 15px; }
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"], img[src*="userhead"] {background-image:url("http://i.imgur.com/qzWb7.gif") !important; background-repeat:no-repeat !important; height:0; padding:14px 14px 0 0 !important; width:0; margin-right: -2px; margin-left: 2px; }
img[src*="community.gif"] {background-image:url("http://i.imgur.com/IZqIJ.gif") !important; background-repeat:no-repeat !important; height:0; padding:14px 14px 0 0 !important; width:0; margin-left: 2px; margin-right: 2px; }
img[src*="protected.gif"], img[src*="private.gif"] {background-image:url("http://i.imgur.com/0YtG0.gif") !important; background-repeat:no-repeat !important; height:0; padding:11px 9px 0 0 !important; width:0; }
div.ContextualPopup div.Inner { background: transparent!important; color: #fefefe!important; border: 0px; padding: 5px; width: 250px; font-family: Helvetica; font-size: 10px; line-height: 10px!important; }
div.ContextualPopup .Content { padding:7px 10px 7px 10px; text-transform: uppercase; margin-right:80px; background: #101010 !important; border: 0px; -moz-border-radius: 10px; border-radius: 10px; text-decoration: none!important; }
div.ContextualPopup .Userpic { display: none; }
div.ContextualPopup div.Inner div.Content a, div.ContextualPopup div.Inner a { text-decoration: none!important; font-weight: bold; color: #aaaaaa!important; }
NEED HELP?
in order to keep everything in one place, please leave all questions about this layout in this post. messages will only be redirected here.
if you need to edit the code, but do not have the time, patience, etc. to do so, let me know and i'll fix it for you when i can. thanks!