Flexi Sqs : Negative Reciprocal.
My first Flexible Squares layout. This is a momentous occasion.
Live Preview | Static Preview
Compatible Browsers: Firefox, Chrome, Safari, Internet Explorer
Account Types: Basic, Plus, Paid
Comment Pages: More or less
Appearance: No Sidebar, No Topbar
Alternate Versions: NONE
Enabled: Title and subtitle. Whatever you have set for these will be displayed on your page underneath the header.
Additional: On the 'Display' menu, under the Additional Options tab, select YES to show the user picture on all entries and then select LEFT as the position for the user picture in each entry.
Ad Placement: Ad placement should be set to 'Horizontal'.
To Install: Choose a 'Flexible Squares' style-sheet and have the '2 column (sidebar on right)' is selected under Page Setup. Then click on customize your theme. Go to 'Custom CSS', set the first two drop-downs to NO, and insert the CSS provided below.
/* entitled: negative reciprocal */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-attachment:fixed;
background-image: url("http://i53.tinypic.com/8vng2w.png"); }
body, td, th {
font: normal 10px "Lucida Sans", sans-serif;
color: #888888;
line-height:15px;
text-align:justify; }
/* PARENT LINKS, BLOCK QUOTE ---------------- */
a, a:link, a:visited, a:active {
color: #303030;
font: "Trebuchet MS", sans-serif;
padding: 1px;
text-decoration: none; }
a:hover {
color: #000000;
text-decoration: none; }
blockquote {
border: 1px dashed #000000;
padding: 20px; }
input, textarea, select {
background-color: #ffffff;
font: normal 9px "Courier New", monospace;
color: #888888;
border:none; }
/* CONTENT FORMATTING ---------------- */
#content {
width: 800px;
margin: auto; }
#maincontent {
margin-top: 15px;
background-color: #transparent;
text-align: auto; }
#sidebar {
display: none; }
.subcontent, .yeartable {
background:white;
padding:10px;
border:1px solid #E3E3E3;
padding-top: 30px; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 100%;
margin: 0px;
margin-top: 40px;
text-align: right;
background-color: #000000;
color: #555555;
text-transform:lowercase;
font: bold italic 16px "Times", serif;
letter-spacing: -1px; }
.title {
font: bold italic 40px "Times", serif;
color: #ffffff;
line-height: 40px;
text-align: right;
letter-spacing: -5px;
padding-right: 10px;
margin: auto; }
.subtitle {
font: normal 10px "Trebuchet MS", sans-serif;
color: #C0C0C0;
line-height: 20px;
padding-right: 10px;
text-align: right;
letter-spacing: 7px;
padding-bottom: 10px; }
#footer {
width: 100%;
text-align: left;
z-index: 100;
clear: both;
font-size:15px;
letter-spacing: -1px; }
#footer a {
color:#ffffff;
background-color: #000000;
padding: 2px;
font-size:15px;
letter-spacing:-1px; }
div#header a, div#header a:link, div#header a:visited {
color: #ffffff;
background: #000000;
padding: 20px;
text-decoration: none;
border:1px solid #000000;
margin:0px; }
div#header a:hover {
color: #ffffff;
background: #000000;
text-decoration: none;
border:1px dashed #888888;
margin:0px; }
ul.navheader {
padding: 20px;
margin: 0 0 0 0px;
border-top: 10px solid #000000;
background-color: #transparent; }
ul.navheader li {
display: inline;
margin:0 0 0 0px;
background: #303030;
padding:0; }
ul.navheader li.view {
border: 1px dashed #888888;
padding: 20px;
background-color: ffffff;
color: #ffffff; }
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
margin: 0;
background: #transparent;
padding: 30px; }
.lj-view-recent .entry_text {
min-height:220px; }
.entry_text {
padding: 0 0 0 37px; }
.entry_text a:hover {
border-bottom: 1px dashed #888888; }
.entry_text img {
border:1px solid #E3E3E3;
padding:5px; }
.entry ul li {
padding-left: 5px;
margin-left: 15px; }
.entry ol li {
padding-left: 5px;
margin-left: 15px; }
/* USER PIC CRAP ---------------- */
.userpic, .userpicfriends {
float: left;
background-color: transparent!important;
z-index: 15;
margin: 0px 20px 0px -95px;
text-align:right; }
.userpic img, .userpicfriends img {
width:100px;
height:100px;
padding:20px;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
border:1px dashed #111;
margin: 0 0 5px 0; }
.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color: #888888; }
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font-size: 8px;
color: #CCCCCC;
letter-spacing: 3px;
text-align: right;
padding: 0 15px 0 0; }
.datesubject {
padding: 10px 17px 0px 0;
background-color: #F4F4F4;
border-bottom: 4px solid #EFEFEF;
text-align:right; }
.subject, subject a, subject a:link {
font-size:28px;
padding-top: 3px;
margin-bottom: 12px;
letter-spacing:-4px;
text-transform:lowercase; }
.subject a:hover {
color: #000000; }
/* TAGS ------------------ */
.ljtags {
font-size:8px;
color: #888888;
text-transform:uppercase;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0;
height: 10px;
position:relative;
text-align:left; }
.ljtags a {
color: #888888; }
ul.ljtaglist {
width: 780px;
border:1px solid #E3E3E3;
background-color:white;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0; }
/* CURRENTS INFO ---------------- */
.currents {
color: #CCCCCC;
font: italic 12px "Times", serif;
text-transform:lowercase;
padding: 10px;
margin: -20px 0 0 37px;
width:300px;
height: 20px; }
.currents div {
display: block; }
/* COMMENT LINKS ---------------- */
.comments {
border-top: 9px solid #000000;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
text-align: right;
padding: 7px;
position: relative;
font-size:0;
margin: 0 0 0 37px; }
.comments a {
font: italic 12px "Times New Roman", serif;
text-transform:lowercase;
letter-spacing:0px;
padding: 4px;
color:#ffffff;
background-color: #000000;
margin: 0 0 0 10px; }
.comments a:hover {
font: italic 12px "Times New Roman", serif;
text-transform:lowercase;
letter-spacing:0px;
color:#EFEFEF;
padding: 4px;
background-color: #000000;
margin: 0 0 0 10px; }
/* COMMENT-PAGE ---------------- */
.datesubjectcomment {
padding: 5px;
background-color: #f4f4f4;
border-bottom:5px solid #efefef;
margin-top: 20px; }
.userpiccomment {
position: relative;
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
width:100px;
height:100px;
padding:20px;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
border:1px dashed #111; }
.box {
width:800px;
background-color:white;
border:1px solid #E3E3E3;
margin: 0 auto;
clear: left; }
textarea.textbox {
width: 100% !important; }
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px; }
.replytosubject {
font-weight: bold; }
.commentreply {
position: relative;
margin: 10px; }
.commentbox {
padding: 10px;
margin: 10px 10px 10px 150px;
border:1px solid #F5F5F3; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {}
.datesubjectcomment a:hover {}
.commentboxpartial {
padding: 10px;
margin: 10px; }
.commentinfo {
margin-top: 10px;
width: 100%; }
/* ARCHIVE PAGE ---------------- */
ul.year {
text-align: center;
padding-bottom: 40px; }
ul.year li {
display: inline; }
table.yeartable {
width: 800px;
margin-left: auto;
margin-right: auto; }
table.yeartable td.yeardate, table.yeartable td.yearday {
padding:10px; }
table.yeartable td.yearday {
background-color: #F5F5F3;
text-align: center; }
td.yearmonth {
border-style: none; }
/* FOOTER ---------------- */
ul.navfooter {
text-align: center;
padding: 5px;
margin: 0px; }
ul.navfooter li {
text-align: center;
display: inline;
margin: 0 5px 0 5px; }
.clearfoot {
clear: both;
height:0; }
/* MISC, SPACE SEPARATOR ----------------*/
.clear {
height: 5px; }
.skiplinks {
text-align: center;
text-transform:uppercase; }
.separator{
height: 10px; }
form#qrform table {
border-width: 0px !important; }
/* LJ USER IMG ICONS ---------------- */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-
profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(http://i47.tinypic.com/wi7k3m.png) !important;
padding: 14px 9px 0 0 !important;
text-decoration: none; }
.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image: url(http://i50.tinypic.com/25tun2a.jpg) !important;
padding: 17px 15px 0 0 !important;
width:0;
height: 0;
text-decoration: none; }
img[src*="icon_protected.gif"] {
background-repeat: no-repeat;
background-image: url(http://i48.tinypic.com/2a9nwwl.gif);
padding: 17px 18px 0 0 !important;
width:0;
height: 0;
text-decoration: none; }
img[src*="icon_private.gif"] {
background-repeat: no-repeat;
background-image: url(http://i47.tinypic.com/2i6gvac.gif);
padding: 17px 21px 0 0 !important;
text-decoration: none;
width:0;
height: 0; }
img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0; }
img[src*="syndicated.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0; }
/* CONTEXTUAL POP-UP ---------------- */
div.ContextualPopup div.Inner {
padding: 10px 10px 8px 10px !important;
background-color: #ffffff;
font-family: "Lucida Sans", serif;
color: #888888 !important;
font-size: 8px;
text-transform:uppercase;
width:210px;
border:1px dashed #f4f4f4; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:active {
color: #59506B !important;
font-weight: normal;
text-decoration: none !important; }
div.ContextualPopup div.Inner a:hover {
color: #507272 !important;
font-weight: normal;
text-decoration: none !important; }
div.ContextualPopup .Relation {
color: #333333;
font-weight: normal !important; }
originally posted here @ fleeting_days
Live Preview | Static Preview
Compatible Browsers: Firefox, Chrome, Safari, Internet Explorer
Account Types: Basic, Plus, Paid
Comment Pages: More or less
Appearance: No Sidebar, No Topbar
Alternate Versions: NONE
Enabled: Title and subtitle. Whatever you have set for these will be displayed on your page underneath the header.
Additional: On the 'Display' menu, under the Additional Options tab, select YES to show the user picture on all entries and then select LEFT as the position for the user picture in each entry.
Ad Placement: Ad placement should be set to 'Horizontal'.
To Install: Choose a 'Flexible Squares' style-sheet and have the '2 column (sidebar on right)' is selected under Page Setup. Then click on customize your theme. Go to 'Custom CSS', set the first two drop-downs to NO, and insert the CSS provided below.
/* entitled: negative reciprocal */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-attachment:fixed;
background-image: url("http://i53.tinypic.com/8vng2w.png"); }
body, td, th {
font: normal 10px "Lucida Sans", sans-serif;
color: #888888;
line-height:15px;
text-align:justify; }
/* PARENT LINKS, BLOCK QUOTE ---------------- */
a, a:link, a:visited, a:active {
color: #303030;
font: "Trebuchet MS", sans-serif;
padding: 1px;
text-decoration: none; }
a:hover {
color: #000000;
text-decoration: none; }
blockquote {
border: 1px dashed #000000;
padding: 20px; }
input, textarea, select {
background-color: #ffffff;
font: normal 9px "Courier New", monospace;
color: #888888;
border:none; }
/* CONTENT FORMATTING ---------------- */
#content {
width: 800px;
margin: auto; }
#maincontent {
margin-top: 15px;
background-color: #transparent;
text-align: auto; }
#sidebar {
display: none; }
.subcontent, .yeartable {
background:white;
padding:10px;
border:1px solid #E3E3E3;
padding-top: 30px; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 100%;
margin: 0px;
margin-top: 40px;
text-align: right;
background-color: #000000;
color: #555555;
text-transform:lowercase;
font: bold italic 16px "Times", serif;
letter-spacing: -1px; }
.title {
font: bold italic 40px "Times", serif;
color: #ffffff;
line-height: 40px;
text-align: right;
letter-spacing: -5px;
padding-right: 10px;
margin: auto; }
.subtitle {
font: normal 10px "Trebuchet MS", sans-serif;
color: #C0C0C0;
line-height: 20px;
padding-right: 10px;
text-align: right;
letter-spacing: 7px;
padding-bottom: 10px; }
#footer {
width: 100%;
text-align: left;
z-index: 100;
clear: both;
font-size:15px;
letter-spacing: -1px; }
#footer a {
color:#ffffff;
background-color: #000000;
padding: 2px;
font-size:15px;
letter-spacing:-1px; }
div#header a, div#header a:link, div#header a:visited {
color: #ffffff;
background: #000000;
padding: 20px;
text-decoration: none;
border:1px solid #000000;
margin:0px; }
div#header a:hover {
color: #ffffff;
background: #000000;
text-decoration: none;
border:1px dashed #888888;
margin:0px; }
ul.navheader {
padding: 20px;
margin: 0 0 0 0px;
border-top: 10px solid #000000;
background-color: #transparent; }
ul.navheader li {
display: inline;
margin:0 0 0 0px;
background: #303030;
padding:0; }
ul.navheader li.view {
border: 1px dashed #888888;
padding: 20px;
background-color: ffffff;
color: #ffffff; }
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
margin: 0;
background: #transparent;
padding: 30px; }
.lj-view-recent .entry_text {
min-height:220px; }
.entry_text {
padding: 0 0 0 37px; }
.entry_text a:hover {
border-bottom: 1px dashed #888888; }
.entry_text img {
border:1px solid #E3E3E3;
padding:5px; }
.entry ul li {
padding-left: 5px;
margin-left: 15px; }
.entry ol li {
padding-left: 5px;
margin-left: 15px; }
/* USER PIC CRAP ---------------- */
.userpic, .userpicfriends {
float: left;
background-color: transparent!important;
z-index: 15;
margin: 0px 20px 0px -95px;
text-align:right; }
.userpic img, .userpicfriends img {
width:100px;
height:100px;
padding:20px;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
border:1px dashed #111;
margin: 0 0 5px 0; }
.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color: #888888; }
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font-size: 8px;
color: #CCCCCC;
letter-spacing: 3px;
text-align: right;
padding: 0 15px 0 0; }
.datesubject {
padding: 10px 17px 0px 0;
background-color: #F4F4F4;
border-bottom: 4px solid #EFEFEF;
text-align:right; }
.subject, subject a, subject a:link {
font-size:28px;
padding-top: 3px;
margin-bottom: 12px;
letter-spacing:-4px;
text-transform:lowercase; }
.subject a:hover {
color: #000000; }
/* TAGS ------------------ */
.ljtags {
font-size:8px;
color: #888888;
text-transform:uppercase;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0;
height: 10px;
position:relative;
text-align:left; }
.ljtags a {
color: #888888; }
ul.ljtaglist {
width: 780px;
border:1px solid #E3E3E3;
background-color:white;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0; }
/* CURRENTS INFO ---------------- */
.currents {
color: #CCCCCC;
font: italic 12px "Times", serif;
text-transform:lowercase;
padding: 10px;
margin: -20px 0 0 37px;
width:300px;
height: 20px; }
.currents div {
display: block; }
/* COMMENT LINKS ---------------- */
.comments {
border-top: 9px solid #000000;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
text-align: right;
padding: 7px;
position: relative;
font-size:0;
margin: 0 0 0 37px; }
.comments a {
font: italic 12px "Times New Roman", serif;
text-transform:lowercase;
letter-spacing:0px;
padding: 4px;
color:#ffffff;
background-color: #000000;
margin: 0 0 0 10px; }
.comments a:hover {
font: italic 12px "Times New Roman", serif;
text-transform:lowercase;
letter-spacing:0px;
color:#EFEFEF;
padding: 4px;
background-color: #000000;
margin: 0 0 0 10px; }
/* COMMENT-PAGE ---------------- */
.datesubjectcomment {
padding: 5px;
background-color: #f4f4f4;
border-bottom:5px solid #efefef;
margin-top: 20px; }
.userpiccomment {
position: relative;
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
width:100px;
height:100px;
padding:20px;
background: url(http://i53.tinypic.com/333g8w1.png) top left repeat scroll;
border:1px dashed #111; }
.box {
width:800px;
background-color:white;
border:1px solid #E3E3E3;
margin: 0 auto;
clear: left; }
textarea.textbox {
width: 100% !important; }
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px; }
.replytosubject {
font-weight: bold; }
.commentreply {
position: relative;
margin: 10px; }
.commentbox {
padding: 10px;
margin: 10px 10px 10px 150px;
border:1px solid #F5F5F3; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {}
.datesubjectcomment a:hover {}
.commentboxpartial {
padding: 10px;
margin: 10px; }
.commentinfo {
margin-top: 10px;
width: 100%; }
/* ARCHIVE PAGE ---------------- */
ul.year {
text-align: center;
padding-bottom: 40px; }
ul.year li {
display: inline; }
table.yeartable {
width: 800px;
margin-left: auto;
margin-right: auto; }
table.yeartable td.yeardate, table.yeartable td.yearday {
padding:10px; }
table.yeartable td.yearday {
background-color: #F5F5F3;
text-align: center; }
td.yearmonth {
border-style: none; }
/* FOOTER ---------------- */
ul.navfooter {
text-align: center;
padding: 5px;
margin: 0px; }
ul.navfooter li {
text-align: center;
display: inline;
margin: 0 5px 0 5px; }
.clearfoot {
clear: both;
height:0; }
/* MISC, SPACE SEPARATOR ----------------*/
.clear {
height: 5px; }
.skiplinks {
text-align: center;
text-transform:uppercase; }
.separator{
height: 10px; }
form#qrform table {
border-width: 0px !important; }
/* LJ USER IMG ICONS ---------------- */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-
profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(http://i47.tinypic.com/wi7k3m.png) !important;
padding: 14px 9px 0 0 !important;
text-decoration: none; }
.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image: url(http://i50.tinypic.com/25tun2a.jpg) !important;
padding: 17px 15px 0 0 !important;
width:0;
height: 0;
text-decoration: none; }
img[src*="icon_protected.gif"] {
background-repeat: no-repeat;
background-image: url(http://i48.tinypic.com/2a9nwwl.gif);
;){kind=link}
padding: 17px 18px 0 0 !important;
width:0;
height: 0;
text-decoration: none; }
img[src*="icon_private.gif"] {
background-repeat: no-repeat;
background-image: url(http://i47.tinypic.com/2i6gvac.gif);
;){kind=link}
padding: 17px 21px 0 0 !important;
text-decoration: none;
width:0;
height: 0; }
img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0; }
img[src*="syndicated.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0; }
/* CONTEXTUAL POP-UP ---------------- */
div.ContextualPopup div.Inner {
padding: 10px 10px 8px 10px !important;
background-color: #ffffff;
font-family: "Lucida Sans", serif;
color: #888888 !important;
font-size: 8px;
text-transform:uppercase;
width:210px;
border:1px dashed #f4f4f4; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:active {
color: #59506B !important;
font-weight: normal;
text-decoration: none !important; }
div.ContextualPopup div.Inner a:hover {
color: #507272 !important;
font-weight: normal;
text-decoration: none !important; }
div.ContextualPopup .Relation {
color: #333333;
font-weight: normal !important; }
originally posted here @ fleeting_days