The Truth Is In Here layout & profile layout

Oct 29, 2014 17:04

It's X-Files love month at xf-is-love, so the Harry Potter layout I had sheduled for this month will have to wait until next.

The Truth Is In Here

preview



Click here for live preview, then click on the layout's icon.



layout info
Based on Flexible Squares.
Works for all account types.
Tested in Firefox 32, Google Chrome 37 and Internet Explorer 11.

The widths of wrapper, maincontent and sidebar are changeable without problem. If you change the wrapper width, you'll need to adjust the widths of .headerimage, #header and ul.navheader.

how to implement this layout
Go to the Customize Journal page.

Make sure Style System is S2.

Choose the Flexible Squares layout.

Go to Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No
insert custom stylesheet

/* The Truth Is In Here
http://fuesch.livejournal.com/45986.html */

* {
margin: 0;
}

html, body {
height: 100%;
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(https://themes.googleusercontent.com/static/fonts/roboto/v10/biUEjW7P-lfzIZFXrcy-wQ.woff) format('woff');
}

@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://themes.googleusercontent.com/static/fonts/roboto/v10/owYYXKukxFDFjr0ZO8NXhz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
color: #AE9B91;
font-size: 12px;
background: #332323;
}

body > div[style*="width"] {
width: 67%!important;
margin: 0px auto 0px 0px!important;
padding: 0px!important;
background-color: #333544!important;
border: none!important;
}

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

a:visited {
color: #A55D46;
text-decoration: none;
}

a:hover {
color: #CB6A47;
background: #2B2D3B;
text-decoration: none;
}

a:active {
color: #D65729;
text-decoration: none;
}

code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}

p, td, blockquote {
font-size: 12px;
}

blockquote {
margin: 0px 25px;
}

q {
font-style: italic;
}

q i {
font-style: normal;
}

/* ------- GENERAL ------- */

#lj_controlstrip_new + .wrapper #header {
margin-top: -50px;
}

#lj_controlstrip_new + .wrapper #content-outer {
margin-top: -50px;
}

body > div[style*="width"] + .wrapper #content-outer #sidebar, body > div[style*="width"] + .wrapper #content-outer #maincontent {
padding-top: 11px;
}

body > div[style*="width"] + .wrapper #content-outer #header {
margin-top: -90px;
}

#lj_controlstrip_new + script + div[style*="width"] {
position: absolute;
top: 97px;
}

#lj_controlstrip_new + script + div[style*="width"] + .wrapper #content-outer #header {
margin-top: -100px;
}

#lj_controlstrip_new + script + div[style*="width"] + .wrapper #maincontent, #lj_controlstrip_new + script + div[style*="width"] + .wrapper #sidebar{
padding-top: 100px!important;
}

.ljuser a + a {
padding: 0px 3px 0px 2px;
color: #333544;
font-size: 10px;
text-transform: uppercase;
background: #CB6A47;
border-radius: 3px;
}

.ljuser a + a:hover {
color: #20222D;
}

.ljuser a + a:active {
color: #333544;
background: #D65729;
border-radius: 3px;
}

.clear {
display: none;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width: 67%;
margin: 0px auto 0px 0px;
background: #333544;
}

.headerimage {
position: fixed;
right: 0px;
bottom: 0px;
width: 33%;
height: 475px;
padding-left: 30px;
background: #332323 url(http://fatfrog.info/Ma/A/layout/thetruthisinhere/ScullyMulder.png) left no-repeat;
z-index: 1;
}

#content-outer {
position: relative;
z-index: 2;
}

#lj_controlstrip_new {
position: relative;
top: -3px;
width: 67%;
box-shadow: inset 0px 5px 5px -5px #191A22;
z-index: 4;
}

.w-cs-options {
box-shadow: inset 0px 5px 5px -5px #191A22;
}

#header {
position: absolute;
width: 49%;
margin: 0px 0px 0px 100%;
text-align: left;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
}

ul.navheader {
position: fixed;
left: 0px;
width: 67%;
margin: 0px;
padding: 6px 0px 8px 0px;
text-align: center;
background: #333544 url(http://fatfrog.info/Ma/A/layout/thetruthisinhere/beige.png) center repeat-x;
box-shadow: 0px 5px 5px -5px #191A22;
z-index: 3;
}

ul.navheader li {
display: inline;
margin: 0px;
font-size: 24px;
}

ul.navheader li + li {
margin-left: 10px;
}

.view {
padding: 0px 5px;
background: #333543;
}

ul.navheader li a {
padding: 0px 5px;
background: #333543;
}

ul.navheader li a:hover {
color: #CB6A47;
}

