Flexible Squares: Keep It Simple
No, I'm not kidding, I still have more. Like, at least two close to finish.
Preview Image.
featuring: custom icons, sidebar, comment page, calendar
layout by sulfuricfusion @ yearzeta
Keep It Simple
(Flexible Squares lyt for Blue Gray)Browser:
Firefox, Opera, Safari, Chrome, IE. There's this thing in IE though, where there's a massive gap between the entries? Yeah, that's it. No one uses IE anyway... right? If you have any clues as to how to fix this, please let me know.
Screen:
Percent-based. 800x600+.
Credits:
Icons from Some Random Dude.
Notes:
This was the culmination of another month-long layout block. I'm still on a roll.
To Use:
1. Go to the customize page and type "Flexible Squares" into the search box.
2. Select the theme "Blue Gray." (This is important.)
3. Click customize your theme, then the custom CSS link.
4. Set both dropdown menus to NO, and leave the external stylesheet option empty.
5. Paste the code in the Custom Stylesheet space.
Code:
Preview Image.
/* KEEP IT SIMPLE
intended for Flexible Squares Blue Gray
by sulfuricfusion@yearzeta
icons from http://somerandomdude.com/projects/iconic/ */
body{
background:#fafafa;
padding:0px;
margin:0px;
font-family:tahoma, arial, helvetica, "sans serif";
font-size:11px;
line-height:17px;
}
div{
background:transparent !important;
border:none !Important;
}
#sidebar{
width:20%;
margin:100px auto auto 7%;
float:left;
background:transparent;
}
#maincontent{
width:50%;;
margin:50px 7% auto auto;
padding-right:110px;
float:right;
background:transparent !important;
}
.navfooter{
clear:both;
display:block;
width:90%;
margin:auto;
color:#333;
list-style:none;
padding:0px;
}
/* HEADER */
#header{
display:block;
width:100%;
position:fixed;
top:0px;
left:0px;
z-index:7;
}
#header .title, #header .subtitle{
font-family:"arial";
line-height:25px;
text-align:left;
display:inline;
}
#header .title{
font-weight:bold;
font-size:20px;
letter-spacing:0px;
color:#00c8d4;
}
#header .subtitle{
font-size: 18px;
letter-spacing:3px;
line-height:15px;
color:#fff;
}
.navheader{
text-align:left;
margin:0px 30px 0px 0px;
padding:0px;
display:inline;
float:right;
}
.navheader li{
list-style:none;
display:inline;
}
.navheader li a, .navheader li.view{
color:#fff;
background:#333;
padding:6px;
text-transform:lowercase;
border-bottom:solid 3px #ccc;
font-size:14px;
line-height:23px;
}
.navheader li a:hover, .navheader li a:active{
color:#00b1bc;
border-bottom:solid 3px #00b1bc;
}
/* SIDEBAR */
#sidebar{
color:#999;
font-size:12px;
}
.sbarbody, .sbarbody2{
margin:30px 0px;
}
.sbarcalendar{
padding:3px;
border-bottom:solid 2px #000;
text-align:center;
}
.sbarcalendarposts{
padding:3px;
border-bottom:solid 2px #000;
background:#eee;
text-align:center;
}
.sbarbody2{
margin-top:-20px;
}
.sbartitle{
font-size:16px;
text-transform:uppercase;
color:#000;
border-bottom:solid 2px #000;
background:#;
padding:3px;
text-align:center;
font-weight:bold;
}
.sbarbody, .sbartitle, .sbarcontent{
width:100%;
padding:0px;
}
#sidebar a{
color:#333;
font-weight:normal;
}
#sidebar_summary .sbaritem{
padding:3px;
border-bottom:solid 1px #999;
}
ul.sbarlist{
list-style:none;
display:block;
margin:0px;
width:100%;
padding:0px;
}
.defaultuserpic{
text-align:center;
margin-bottom:5px;
}
.defaultuserpic img{
border:solid 6px #000;
}
/* ENTRIES */
.subcontent{
margin:20px auto;
}
.entry{
background:transparent;
padding:0px 10px;
font-size:13px;
color:#444;
letter-spacing:0.02em;
line-height:18px;
}
.subcontent .userpic, .subcontent .userpicfriends{
padding:10px;
float:right;
margin-right:-125px;
z-index:1;
}
.userpicfriends{
text-align:center;
}
.subcontent .userpic img, .subcontent .userpicfriends img{
width:100px;
height:100px;
border:solid 5px #000;
-moz-border-radius:0px 0px 5px 5px;
border-radius:0px 0px 5px 5px;
}
.subject img{
float:left;
margin-top:10px;
}
.subject, .datesubject{
line-height:80%;
}
.subject, .subject a.subj-link{
width:100%;
display:block;
text-decoration:none;
font-size:25px;
letter-spacing:-1px;
font-weight:bold;
padding:5px;
text-transform:uppercase;
color:#000;
border-bottom:solid 3px #000;
}
.subject a.subj-link:hover, .subject a.subj-link:active{
color:#444;
}
.datesubject .date{
font-size:11px;
float:right;
color:#fff;
text-transform:uppercase;
width:96px;
padding:2px;
line-height:15px;
text-align:center;
height:15px;
overflow:hidden;
position:relative;
top:80px;
left:115px;
z-index:5;
}
.datesubject .date:hover{
overflow:visible;
}
/* FONTS AND SUCH */
a:link, a:visited{
text-decoration:none;
color:#00c8d4;
font-weight:bold;
letter-spacing:0.01em;
}
a:hover, a:active{
color:#bbb;
font-style:italic;
}
.ljuser a:link b, .ljuser a:visited b{
color:#aaa;
margin-left:2px;
font-weight:normal;
}
.ljuser a:hover b, .ljuser a:active b{
color:#bbb;
}
pre, code{
margin:0px;
color:#333;
}
blockquote{
color:#111;
margin:0px 20px;
padding:10px;
border-left:solid 7px #00c8d4;
background:#f3f3f3;
}
textarea{
color:#aaa;
font-size:12px;
letter-spacing:1px;
border:1px;
}
/* METADATA */
div.entry .clear{
display:none;
}
.currents{
margin-bottom:15px;
font-size:11px;
color:#888;
text-align:left;
}
.currents a{
font-size:11px;
font-weight:normal;
}
.ljtags a{
font-size:11px;
font-weight:normal;
margin:0px 3px;
background:#f3f3f3;
padding:4px;
-moz-border-radius:3px;
border-radius:3px;
}
.currentlocation strong, .currentmood strong, .currentmusic strong, .currentgroups strong{
font-size:12px;
color:#000;
display:block;
float:left;
margin-right:8px;
text-transform:lowercase;
margin-left:30px;
}
.ljtags{
font-size:0.01%;
margin-top:15px;
margin-bottom:5px;
margin-left:30px;
margin-right:30px;
}
/* ADD COMMENT NUMBER OF COMMENTS */
.comments{
text-align:right;
font-size:0.01%;
color:#fff;
float:right;
}
.comments a:link, .comments a:visited{
font-size:11px;
color:#fff;
background:#000;
padding:3px;
margin:0px 5px;
text-transform:uppercase;
font-weight:normal;
display:block;
width:104px;
position:relative;
left:130px;
top:-60px;
text-align:center;
margin-bottom:-15px;
}
.comments a:hover, .comments a:active{
color:#00c8d4;
letter-spacing:0.03em;
}
/* CALENDAR */
ul.year{
list-style:none;
width:100%;
display:block;
text-align:right;
padding:10px 0px;
margin:0px;
}
li.active{
color:#fff;
}
ul.year li{
padding:5px;
background:#000;
margin:5px;
display:inline;
font-size:14px;
}
.yeartable{
width:90%;
margin:auto;
border-spacing:8px;
}
.yearmonth{
font-weight:normal;
text-transform:uppercase;
letter-spacing:2px;
font-size:18px;
color:#000;
}
.yearday{
text-align:right;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
color:#ccc;
}
.yeardate{
padding:3px;
font-size:16px;
font-weight:bold;
color:#666;
font-weight:normal;
background:#000;
}
.yeardate a{
font-size:12px;
}
/* COMMENT PAGE */
div.skiplinks{
width:100%;
font-size:0.01%;
text-align:right;
}
.skiplinks a{
display:inline-block;
background:#000;
padding:5px;
margin:5px;
text-transform:uppercase;
font-size:13px;
}
.box{
text-transform:uppercase;
color:#ccc;
}
.box center{
width:100%;
padding:5px;
background:#f3f3f3;
font-size:16px;
color:#000;
-moz-border-radius:3px;
border-radius:3px;
margin:10px 0px;
}
.box center b{
font-weight:normal;
}
.box select{
letter-spacing:0px;
text-transform:lowercase;
}
.box table, .box input{
border:none !Important;
}
.commentbox{
padding:15px;
min-height:60px;
border-bottom:solid 2px #c42210;
margin-bottom:0px;
text-transform:none;
letter-spacing:0px;
}
.datesubjectcomment{
color:#999;
text-transform:lowercase;
padding:2px 0px;
}
.datesubjectcomment strong{
letter-spacing:2px;
margin-bottom:-2px !Important;
margin-right:20px;
float:right;
background:#fafafa;
-moz-border-radius:5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;
padding:3px;
}
.commentreply{
margin:10px 0px;
color:#666;
font-size:11px;
}
.datesubjectcomment img.userpiccomment{
float:left;
padding:5px;
margin:0px 10px 10px 0px;
width:70px;
height:70px;
background:#000;
-moz-border-radius:5px;
border-radius:5px;
}
/* IMGS */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="community.gif"],img[src*="icon_protected.gif"], img[src*="icon_groups.gif"], img[src*="icon_private.gif"]{
background-image:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/0baf9531.png") !important;
background:transparent no-repeat;
width:0px;
height:0px;
padding:8px;
}
.ljuser img[src*="userinfo.gif"]{
background-position:0px 0px !important;
padding:8px 6px !important;
}
.datesubjectcomment .ljuser img[src*="userinfo.gif"]{
background-position:-24px 0px !Important;
padding:8px 6px !important;
}
.ljuser img[src*="community.gif"]{
background-position:-12px 0px;
padding:7px 6px !important;
}
img[src*="icon_protected.gif"] {
background-position:-32px -32px;
padding:8px;
}
img[src*="icon_groups.gif"] {
background-position:-16px -32px;
padding:8px;
}
img[src*="icon_private.gif"] {
background-position:0px -32px;
padding:8px;
}
/* LJBAR */
#lj_controlstrip{
background: #fff !important;
height:43px;
z-index:5;
position:absolute;
top:25px;
}
#lj_controlstrip td{
border:none !important;
}
#lj_controlstrip span{
color:#777;
}
#lj_controlstrip .ljuser a:link b, #lj_controlstrip .ljuser a:visited b{
color:#;
}
#lj_controlstrip a:link, #lj_controlstrip a:visited{
text-transform:lowercase;
color:#aaa;
}
#lj_controlstrip input{
background:transparent;
color:#555;
font-weight:bold;
border:none;
text-transform:lowercase;
}
input#lj_controlstrip_search_submit{
text-transform:uppercase;
font-weight:bold;
font-size:115%;
background:#000;
border:none;
color:#fff;
}
#lj_controlstrip input:hover{
color:#00c8d4;
}
input#lj_controlstrip_search_input_text{
color:#999;
padding:2px;
letter-spacing:0.15em;
text-transform:none;
font-weight:normal;
background:#f3f3f3 !important;
}
input#lj_controlstrip_search_input_text:hover{
color:#00c8d4;
}
input#lj_controlstrip_search_submit{
padding:0px;
margin-left:5px;
}
/* REDUNDANCY */
#header, .datesubject .date, .datesubjectcomment{
background:#000 url("http://i955.photobucket.com/albums/ae39/zheeer/lj/4f9de1f0.gif") repeat !important;
}
In the completely plausible case that you find a bug or glitch in this, please let me know so I can fix it asap!
Also, if you liked this or used this, I'd love to hear from you!
(obligatory: if you use, please link to yearzeta in your profile or sidebar)
Preview Image.
featuring: custom icons, sidebar, comment page, calendar
layout by sulfuricfusion @ yearzeta
Keep It Simple
(Flexible Squares lyt for Blue Gray)Browser:
Firefox, Opera, Safari, Chrome, IE. There's this thing in IE though, where there's a massive gap between the entries? Yeah, that's it. No one uses IE anyway... right? If you have any clues as to how to fix this, please let me know.
Screen:
Percent-based. 800x600+.
Credits:
Icons from Some Random Dude.
Notes:
This was the culmination of another month-long layout block. I'm still on a roll.
To Use:
1. Go to the customize page and type "Flexible Squares" into the search box.
2. Select the theme "Blue Gray." (This is important.)
3. Click customize your theme, then the custom CSS link.
4. Set both dropdown menus to NO, and leave the external stylesheet option empty.
5. Paste the code in the Custom Stylesheet space.
Code:
Preview Image.
/* KEEP IT SIMPLE
intended for Flexible Squares Blue Gray
by sulfuricfusion@yearzeta
icons from http://somerandomdude.com/projects/iconic/ */
body{
background:#fafafa;
padding:0px;
margin:0px;
font-family:tahoma, arial, helvetica, "sans serif";
font-size:11px;
line-height:17px;
}
div{
background:transparent !important;
border:none !Important;
}
#sidebar{
width:20%;
margin:100px auto auto 7%;
float:left;
background:transparent;
}
#maincontent{
width:50%;;
margin:50px 7% auto auto;
padding-right:110px;
float:right;
background:transparent !important;
}
.navfooter{
clear:both;
display:block;
width:90%;
margin:auto;
color:#333;
list-style:none;
padding:0px;
}
/* HEADER */
#header{
display:block;
width:100%;
position:fixed;
top:0px;
left:0px;
z-index:7;
}
#header .title, #header .subtitle{
font-family:"arial";
line-height:25px;
text-align:left;
display:inline;
}
#header .title{
font-weight:bold;
font-size:20px;
letter-spacing:0px;
color:#00c8d4;
}
#header .subtitle{
font-size: 18px;
letter-spacing:3px;
line-height:15px;
color:#fff;
}
.navheader{
text-align:left;
margin:0px 30px 0px 0px;
padding:0px;
display:inline;
float:right;
}
.navheader li{
list-style:none;
display:inline;
}
.navheader li a, .navheader li.view{
color:#fff;
background:#333;
padding:6px;
text-transform:lowercase;
border-bottom:solid 3px #ccc;
font-size:14px;
line-height:23px;
}
.navheader li a:hover, .navheader li a:active{
color:#00b1bc;
border-bottom:solid 3px #00b1bc;
}
/* SIDEBAR */
#sidebar{
color:#999;
font-size:12px;
}
.sbarbody, .sbarbody2{
margin:30px 0px;
}
.sbarcalendar{
padding:3px;
border-bottom:solid 2px #000;
text-align:center;
}
.sbarcalendarposts{
padding:3px;
border-bottom:solid 2px #000;
background:#eee;
text-align:center;
}
.sbarbody2{
margin-top:-20px;
}
.sbartitle{
font-size:16px;
text-transform:uppercase;
color:#000;
border-bottom:solid 2px #000;
background:#;
padding:3px;
text-align:center;
font-weight:bold;
}
.sbarbody, .sbartitle, .sbarcontent{
width:100%;
padding:0px;
}
#sidebar a{
color:#333;
font-weight:normal;
}
#sidebar_summary .sbaritem{
padding:3px;
border-bottom:solid 1px #999;
}
ul.sbarlist{
list-style:none;
display:block;
margin:0px;
width:100%;
padding:0px;
}
.defaultuserpic{
text-align:center;
margin-bottom:5px;
}
.defaultuserpic img{
border:solid 6px #000;
}
/* ENTRIES */
.subcontent{
margin:20px auto;
}
.entry{
background:transparent;
padding:0px 10px;
font-size:13px;
color:#444;
letter-spacing:0.02em;
line-height:18px;
}
.subcontent .userpic, .subcontent .userpicfriends{
padding:10px;
float:right;
margin-right:-125px;
z-index:1;
}
.userpicfriends{
text-align:center;
}
.subcontent .userpic img, .subcontent .userpicfriends img{
width:100px;
height:100px;
border:solid 5px #000;
-moz-border-radius:0px 0px 5px 5px;
border-radius:0px 0px 5px 5px;
}
.subject img{
float:left;
margin-top:10px;
}
.subject, .datesubject{
line-height:80%;
}
.subject, .subject a.subj-link{
width:100%;
display:block;
text-decoration:none;
font-size:25px;
letter-spacing:-1px;
font-weight:bold;
padding:5px;
text-transform:uppercase;
color:#000;
border-bottom:solid 3px #000;
}
.subject a.subj-link:hover, .subject a.subj-link:active{
color:#444;
}
.datesubject .date{
font-size:11px;
float:right;
color:#fff;
text-transform:uppercase;
width:96px;
padding:2px;
line-height:15px;
text-align:center;
height:15px;
overflow:hidden;
position:relative;
top:80px;
left:115px;
z-index:5;
}
.datesubject .date:hover{
overflow:visible;
}
/* FONTS AND SUCH */
a:link, a:visited{
text-decoration:none;
color:#00c8d4;
font-weight:bold;
letter-spacing:0.01em;
}
a:hover, a:active{
color:#bbb;
font-style:italic;
}
.ljuser a:link b, .ljuser a:visited b{
color:#aaa;
margin-left:2px;
font-weight:normal;
}
.ljuser a:hover b, .ljuser a:active b{
color:#bbb;
}
pre, code{
margin:0px;
color:#333;
}
blockquote{
color:#111;
margin:0px 20px;
padding:10px;
border-left:solid 7px #00c8d4;
background:#f3f3f3;
}
textarea{
color:#aaa;
font-size:12px;
letter-spacing:1px;
border:1px;
}
/* METADATA */
div.entry .clear{
display:none;
}
.currents{
margin-bottom:15px;
font-size:11px;
color:#888;
text-align:left;
}
.currents a{
font-size:11px;
font-weight:normal;
}
.ljtags a{
font-size:11px;
font-weight:normal;
margin:0px 3px;
background:#f3f3f3;
padding:4px;
-moz-border-radius:3px;
border-radius:3px;
}
.currentlocation strong, .currentmood strong, .currentmusic strong, .currentgroups strong{
font-size:12px;
color:#000;
display:block;
float:left;
margin-right:8px;
text-transform:lowercase;
margin-left:30px;
}
.ljtags{
font-size:0.01%;
margin-top:15px;
margin-bottom:5px;
margin-left:30px;
margin-right:30px;
}
/* ADD COMMENT NUMBER OF COMMENTS */
.comments{
text-align:right;
font-size:0.01%;
color:#fff;
float:right;
}
.comments a:link, .comments a:visited{
font-size:11px;
color:#fff;
background:#000;
padding:3px;
margin:0px 5px;
text-transform:uppercase;
font-weight:normal;
display:block;
width:104px;
position:relative;
left:130px;
top:-60px;
text-align:center;
margin-bottom:-15px;
}
.comments a:hover, .comments a:active{
color:#00c8d4;
letter-spacing:0.03em;
}
/* CALENDAR */
ul.year{
list-style:none;
width:100%;
display:block;
text-align:right;
padding:10px 0px;
margin:0px;
}
li.active{
color:#fff;
}
ul.year li{
padding:5px;
background:#000;
margin:5px;
display:inline;
font-size:14px;
}
.yeartable{
width:90%;
margin:auto;
border-spacing:8px;
}
.yearmonth{
font-weight:normal;
text-transform:uppercase;
letter-spacing:2px;
font-size:18px;
color:#000;
}
.yearday{
text-align:right;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
color:#ccc;
}
.yeardate{
padding:3px;
font-size:16px;
font-weight:bold;
color:#666;
font-weight:normal;
background:#000;
}
.yeardate a{
font-size:12px;
}
/* COMMENT PAGE */
div.skiplinks{
width:100%;
font-size:0.01%;
text-align:right;
}
.skiplinks a{
display:inline-block;
background:#000;
padding:5px;
margin:5px;
text-transform:uppercase;
font-size:13px;
}
.box{
text-transform:uppercase;
color:#ccc;
}
.box center{
width:100%;
padding:5px;
background:#f3f3f3;
font-size:16px;
color:#000;
-moz-border-radius:3px;
border-radius:3px;
margin:10px 0px;
}
.box center b{
font-weight:normal;
}
.box select{
letter-spacing:0px;
text-transform:lowercase;
}
.box table, .box input{
border:none !Important;
}
.commentbox{
padding:15px;
min-height:60px;
border-bottom:solid 2px #c42210;
margin-bottom:0px;
text-transform:none;
letter-spacing:0px;
}
.datesubjectcomment{
color:#999;
text-transform:lowercase;
padding:2px 0px;
}
.datesubjectcomment strong{
letter-spacing:2px;
margin-bottom:-2px !Important;
margin-right:20px;
float:right;
background:#fafafa;
-moz-border-radius:5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;
padding:3px;
}
.commentreply{
margin:10px 0px;
color:#666;
font-size:11px;
}
.datesubjectcomment img.userpiccomment{
float:left;
padding:5px;
margin:0px 10px 10px 0px;
width:70px;
height:70px;
background:#000;
-moz-border-radius:5px;
border-radius:5px;
}
/* IMGS */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="community.gif"],img[src*="icon_protected.gif"], img[src*="icon_groups.gif"], img[src*="icon_private.gif"]{
background-image:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/0baf9531.png") !important;
background:transparent no-repeat;
width:0px;
height:0px;
padding:8px;
}
.ljuser img[src*="userinfo.gif"]{
background-position:0px 0px !important;
padding:8px 6px !important;
}
.datesubjectcomment .ljuser img[src*="userinfo.gif"]{
background-position:-24px 0px !Important;
padding:8px 6px !important;
}
.ljuser img[src*="community.gif"]{
background-position:-12px 0px;
padding:7px 6px !important;
}
img[src*="icon_protected.gif"] {
background-position:-32px -32px;
padding:8px;
}
img[src*="icon_groups.gif"] {
background-position:-16px -32px;
padding:8px;
}
img[src*="icon_private.gif"] {
background-position:0px -32px;
padding:8px;
}
/* LJBAR */
#lj_controlstrip{
background: #fff !important;
height:43px;
z-index:5;
position:absolute;
top:25px;
}
#lj_controlstrip td{
border:none !important;
}
#lj_controlstrip span{
color:#777;
}
#lj_controlstrip .ljuser a:link b, #lj_controlstrip .ljuser a:visited b{
color:#;
}
#lj_controlstrip a:link, #lj_controlstrip a:visited{
text-transform:lowercase;
color:#aaa;
}
#lj_controlstrip input{
background:transparent;
color:#555;
font-weight:bold;
border:none;
text-transform:lowercase;
}
input#lj_controlstrip_search_submit{
text-transform:uppercase;
font-weight:bold;
font-size:115%;
background:#000;
border:none;
color:#fff;
}
#lj_controlstrip input:hover{
color:#00c8d4;
}
input#lj_controlstrip_search_input_text{
color:#999;
padding:2px;
letter-spacing:0.15em;
text-transform:none;
font-weight:normal;
background:#f3f3f3 !important;
}
input#lj_controlstrip_search_input_text:hover{
color:#00c8d4;
}
input#lj_controlstrip_search_submit{
padding:0px;
margin-left:5px;
}
/* REDUNDANCY */
#header, .datesubject .date, .datesubjectcomment{
background:#000 url("http://i955.photobucket.com/albums/ae39/zheeer/lj/4f9de1f0.gif") repeat !important;
}
In the completely plausible case that you find a bug or glitch in this, please let me know so I can fix it asap!
Also, if you liked this or used this, I'd love to hear from you!
(obligatory: if you use, please link to yearzeta in your profile or sidebar)