(no subject)

Jan 02, 2010 15:22

Layout: gin (flexible squares)
Tested: Safari & Firefox
Custom comment pages, sidebar, title



'gin' : 2 versions : Live Preview | Live Preview (wider)






Gin
live | static

/*-------------------------------------------------

Gin [02/01/10]
Flexible Squares
by darlingbones @ ohcodey.livejournal.com

----------------------------------------------------*/

body {
background-color: #ffffff;
text-align: center;
color: #aaa;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
margin: 0;
}

a, a:link, a:visited {
color: #777777;
text-decoration: none;
}
#qrformdiv table {
border-color: #f6f6f6!important;
}

a:hover {
color: #777777;
text-decoration: underline;
}

blockquote {
padding:10px;
background-color:#fff;
border-bottom:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
text-align:justify;}

p, td, {
font-size: 8pt;

}

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

#content
{ width: 500px;
background-color: #fff;
padding:0;
margin-left:150px;
}

#maincontent {
margin-top: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
background-color: #fff;
color: #000000;
text-align: left;
width: 500px;

}

.subcontent {
width: 500px;
border-bottom:1px #e6e6e6 solid;
border-right:1px #e6e6e6 solid;

}

#sidebar {
background-color: #f6f6f6;
font-size: 8pt;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #bbb;
width: 200px;
float: right;
margin-right:-230px;
margin-top:-20px;
border-bottom:1px #e6e6e6 solid;
border-right:1px #e6e6e6 solid;
}

#header {
width: 100%;
padding: 10px 0px 0px 0px;
margin: 50px 0 0 0;
text-align: right;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
background-color: #ffffff;
color: #e6e6e6;
text-transform:lowercase;
border-bottom:8px solid #e6e6e6;
}

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

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

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

.title {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20pt;
font-weight: normal;
color:#f5f5f5;
text-align:left;
letter-spacing:-2px;
text-transform:lowercase;
margin-bottom:-7px;
border-bottom:20px solid #f6f6f6;
display:block;
line-height:70%;
}

.subtitle{display:none;
}

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

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

.entry {
width: 500px;
background-color: #f6f6f6;
color: #aaa;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
text-align:justify;
line-height:170%;
}

.entry_text {
max-width:480px;
padding:10px 20px;
min-height:70px;
}
.entry_text img{
max-width:400px;
}

.userpic img, .userpicfriends img, .userpicfriends img a:hover, .userpicfriends a font, .userpicfriends a:hover font, .userpicfriends a, .userpicfriends a:hover {
max-width:70px;
height:70px;
color:#888;
text-align:center;
text-decoration:none!important;
}

.userpic, .userpicfriends {
position: relative;
float: left;
padding: 5px;
color:#f6f6f6;
background-color:#f6f6f6!important;
border-bottom:#E6E6E6 solid 1px;
border-right:#E6E6E6 solid 1px;
margin: 0 0 0 -100px;
text-align: center;
font-family:tahoma;
font-size: 6pt;
text-transform:uppercase;
z-index: 15;
max-width:70px;
text-decoration:none!important;
}

.date {
top: 5px;
margin-right:7px;
line-height:70%;
color: #ddd;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
text-align: right;
}

.subject {
font-weight: normal;
color: #d5d5d5;
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
text-align: right;
letter-spacing:-1px;
text-transform:uppercase;
}

.subject a, .subject a:link, .subject a:visited {
color: #d5d5d5;
font-weight:normal;
text-decoration:none;
}

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

.datesubject {
background-color: #f6f6f6;
padding: 5px;
}

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

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

.currents div {
display: block;
border-left:solid 2px #e6e6e6;
padding-left:5px;
}
.currents strong, .currentmood strong, .currentmusic .currentlocation
{
font-size:7pt;
color:#ccc;
text-transform:uppercase;
font-weight:normal!important;
}
.currentmusic {
}
.currentmood {
margin-left: 5px;
}
.currentlocation {
margin-left: 10px;
}

.ljtags {display:none; }

.currents, .currentmood, .currentmusic {
font-size: 10px;
margin-left: 10px;
font-weight: normal;
color: #ccc;
text-transform: uppercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #ccc;
font-weight: normal;
text-transform: uppercase;
}

.currentlocation a:hover {
color: #ccc;
font-weight: normal;
text-transform: uppercasee;
}

.comments {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
text-align: center;
background-color: #f6f6f6;
padding: 5px;
position: relative;
color:#f6f6f6;
text-transform:uppercase;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #d5d5d5;
}

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

.defaultuserpic {
display:none;
}

.sbarheader {
display:none;
}

.sbarbody {
}

.sbarbody2 {
padding: 10px;
text-align:right;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #555555;
}

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

table.calendar {
display:none;

}

.sbarcalendar {
display:none;

}

.sbarcalendarposts {
display:none;

}

ul.sbarlist
{list-style: none;
}

.sbarlist
{padding:0 10px 10px 10px;
margin-top:-10px;
}

li.sbaritem
{ display:inline-block;
border-bottom:#e6e6e6 1px solid;
border-right:#e6e6e6 1px solid;
padding:5px;
background-color:#fff;
list-style: none;
}