.title {
padding: 5px 15px 0px 12px;
font-size: 28px;
color: #333544;
}

.subtitle {
padding: 0px 12px;
font-size: 24px;
color: #333544;
}

#sidebar {
float: left;
width: 200px;
padding: 63px 0px 0px 15px;
text-align: left;
}

#sidebar > div[style*="width"] {
width: 190px!important;
margin: 0px 0px 15px 0px!important;
text-align: center;
}

.sbarbody {
margin: 0px 0px 15px 0px;
}

.sbarbody2 {
margin: -24px 0px 15px 0px;
padding: 10px 7px 6px 7px;
border-top: 1px solid #AE9B91;
border-bottom: 1px solid #AE9B91;
border-radius: 10px;
}

ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}

ul.sbarlist + .sbarlist {
margin: -9px 0px 15px 0px;
padding: 7px 7px 3px 7px;
text-align: left;
border-top: 1px solid #AE9B91;
border-bottom: 1px solid #AE9B91;
border-radius: 10px;
}

li.sbartitle {
position: relative;
display: inline;
margin-bottom: -6px;
padding: 0px 5px;
list-style: none;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
}

li.sbaritem {
margin: 0px;
padding: 3px 0px;
}

li.sbaritem + li {
border-top: 1px solid #332323;
}

table.calendar {
margin: 5px auto;
}

.sbarcalendar {
width: 24px;
padding: 2px 0px;
text-align: center;
border: 1px solid #332323;
border-radius: 3px;
}

.sbarcalendarposts {
width: 24px;
padding: 0px;
text-align: center;
font-weight: bold;
background: #332323;
border: 1px solid #332323;
border-radius: 3px;
}

.sbarcalendarposts a {
display: block;
padding: 2px 0px;
}

.sbarcalendarposts a:hover {
background: #332D36;
}

.defaultuserpic {
margin: 8px 0px 15px 0px;
padding: 10px 7px;
text-align: center;
border-top: 1px solid #AE9B91;
border-bottom: 1px solid #AE9B91;
border-radius: 10px;
}

div + .defaultuserpic {
margin-top: 21px;
}

.tagcloud {
padding: 0px;
list-style: none;
}

#maincontent {
margin: 0px 15px 0px 230px;
padding-top: 63px;
text-align: left;
}

#maincontent > div[style*="margin"] {
margin: -15px auto 15px auto!important;
text-align: center;
}

.clearfoot {
height: 1px;
margin-bottom: 0px;
font-size: 0px;
clear: both;
}

#footer {
margin: 0px;
padding-right: 23px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
clear: both;
}

ul.navfooter{
margin: 0px;
padding: 6px 0px 8px 23px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/thetruthisinhere/beige.png) center repeat-x;
box-shadow: 0px -5px 5px -5px #191A22;
}

ul.navfooter li {
display: inline-table;
margin: 0px;
vertical-align: top;
}

ul.navfooter li + li {
margin-left: 10px;
}

ul.navfooter li.viewing {
width: 100px;
padding: 0px 5px;
font-size: 12px;
background: #333543;
}

ul.navfooter li a {
padding: 0px 5px;
font-size: 24px;
background: #333543;
}

#footer + .clearfoot {
display: none;
}

/* ------- ENTRIES & FRIENDS ------- */

.subcontent {
margin-bottom: 35px;
}

.userpic {
position: relative;
float: right;
margin: -7px 1px 5px 10px;
padding-top: 16px;
background: none!important;
z-index: 1;
}

.userpic img, .userpicfriends img {
border-top-right-radius: 8px;
}

.userpicfriends {
position: relative;
float: right;
margin: -7px 1px 5px 10px;
padding-top: 16px;
text-align: right;
font-size: 0px;
background: none!important;
z-index: 2;
}

.userpicfriends font {
position: absolute;
top: 1px;
right: 5px;
padding: 0px 2px 2px 2px;
color: #CB6A47;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
line-height: 12px;
}

.userpicfriends a font:hover {
background: #2B2D3B;
}

.userpicfriends font:active {
color: #D65729;
}

