(layout 027 →) flexi sqs, inverse tangent.
Icons... will come eventually. :3
This layout is a 'dark' version of my second ever made layout on this community! The response the first time was overwhelmingly positive and one of my friends asked me to rehash it with black as the primary color and white as the accent. Throw in a little bit of electric blue and you will have Inverse Tangent! (I stuck with the math name, so sue me.)
INVERSE TANGENT; static | live
Browsers: Chrome, Firefox, IE, Safari
Accounts: Basic and Paid
INSTALLATION 101
Go to Customize -> Select a Flexible Squares stylesheet.
Ad placement -> there should be none
Display tab -> Presentation -> Additional options -> user picture position should be set to left.
Custom CSS tab -> Set all dropdown menus to NO.
Active: Everything except...
Inactive: ... entire Sidebar
/* entitled: inverse tangent */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-attachment:fixed;
background-color: black;
background-image: url(""); }
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: #99FFFF;
font: "Trebuchet MS", sans-serif;
padding: 1px;
text-decoration: none; }
a:hover {
color: #efefef;
text-decoration: none; }
blockquote {
border: 1px dotted #99ffff;
border-left:none;
border-right:none;
padding: 20px; }
input, textarea, select {
background-color: #111111;
font: normal 9px "Courier New", monospace;
color: #888888;
border:1px dotted #000; }
b {color:#ccc;}
.ljuser a b {color:white;}
/* CONTENT FORMATTING ---------------- */
#content {
width: 800px;
margin: auto; }
#maincontent {
margin-top: 25px;
text-align: auto; }
#sidebar {
display: none; }
.subcontent, .yeartable {
background:#111111;
padding:10px; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 100%;
margin: 0px;
margin-top: 40px;
text-align: right;
background-color: #111111;
border-top:1px dotted #99FFFF;
border-bottom:1px dotted #99FFFF;
color: #555555;
text-transform:lowercase;
font: bold italic 16px "Times", serif;
letter-spacing: -1px; }
.title {
font: italic 34px "georgia", serif;
color: #4f4f4f;
line-height: 40px;
text-align: right;
letter-spacing: -3px;
padding-right: 10px;
margin: auto; }
.subtitle {
font: normal 10px "Trebuchet MS", sans-serif;
color: #D8D8D8;
line-height: 20px;
padding-right: 10px;
text-align: right;
letter-spacing: 7px;
padding-bottom: 10px; }
#footer {
width: 100%;
text-align: left;
z-index: 100;
margin-top:25px;
clear: both;
font-size:12px;
letter-spacing: -1px; }
#footer a {
color:#ffffff;
background-color: #000000;
padding: 2px;
font-size:12px;
letter-spacing:-1px; }
div#header a, div#header a:link, div#header a:visited {
color: #ffffff;
background-image:url("http://i48.tinypic.com/34zgbp0.png");
padding: 20px;
text-decoration: none;
border-bottom: 1px dotted #99FFFF;
border-top: 10px solid #000000; }
div#header a:hover {
color: #ffffff;
background-image:url("http://i48.tinypic.com/34zgbp0.png");
text-decoration: none;
border-top:10px solid #FFFFFF;
border-bottom:1px dotted #99FFFF;
margin:0px; }
ul.navheader {
padding: 20px;
margin: 0 0 0 0px;
border-top: 22px solid #111111;
background-color: #; }
ul.navheader li {
display: inline;
margin:0 0 0 0px;
background: #;
padding:0; }
ul.navheader li.view {
border-bottom: 1px dotted #99FFFF;
border-top: 10px solid #99ffff;
padding: 20px;
background:#000;
color: #fff; }
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
margin: 0px;
padding: 30px; }
.lj-view-recent .entry_text {
min-height:120px; }
.entry_text {
padding: 0 0 0 37px; }
.entry_text a:hover {color:#CCC; }
.entry_text img {
border:1px dotted #000000;
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: 10px 20px 0px -95px;
text-align:right; }
.userpic img, .userpicfriends img {
width:100px;
height:100px;
padding:18px;
background-image:url("http://i48.tinypic.com/34zgbp0.png");
border-bottom:1px dotted #99FFFF;
border-top:1px dotted #99FFFF;
margin: 0 0 5px 0; }
.userpic a font, .userpicfriends a font {
color: #888888; }
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font-size: 8px;
color: #4f4f4f;
letter-spacing: 3px;
text-align: right;
padding: 0 15px 0 0; }
.datesubject {
padding: 10px 17px 0px 0;
background-color: #111111;
width:773px;
border-bottom: 7px solid #99FFFF;
text-align:right; }
.subject, .subject a, .subject a:link {
font: normal 27px "rockwell", sans-serif;
color:#EAEAEA;
padding-top: 3px;
margin-bottom: 12px;
letter-spacing:-1px;
text-transform:lowercase; }
.subject a:hover {
color:#CCCCCC; }
/* TAGS ------------------ */
.ljtags {
font-size:8px;
color: #888888;
text-transform:uppercase;
padding-right: 5px;
padding-top: 15px;
padding-bottom: 5px;
margin: 0;
position:relative;
text-align:left; }
.ljtags a {
color: #99FFFF; }
.ljtags a:hover {border-bottom: 1px dotted #888888;}
ul.ljtaglist {
width: 780px;
border-top:1px dotted #99FFFF;
background-color:#111111;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0; }
/* CURRENTS INFO ---------------- */
.currents {
color: #888888;
font: normal 10px "Lucida Sans", sans-serif;
text-transform:lowercase;
padding: 10px;
margin: -20px 0 -10px 37px;
width:300px; }
.currents div {
display: block; }
/* COMMENT LINKS ---------------- */
.comments {
border-top: 9px solid #000000;
background: url(http://i48.tinypic.com/34zgbp0.png) top left repeat scroll;
text-align: right;
padding: 7px;
position: relative;
height:20px;
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;
border-bottom:1px dotted #99ffff;
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: #111111;
border-bottom:1px dotted #99ffff;
margin-top: 20px;
margin-bottom:10px; }
.userpiccomment {
position: relative;
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
width:80px;
height:80px;
padding:14px;
background: url(http://i48.tinypic.com/34zgbp0.png) top left repeat scroll;
border:1px dashed #111; }
.box {
background-color:#111111;
margin-left:auto;
margin-right:auto;
clear: left; }
textarea.textbox {
width: 95% !important; }
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px; }
.replytoposter{padding-top:25px}
body.lj-view-reply .entry{padding:10px} .replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 20px;color:#666666}
.commentreply {
position: relative; }
.commentbox {
padding: 20px;
margin-right:auto;
margin-left:auto;
border:1px dotted #000000; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {}
.datesubjectcomment a:hover {}
.commentboxpartial {
padding: 10px;
margin-left: 0px; }
.commentinfo {
margin-top: 10px;
width: 100%; }
form#postform{}form#qrform {}
form#qrform table {border-width: 0px !important;}
.commentbox > div > div > a > img {width: 14px; height: 14px;}
.ljcmt_full,.commentboxpartial { min-width: 250px; }
/* 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: #111111;
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; }
/* FOR TINY ICONS */
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"] {
background-image:url("http://i39.tinypic.com/dd4sj.png");
background-repeat:no-repeat !important;
height:0;
padding:10px 11px 4px 0 !important;
width:0;
}
img[src*="anonymous.gif"] {
background-image:url("http://i46.tinypic.com/2i6jmnn.gif");
background-repeat:no-repeat !important;
height:0;
padding:17px 17px 0 0 !important;
width:0;
}
img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-image:url("http://i42.tinypic.com/2a5nrj5.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:12px 12px 0 0px !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:20px 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:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url("http://i48.tinypic.com/2a9nwwl.gif") !important;
background-repeat:no-repeat !important;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg") !important;
background-repeat:no-repeat;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url("http://i47.tinypic.com/2i6gvac.gif") !important;
background-repeat:no-repeat;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
[ notes ]
- Sister layout to "Negative Reciprocal"
- Space between entries is affected if you have a Plus account and use this layout.
- (more to be added as necessary)
EXTRANEOUS
→ Taking Requests: request specific design for your own uses; lj tokens taken as payment
→ Layout Archive: browse through my older layout designs
→ Resources: precarious and hasty outline of various resources used.
WATCH // AFFILIATE
This layout is a 'dark' version of my second ever made layout on this community! The response the first time was overwhelmingly positive and one of my friends asked me to rehash it with black as the primary color and white as the accent. Throw in a little bit of electric blue and you will have Inverse Tangent! (I stuck with the math name, so sue me.)
INVERSE TANGENT; static | live
Browsers: Chrome, Firefox, IE, Safari
Accounts: Basic and Paid
INSTALLATION 101
Go to Customize -> Select a Flexible Squares stylesheet.
Ad placement -> there should be none
Display tab -> Presentation -> Additional options -> user picture position should be set to left.
Custom CSS tab -> Set all dropdown menus to NO.
Active: Everything except...
Inactive: ... entire Sidebar
/* entitled: inverse tangent */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-attachment:fixed;
background-color: black;
background-image: url(""); }
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: #99FFFF;
font: "Trebuchet MS", sans-serif;
padding: 1px;
text-decoration: none; }
a:hover {
color: #efefef;
text-decoration: none; }
blockquote {
border: 1px dotted #99ffff;
border-left:none;
border-right:none;
padding: 20px; }
input, textarea, select {
background-color: #111111;
font: normal 9px "Courier New", monospace;
color: #888888;
border:1px dotted #000; }
b {color:#ccc;}
.ljuser a b {color:white;}
/* CONTENT FORMATTING ---------------- */
#content {
width: 800px;
margin: auto; }
#maincontent {
margin-top: 25px;
text-align: auto; }
#sidebar {
display: none; }
.subcontent, .yeartable {
background:#111111;
padding:10px; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 100%;
margin: 0px;
margin-top: 40px;
text-align: right;
background-color: #111111;
border-top:1px dotted #99FFFF;
border-bottom:1px dotted #99FFFF;
color: #555555;
text-transform:lowercase;
font: bold italic 16px "Times", serif;
letter-spacing: -1px; }
.title {
font: italic 34px "georgia", serif;
color: #4f4f4f;
line-height: 40px;
text-align: right;
letter-spacing: -3px;
padding-right: 10px;
margin: auto; }
.subtitle {
font: normal 10px "Trebuchet MS", sans-serif;
color: #D8D8D8;
line-height: 20px;
padding-right: 10px;
text-align: right;
letter-spacing: 7px;
padding-bottom: 10px; }
#footer {
width: 100%;
text-align: left;
z-index: 100;
margin-top:25px;
clear: both;
font-size:12px;
letter-spacing: -1px; }
#footer a {
color:#ffffff;
background-color: #000000;
padding: 2px;
font-size:12px;
letter-spacing:-1px; }
div#header a, div#header a:link, div#header a:visited {
color: #ffffff;
background-image:url("http://i48.tinypic.com/34zgbp0.png");
padding: 20px;
text-decoration: none;
border-bottom: 1px dotted #99FFFF;
border-top: 10px solid #000000; }
div#header a:hover {
color: #ffffff;
background-image:url("http://i48.tinypic.com/34zgbp0.png");
text-decoration: none;
border-top:10px solid #FFFFFF;
border-bottom:1px dotted #99FFFF;
margin:0px; }
ul.navheader {
padding: 20px;
margin: 0 0 0 0px;
border-top: 22px solid #111111;
background-color: #; }
ul.navheader li {
display: inline;
margin:0 0 0 0px;
background: #;
padding:0; }
ul.navheader li.view {
border-bottom: 1px dotted #99FFFF;
border-top: 10px solid #99ffff;
padding: 20px;
background:#000;
color: #fff; }
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
margin: 0px;
padding: 30px; }
.lj-view-recent .entry_text {
min-height:120px; }
.entry_text {
padding: 0 0 0 37px; }
.entry_text a:hover {color:#CCC; }
.entry_text img {
border:1px dotted #000000;
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: 10px 20px 0px -95px;
text-align:right; }
.userpic img, .userpicfriends img {
width:100px;
height:100px;
padding:18px;
background-image:url("http://i48.tinypic.com/34zgbp0.png");
border-bottom:1px dotted #99FFFF;
border-top:1px dotted #99FFFF;
margin: 0 0 5px 0; }
.userpic a font, .userpicfriends a font {
color: #888888; }
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font-size: 8px;
color: #4f4f4f;
letter-spacing: 3px;
text-align: right;
padding: 0 15px 0 0; }
.datesubject {
padding: 10px 17px 0px 0;
background-color: #111111;
width:773px;
border-bottom: 7px solid #99FFFF;
text-align:right; }
.subject, .subject a, .subject a:link {
font: normal 27px "rockwell", sans-serif;
color:#EAEAEA;
padding-top: 3px;
margin-bottom: 12px;
letter-spacing:-1px;
text-transform:lowercase; }
.subject a:hover {
color:#CCCCCC; }
/* TAGS ------------------ */
.ljtags {
font-size:8px;
color: #888888;
text-transform:uppercase;
padding-right: 5px;
padding-top: 15px;
padding-bottom: 5px;
margin: 0;
position:relative;
text-align:left; }
.ljtags a {
color: #99FFFF; }
.ljtags a:hover {border-bottom: 1px dotted #888888;}
ul.ljtaglist {
width: 780px;
border-top:1px dotted #99FFFF;
background-color:#111111;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0; }
/* CURRENTS INFO ---------------- */
.currents {
color: #888888;
font: normal 10px "Lucida Sans", sans-serif;
text-transform:lowercase;
padding: 10px;
margin: -20px 0 -10px 37px;
width:300px; }
.currents div {
display: block; }
/* COMMENT LINKS ---------------- */
.comments {
border-top: 9px solid #000000;
background: url(http://i48.tinypic.com/34zgbp0.png) top left repeat scroll;
text-align: right;
padding: 7px;
position: relative;
height:20px;
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;
border-bottom:1px dotted #99ffff;
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: #111111;
border-bottom:1px dotted #99ffff;
margin-top: 20px;
margin-bottom:10px; }
.userpiccomment {
position: relative;
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
width:80px;
height:80px;
padding:14px;
background: url(http://i48.tinypic.com/34zgbp0.png) top left repeat scroll;
border:1px dashed #111; }
.box {
background-color:#111111;
margin-left:auto;
margin-right:auto;
clear: left; }
textarea.textbox {
width: 95% !important; }
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px; }
.replytoposter{padding-top:25px}
body.lj-view-reply .entry{padding:10px} .replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 20px;color:#666666}
.commentreply {
position: relative; }
.commentbox {
padding: 20px;
margin-right:auto;
margin-left:auto;
border:1px dotted #000000; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {}
.datesubjectcomment a:hover {}
.commentboxpartial {
padding: 10px;
margin-left: 0px; }
.commentinfo {
margin-top: 10px;
width: 100%; }
form#postform{}form#qrform {}
form#qrform table {border-width: 0px !important;}
.commentbox > div > div > a > img {width: 14px; height: 14px;}
.ljcmt_full,.commentboxpartial { min-width: 250px; }
/* 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: #111111;
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; }
/* FOR TINY ICONS */
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"] {
background-image:url("http://i39.tinypic.com/dd4sj.png");
background-repeat:no-repeat !important;
height:0;
padding:10px 11px 4px 0 !important;
width:0;
}
img[src*="anonymous.gif"] {
background-image:url("http://i46.tinypic.com/2i6jmnn.gif");
background-repeat:no-repeat !important;
height:0;
padding:17px 17px 0 0 !important;
width:0;
}
img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-image:url("http://i42.tinypic.com/2a5nrj5.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:12px 12px 0 0px !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:20px 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:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url("http://i48.tinypic.com/2a9nwwl.gif") !important;
background-repeat:no-repeat !important;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg") !important;
background-repeat:no-repeat;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url("http://i47.tinypic.com/2i6gvac.gif") !important;
background-repeat:no-repeat;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
[ notes ]
- Sister layout to "Negative Reciprocal"
- Space between entries is affected if you have a Plus account and use this layout.
- (more to be added as necessary)
EXTRANEOUS
→ Taking Requests: request specific design for your own uses; lj tokens taken as payment
→ Layout Archive: browse through my older layout designs
→ Resources: precarious and hasty outline of various resources used.
WATCH // AFFILIATE