li.sbartitle
{ display:none;
}

#footer {
width: 100%;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
font-weight: normal;
text-transform:uppercase;
letter-spacing: 1px;
background-color: #f6f6f6;
color: #ccc;
clear: both;
margin:-20px 0 30px 0;
border-bottom:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
}

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

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

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

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #dddddd;
text-align: center;
}

td.yearmonth {
border-style: none;
}

.datesubjectcomment {
background-color: #f6f6f6;
padding: 5px;
margin-top: 30px;
color:#ddd;
font-size:7pt;
font-family:Georgia, "Times New Roman", Times, serif;
}

.userpiccomment {
position: relative;
background-color: #fff;
width:75px;
height:75px;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-right:solid 1px #e6e6e6;
border-bottom:solid 1px #e6e6e6;
}

.box, .box a, .box a:hover, .box b {
padding: 0px;
clear: left;
font-weight:normal;
color:#bbb;
}

input, textarea, select {
background-color: #fff;
color: #999;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:8pt;
}

textarea.textbox {
width: 100% !important;
color: #999;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height:160%;
font-size:8pt;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
line-height: 125%;
background-color: #dddddd;
color: #000000;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
padding: 20px;
font-size: 8pt;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #bbb;
line-height:160%;
}

.commentbox {
border-right:solid 1px #e6e6e6;
border-bottom:solid 1px #e6e6e6;
padding: 10px;
margin: 10px;
background-color: #f6f6f6;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ccc;
font-weight:normal;
}

.datesubjectcomment a:hover {
color: #bbbbbb;
font-weight:normal;
text-decoration:none;
}

.commentboxpartial {
padding: 5px;
margin: 5px;
background-color: #dddddd;
}

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

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

.clear {
height: 15px;
color:transparent!important;
}

.separator{
height: 35px;
color:transparent!important;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(http://i47.tinypic.com/53nvki.jpg);
}
.ljuser a, .ljuser a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
letter-spacing:+1px;
text-transform:uppercase;
font-size:8pt;
text-decoration:none;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i49.tinypic.com/t0m7hg.jpg);
padding: 0 !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i49.tinypic.com/t0m7hg.jpg)!important;
background-repeat: no-repeat!important;
padding: 0!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i47.tinypic.com/e6b0js.jpg)!important;
background-repeat: no-repeat!important;
padding: 0;
}

Gin (wider)
live | static

/*-------------------------------------------------

Gin (wider) [02/01/10]
Flexible Squares
by darlingbones @ ohcodey.livejournal.com

----------------------------------------------------*/

body {
background-color: #ffffff;
text-align: center;
color: #aaa;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
margin: 0 auto;
}

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

#qrformdiv table {
border-color: #f6f6f6!important;
}

a:hover {
color: #777777;
text-decoration: underline;
}

blockquote {
padding:10px;
background-color:#fff;
border-bottom:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
text-align:justify;}

p, td, {
font-size: 8pt;
}

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

#content
{ width: 600px;
background-color: #fff;
padding:0;
margin-left:auto;
margin-right:auto;
}

#maincontent {
margin-top: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
background-color: #fff;
color: #000000;
text-align: left;
width: 600px;
}

.subcontent {
width: 600px;
border-bottom:1px #e6e6e6 solid;
border-right:1px #e6e6e6 solid;

}

#sidebar {
background-color: #f6f6f6;
font-size: 8pt;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #bbb;
width: 200px;
float: right;
margin-right:-230px;
margin-top:-20px;
border-bottom:1px #e6e6e6 solid;
border-right:1px #e6e6e6 solid;
}

#header {
width: 100%;
padding: 10px 0px 0px 0px;
margin: 50px 0 0 0;
text-align: right;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
background-color: #ffffff;
color: #e6e6e6;
text-transform:lowercase;
border-bottom:8px solid #e6e6e6;
}

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

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

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

.title {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 36pt;
font-weight: normal;
color:#f5f5f5;
text-align:left;
letter-spacing:-6px;
text-transform:lowercase;
margin-bottom:-7px;
border-bottom:20px solid #f6f6f6;
display:block;
line-height:70%;
}

.subtitle{display:none;
}

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

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

.entry {
width: 600px;
background-color: #f6f6f6;
color: #aaa;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
text-align:justify;
line-height:170%;
}

.entry_text {
max-width:600px;
padding:10px;
min-height:70px;
}
.entry_text img{
max-width:550px;
}

.userpic img, .userpicfriends img, .userpicfriends img a:hover, .userpicfriends a font, .userpicfriends a:hover font, .userpicfriends a, .userpicfriends a:hover {
max-width:100px;
height:100px;
color:#888;
text-align:center;
text-decoration:none!important;
}

.userpic, .userpicfriends {
position: relative;
float: left;
padding: 5px;
color:#f6f6f6;
background-color:#f6f6f6!important;
border-bottom:#E6E6E6 solid 1px;
border-right:#E6E6E6 solid 1px;
margin: 0 0 0 -140px;
text-align: center;
font-family:tahoma;
font-size: 7pt;
text-transform:uppercase;
z-index: 15;
max-width:100px;
text-decoration:none!important;
}