.userpicfriends a + br + a font {
top: 16px;
right: 0px;
padding-right: 7px;
background: url(http://fatfrog.info/Ma/A/layout/thetruthisinhere/blue75percent.png);
border-top-right-radius: 10px;
}

.userpicfriends a + br + a font:hover {
background: #2B2D3B;
}

.datesubject {
padding: 0px 110px;
text-align: center;
}

.date, .replytoposter {
position: relative;
display: inline;
padding: 0px 2px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
z-index: 2;
}

.subject, .replytosubject {
position: relative;
margin: -9px -110px 0px -110px;
padding: 1px 7px 0px 7px;
text-align: left;
font-size: 24px;
font-variant: small-caps;
border-top: 1px solid #AE9B91;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 1;
}

.entry {
padding: 10px 7px 0px 7px;
text-align: left;
border-bottom: 1px solid #AE9B91;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.ljtags, .currents {
margin: 8px -7px 0px -7px;
padding: 7px 7px 0px 7px;
border-top: 1px solid #332323;
border-radius: 10px;
}

.currents strong {
font-weight: normal;
}

.comments {
position: relative;
margin: 0px 0px -9px 0px;
padding: 0px 110px;
text-align: center;
font-size: 0px;
font-weight: bold;
font-variant: small-caps;
text-transform: capitalize;
letter-spacing: 1px;
}

.comments a {
padding: 0px 2px;
font-size: 12px;
background: #333544;
}

.comments a + a {
margin-left: 5px;
}

.comments a:hover {
background: #2B2D3B;
}

.separator {
display: none;
}

/* ------- COMMENTS ------- */

.skiplinks {
margin: 8px 0px 0px 0px;
text-align: center;
font-size: 0px;
border-top: 1px solid #332323;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.skiplinks a {
position: relative;
top: -10px;
padding: 0px 2px;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
}

.skiplinks a + a {
margin-left: 5px;
}

.skiplinks a:hover {
background: #2B2D3B;
}

.box {
margin-bottom: 15px;
}

.box center {
margin-bottom: 10px;
text-align: center;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
}

.box + .box {
margin: 30px 0px 3px 0px;
text-align: center;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
}

.box + .box select, .box + .box button {
letter-spacing: normal;
}

.box + .box center {
margin-top: 4px;
}

.commentbox {
margin-top: 35px;
padding: 0px 7px;
border: 1px solid #AE9B91;
border-radius: 10px;
}

.datesubjectcomment {
position: relative;
display: inline;
top: -9px;
padding: 0px 2px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
}

.datesubjectcomment strong {
font-size: 24px;
font-weight: normal;
letter-spacing: normal;
}

.userpiccomment {
float: left;
margin: 0px 10px 5px -7px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

.commentreply {
margin: 1px 0px 11px 0px;
}

.commentreply + div {
margin: 0px -7px 0px -7px;
padding: 7px 7px 0px 7px;
text-align: left!important;
font-size: 0px!important;
border-top: 1px solid #332323;
border-radius: 10px;
}

.commentreply + div a {
padding: 0px 2px;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
}

.commentreply + div a + a, .commentreply + div span a , .commentreply + div span + a {
margin-left: 5px;
}

.commentreply + div div {
padding: 2px 0px 8px 0px!important;
text-align: left!important;
font-size: 12px;
}

.commentreply + div div a + a {
margin-left: 3px;
}

.commentreply + div div label {
margin-right: 2px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
}

.commentreply + div div input {
margin-right: 5px;
}

.commentreply + div div img {
height: 15px;
width: 15px;
}

.commentboxpartial {
margin-top: 35px;
padding: 8px 7px 9px 7px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
border: 1px solid #AE9B91;
border-radius: 10px;
}

#qrform {
margin-bottom: 40px;
}

#qrform table {
margin: 0px auto;
border: none!important;
}

.commentbox #qrform {
margin-bottom: -15px;
}

.commentbox #qrform a, .commentbox #qrform label {
font-weight: normal;
font-variant: normal;
letter-spacing: normal;
}

#content input[type='text'], #content input.textbox, #content textarea {
padding: 2px 5px;
color: #AE9B91;
background: #332323;
border: none;
border-radius: 5px;
}

#content input[type='submit'], #content input[type='button'], button {
padding: 0px 3px;
color: #333544;
font-family: 'Roboto';
font-size: 11px;
font-weight: bold;
background: #AE9B91;
border: 2px solid #CB6A47;
border-left: none;
border-right: none;
border-radius: 5px;
}

#content input[type='submit']:active, #content input[type='button']:active {
position: relative;
top: 1px;
left: 1px;
}

textarea.textbox {
width: 95% !important;
}

.lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div {
display: none;
}

#postform table {
margin: 0px auto;
}

/* ------- CALENDAR ------- */

.lj-view-archive #maincontent br {
display: none;
}

ul.year {
margin: 8px 0px -14px 0px;
padding: 0px 10px;
text-align: center;
font-size: 0px;
border-top: 1px solid #332323;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

ul.year li {
position: relative;
display: inline;
top: -10px;
padding: 0px 2px;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
list-style: none;
background: #333544;
}

ul.year li + li {
margin-left: 5px;
}

table.yeartable {
margin: 35px auto 14px auto;
border-top: 1px solid #AE9B91;
border-bottom: 1px solid #AE9B91;
border-radius: 10px;
}

td.yearmonth {
padding: 0px 7px;
font-size: 24px;
font-variant: small-caps;
vertical-align: baseline;
}

td.yearmonth a {
font-size: 12px;
border-style: none;
}

table.yeartable td.yearday {
padding: 7px;
text-align: center;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
border: 1px solid #332323;
border-radius: 7px;
}

table.yeartable td.yeardate {
padding: 0px;
}

table.yeartable td.yeardate a {
display: block;
}

td.yeardate div {
padding: 2px 5px 0px 5px;
border: 1px solid #332323;
border-bottom: none;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}

td.yeardate div + div {
padding: 0px;
border-top: none;
border-bottom: 1px solid #332323;
border-radius: 0px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}

td.yeardate div + div a {
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}

.lj-view-month #maincontent form {
margin: 8px 0px -12px 0px;
text-align: center;
font-size: 0px;
border-top: 1px solid #332323;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br {
display: none;
}

.lj-view-month #maincontent form input, .lj-view-month #maincontent form select {
position: relative;
top: -11px;
margin-left: 5px;
}

.lj-view-month #maincontent form input:active {
top: -10px;
}

.lj-view-month #maincontent form a {
position: relative;
top: -12px;
padding: 0px 2px;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
}

.lj-view-month #maincontent form a:hover {
background: #2B2D3B;
}

.lj-view-month #maincontent form input + a {
margin-left: 5px;
}

.lj-view-month .entry {
padding: 0px;
font-size: 0px;
border-bottom: none;
border-radius: 0px;
}

.lj-view-month dt {
margin: 35px 0px 0px 0px;
padding: 0px 7px;
text-align: center;
border-top: 1px solid #AE9B91;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.lj-view-month dt a {
position: relative;
display: inline;
top: -9px;
padding: 0px 2px;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
}

.lj-view-month dt a:hover {
background: #332D36;
}

.lj-view-month dt b {
font-weight: normal;
}

.lj-view-month dd {
margin: -7px 0px 0px 0px;
padding: 0px 7px 11px 7px;
font-size: 12px;
border-bottom: 1px solid #AE9B91;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.lj-view-day .skiplinks {
margin-bottom: 17px;
}

.lj-view-day .separator + .clear + .clear + .skiplinks {
margin: -8px 0px 17px 0px;
border-top: none;
border-bottom: 1px solid #332323;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.lj-view-day .separator + .clear + .clear + .skiplinks a {
position: relative;
top: 8px;
padding: 0px 2px;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
}

.lj-view-day .separator + .clear + .clear + .skiplinks a + a {
margin-left: 5px;
}

.lj-view-day .separator + .clear + .clear + .skiplinks a:hover {
background: #2B2D3B;
}

/* ------- TAGS ------- */

.lj-view-tags #maincontent {
text-align: center;
}

.lj-view-tags h2 {
display: inline;
margin: 0px;
padding: 0px 2px;
font-size: 12px;
font-variant: small-caps;
letter-spacing: 1px;
background: #333544;
}

ul.ljtaglist {
margin: -9px 0px 15px 0px;
padding: 7px 7px 3px 7px;
text-align: left;
list-style: none;
border-top: 1px solid #AE9B91;
border-bottom: 1px solid #AE9B91;
border-radius: 10px;
}

ul.ljtaglist li {
margin: 0px;
padding: 3px 0px;
}

ul.ljtaglist li + li {
border-top: 1px solid #332323;
}

/* ------- in case of mysterious gaps ------- */

script + div[style*="width"] div, #sidebar .box-after-first-widget div {
background: url(http://fatfrog.info/Ma/A/layout/blockedad.png);
}



This profile layout is flexible in width and height.

Go to Edit Profile and insert the code into the Bio part.
To copy the code, click in the text area and then press Ctrl+A and Ctrl+C.






 

LEFT CONTENT HERE

  

RIGHT CONTENT HERE

 
http://fatfrog.info/Ma/A/layout/thetruthisinhere/profile-ScullyMulder-top.png"> 
http://fatfrog.info/Ma/A/layout/thetruthisinhere/profile-ScullyMulder-bottom.png">


You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with
and
. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key.

If you want to change the link color, put a font tag with a different color in your link. Like so:
LINK TEXT

- layouts, the x-files

Previous post Next post
Up