.date {
top: 5px;
margin-right:7px;
line-height:70%;
color: #ddd;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
text-align: right;
}

.subject {
font-weight: normal;
color: #d5d5d5;
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
text-align: right;
letter-spacing:-1px;
text-transform:uppercase;
}

.subject a, .subject a:link, .subject a:visited {
color: #d5d5d5;
font-weight:normal;
text-decoration:none;
}

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

.datesubject {
background-color: #f6f6f6;
padding: 5px;
}

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

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

.currents div {
display: block;
border-left:solid 2px #e6e6e6;
padding-left:5px;
}
.currents strong, .currentmood strong, .currentmusic .currentlocation
{
font-size:7pt;
color:#ccc;
text-transform:uppercase;
font-weight:normal!important;
}
.currentmusic {
}
.currentmood {
margin-left: 5px;
}
.currentlocation {
margin-left: 10px;
}

.ljtags {display:none; }

.currents, .currentmood, .currentmusic {
font-size: 10px;
margin-left: 10px;
font-weight: normal;
color: #ccc;
text-transform: uppercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #ccc;
font-weight: normal;
text-transform: uppercase;
}

.currentlocation a:hover {
color: #ccc;
font-weight: normal;
text-transform: uppercasee;
}

.comments {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
text-align: center;
background-color: #f6f6f6;
padding: 5px;
position: relative;
color:#f6f6f6;
text-transform:uppercase;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #d5d5d5;
}

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

.defaultuserpic {
display:none;
}

.sbarheader {
display:none;
}

.sbarbody {
}

.sbarbody2 {
padding: 10px;
text-align:right;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #555555;
}

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

table.calendar {
display:none;

}

.sbarcalendar {
display:none;

}

.sbarcalendarposts {
display:none;

}

ul.sbarlist
{list-style: none;
}

.sbarlist
{padding:0 10px 10px 10px;
margin-top:-10px;
}

li.sbaritem
{ display:inline-block;
border-bottom:#e6e6e6 1px solid;
border-right:#e6e6e6 1px solid;
padding:5px;
background-color:#fff;
list-style: none;
}

li.sbartitle
{ display:none;
}

#footer {
width: 100%;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
font-weight: normal;
text-transform:uppercase;
letter-spacing: 1px;
background-color: #f6f6f6;
color: #ccc;
clear: both;
margin:-20px 0 30px 0;
border-bottom:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
}

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

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

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

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #dddddd;
text-align: center;
}

td.yearmonth {
border-style: none;
}

.datesubjectcomment {
background-color: #f6f6f6;
padding: 5px;
margin-top: 30px;
color:#ddd;
font-size:7pt;
font-family:Georgia, "Times New Roman", Times, serif;
}

.userpiccomment {
position: relative;
background-color: #fff;
width:75px;
height:75px;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-right:solid 1px #e6e6e6;
border-bottom:solid 1px #e6e6e6;
}

.box, .box a, .box a:hover, .box b {
padding: 0px;
clear: left;
font-weight:normal;
color:#bbb;
}

input, textarea, select {
background-color: #fff;
color: #999;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:8pt;
}

textarea.textbox {
width: 100% !important;
color: #999;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height:160%;
font-size:8pt;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
line-height: 125%;
background-color: #dddddd;
color: #000000;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
padding: 20px;
font-size: 8pt;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #bbb;
line-height:160%;
}

.commentbox {
border-right:solid 1px #e6e6e6;
border-bottom:solid 1px #e6e6e6;
padding: 10px;
margin: 10px;
background-color: #f6f6f6;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ccc;
font-weight:normal;
}

.datesubjectcomment a:hover {
color: #bbbbbb;
font-weight:normal;
text-decoration:none;
}

.commentboxpartial {
padding: 5px;
margin: 5px;
background-color: #dddddd;
}

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

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

.clear {
height: 15px;
color:transparent!important;
}

.separator{
height: 35px;
color:transparent!important;
}

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(http://i47.tinypic.com/53nvki.jpg);
}
.ljuser a, .ljuser a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
letter-spacing:+1px;
text-transform:uppercase;
font-size:8pt;
text-decoration:none;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i49.tinypic.com/t0m7hg.jpg);
padding: 0 !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i49.tinypic.com/t0m7hg.jpg)!important;
background-repeat: no-repeat!important;
padding: 0!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i47.tinypic.com/e6b0js.jpg)!important;
background-repeat: no-repeat!important;
padding: 0;
}

o1
Go to customize your journal + select any Flexible Squares layout + hit 'Apply Theme'.

o2
Go to custom css. Be sure all the drop boxes are set to 'NO'.
Paste the code into the custom stylesheet box.

o3
Edit the sidebar contents here. Tags + headings + summaries + calender are set not to display.

o4
Credit darlingbones or ohcodey

o5
I will attempt to help as I can, I also rec. checking out s2flexisquares for more indepth aid.

follow ohcodey for my layout updates ♥

style: flexible squares

Previous post Next post
Up