Filed Under X layout

[fuesch]

The layout for August is a bit late, because I made it for an entry in xf_is_love and my posting day there is only today. So here's my first X-Files layout - better late than never, I know! For what feels like ages I had wanted to make this layout and now I've finally done it, thanks to this community.

Filed Under X
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 22, Google Chrome 28 and Internet Explorer 10. You shouldn't make the content/sidebar/maincontent any wider, but if you want, you could make it narrower. That would require some adjusting of other elements, though. Not having the possibility to determine a point around which to rotate is really annoying! It rotates around the middle of the element. So if you have more than 4 tabs in the navheader, you’ll have to change top. But I’ve set it to a certain width, so as long as you have 6 tabs or less, you don’t have to change left.
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 /* Filed Under X http://fuesch.livejournal.com/40447.html */ @font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; src: local('Special Elite'), local('SpecialElite-Regular'), url(http://themes.googleusercontent.com/static/fonts/specialelite/v3/9-wW4zu3WNoD5Fjka35Jm_n8qdNnd5eCmWXua5W-n7c.woff) format('woff'); } body { margin: 0px; padding: 10px 0px 0px 0px; text-align: center; font-family: 'Special Elite', "Times New Roman", Times, serif; color: #4B4335; font-size: 12px; background: #D0954B url(http://fatfrog.info/Ma/A/layout/filedunderx/desk.png); } body > div[style*="width"] { margin: 10px auto 10px 10px!important; padding: 0px!important; background-color: none!important; border: none!important; } a, a:link { color: #1034AA; text-decoration: none; } a:visited { color: #425CB4; text-decoration: none; } a:hover { color: #1034AA; text-decoration: underline; } a:active { color: #003CFF; text-decoration: none; } code, kbd, pre, tt { padding: 0px 2px; font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000000; background: #E6DDCF; } p, td, blockquote { font-size: 12px; } /* ------- GENERAL ------- */ .clear { display: none; } .ljuser a { font-size: 10px; text-transform: uppercase; } .ljuser a b { font-weight: normal; } .headerimage { width: 963px; height: 358px; margin: 0px auto 0px 0px; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/header.png); } #content-outer { background: url(http://fatfrog.info/Ma/A/layout/filedunderx/content-outer.png); } #content { width: 936px; margin: 0px auto 0px 0px; padding: 20px 20px 20px 0px; text-align: left; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/folder.png); border-top-right-radius: 20px 40px; border-bottom-right-radius: 20px 40px; } #header { position: relative; width: 665px; margin: 0px 0px 0px 265px; text-align: left; z-index: 1; } ul.navheader { position: absolute; display: table; left: 232px; top: 100px; width: 950px; padding: 0px; text-align: right; text-transform: uppercase; letter-spacing: 1px; transform:rotate(90deg); -ms-transform:rotate(90deg); -webkit-transform:rotate(90deg); } ul.navheader li { position: relative; display: inline-block; width: 155px; height: 24px; margin: 0px; padding: 20px 5px 0px 5px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/tab.png); z-index: 6; } ul.navheader li + li { margin: 0px 0px 0px -23px; z-index: 5; } ul.navheader li + li + li { z-index: 4; } ul.navheader li + li + li + li { z-index: 3; } ul.navheader li + li + li + li + li { z-index: 2; } ul.navheader li + li + li + li + li + li { z-index: 1; } ul.navheader li a { display: block; } .view { background: url(http://fatfrog.info/Ma/A/layout/filedunderx/tab-active.png)!important; z-index: 10!important; } .title { margin: 0px 0px -180px -10px; padding: 10px 10px 220px 10px; font-size: 18px; font-variant: small-caps; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/paper.png); transform: rotate(-4deg); -ms-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); box-shadow: 1px 0px 4px #B1A48B; z-index: 2; } .subtitle { position: relative; left: 10px; margin: 0px 0px -310px 0px; padding: 10px 10px 310px 10px; font-size: 16px; font-variant: small-caps; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/paper.png); transform: rotate(3deg); -ms-transform: rotate(3deg); -webkit-transform: rotate(3deg); box-shadow: 1px 0px 4px #B1A48B; z-index: 2; } #sidebar { display: inline-table; width: 190px; margin: -80px 0px 0px 0px; padding: 0px 15px; vertical-align: top; text-align: left; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/paper.png); box-shadow: 1px 0px 4px #B1A48B; } #sidebar > div + div { border-top: 1px solid #A29C91; } #sidebar > div[style*="width"] { width: 190px!important; margin: 0px 0px 15px 0px!important; padding: 15px 0px 0px 0px; text-align: center; } .sbarbody { margin: 0px 0px 15px 0px; } .sbarbody2 { margin: -15px 0px 15px 0px; padding: 5px 0px 0px 0px; border-top: none!important; } ul.sbarlist { margin: 0px; padding: 0px; list-style: none; } ul.sbarlist + .sbarlist { margin: 0px 0px 15px 0px; padding: 0px; list-style: none; } li.sbartitle { padding: 15px 0px 0px 0px; list-style: none; font-size: 18px; } li.sbaritem { margin: 0px 0px 0px 13px; padding: 5px 0px 0px 0px; list-style: circle; } table.calendar { margin: 0px auto; } .sbarcalendar { padding: 5px 4px 2px 4px; text-align: center; border: 1px solid #A29C91; } .sbarcalendarposts { padding: 5px 4px 2px 4px; text-align: center; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/folder.png) left; border: 1px solid #A29C91; } .sbarcalendarposts a { display: block; } .defaultuserpic { margin: 0px 0px 15px 0px; padding: 15px 0px 0px 0px; text-align: center; } .tagcloud { padding: 5px 0px 0px 0px; list-style: none; } .tagcloud span { padding-right: 5px; vertical-align: middle; } #maincontent { position: relative; display: inline-table; width: 635px; margin: 0px 0px 0px 41px; padding: 15px 15px 0px 15px; text-align: left; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/paper.png); box-shadow: 1px 0px 4px #B1A48B; z-index: 2; } #maincontent > div[style*="margin"] { margin: 15px auto!important; padding-top: 15px; text-align: center; border-top: 1px solid #A29C91; } #footer { position: relative; width: 645px; margin: -120px 0px 0px 270px; padding: 140px 10px 10px 10px; text-align: center; text-transform: uppercase; letter-spacing: 1px; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/paper.png); transform: rotate(-3deg); -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); box-shadow: 1px 0px 4px #B1A48B; z-index: 1; clear: both; } ul.navfooter{ margin: 0px; padding: 0px; } ul.navfooter li { margin: 0px 10px; display: inline; } .clearfoot { display: none; } /* ------- ENTRIES & FRIENDS ------- */ .subcontent { margin-bottom: 15px; } .clear + a + .subcontent { padding-top: 15px; border-top: 1px solid #A29C91; } .userpic { position: relative; float: left; margin: 3px 10px 10px -10px; padding: 10px; background: #FBFAF7!important; transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); box-shadow: 1px 0px 4px #DBCBAE; z-index: 1; } .userpicfriends { position: relative; float: left; margin: 3px 10px 10px -10px; padding: 10px; text-align: center; font-size: 10px; background: #FBFAF7!important; transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); box-shadow: 1px 0px 4px #DBCBAE; z-index: 1; } .userpicfriends img { padding-bottom: 10px; } .userpicfriends font { color: #1034AA; } .userpicfriends font:hover { text-decoration: underline; } .datesubject { position: relative; min-height: 45px; margin: 0px 0px 0px -41px; padding: 0px 0px 12px 0px; background: url(http://fatfrog.info/Ma/A/layout/filedunderx/paperclip.png) left top no-repeat; z-index: 2; } .date, .replytoposter { padding: 0px 0px 5px 0px; } .subject, .replytosubject { font-size: 24px; } .subject .ljuser img[src*="userinfo.gif"], .replytosubject .ljuser img[src*="userinfo.gif"], .subject .ljuser img[src*="community.gif"], .replytosubject .ljuser img[src*="community.gif"] { padding: 0px 2px 7px 0px !important; } .subject .ljuser a, .replytosubject .ljuser a { font-size: 24px; } .entry { text-align: left; } .ljtags, .currents { margin-top: 12px; font-size: 11px; font-variant: small-caps; letter-spacing: 1px; } .currents strong { font-weight: normal; } .comments { margin-top: 12px; text-align: right; text-transform: uppercase; letter-spacing: 1px; } .separator { display: none; } /* ------- COMMENTS ------- */ .skiplinks { margin-bottom: 15px; padding: 0px 0px 10px 0px; text-align: center; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #A29C91; } .box { padding-top: 15px; border-top: 1px solid #A29C91; } .box center { margin-bottom: 15px; } .box center b { font-weight: normal; } .box + .box center { margin-top: 15px; } .commentbox { margin: 0px 0px 15px 0px; padding: 0px 5px 0px 0px; } .datesubjectcomment { padding: 10px; background: #F9F6C8; border-top: 1px solid #F1EEDB; border-right: 1px solid #E9E6D2; } .datesubjectcomment strong { padding-top: 5px; font-size: 18px; font-weight: normal; } .userpiccomment { float: left; margin: -1px 10px 5px 0px; } .commentreply { padding: 10px; background: #F7F4C6; border-right: 1px solid #E9E6D2; } .commentreply + div { margin: 0px -5px 0px 0px!important; padding: 5px 30px 10px 10px; text-align: right!important; text-transform: uppercase; letter-spacing: 1px; background: #F7F4C6 url(http://fatfrog.info/Ma/A/layout/filedunderx/comments.png) right bottom no-repeat; } .commentreply + div div { padding: 5px 0px 0px 0px!important; text-align: right!important; } .commentreply + div div img { vertical-align: bottom; } .commentboxpartial { margin: 0px 0px 15px 0px; padding: 10px; background: #F9F6C8; border-top: 1px solid #F1EEDB; border-right: 1px solid #E9E6D2; } #qrform { margin: 0px auto 15px auto; } #qrform table { border: none!important; } input, textarea { padding: 2px; color: #4B4335; background: none; border: 1px solid #DFDBD4; box-shadow: inset 1px -1px 4px #D6D4D0; } input[type='radio'], input[type='checkbox'] { padding: 0px; background: none; } input[type='submit'], input[type='button'] { padding: 3px 4px 1px 4px; font-family: 'Special Elite', "Times New Roman", Times, serif; box-shadow: inset 3px -3px 4px #FBFAF7; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; } input[type='submit']:active, input[type='button']:active { position: relative; top: 1px; left: 1px; box-shadow: inset 3px -3px 4px #FAF8F2; } .commentbox #qrform { margin: 0px auto; text-align: left; text-transform: none; letter-spacing: 0px; } .commentbox input, .commentbox textarea { border: 1px solid #E6E3B5; box-shadow: inset 1px -1px 4px #E0DDAF; } .commentbox input[type='submit'], .commentbox input[type='button'] { box-shadow: inset 3px -3px 4px #FFFFCB; border-left: 1px solid #FFFFCB; border-bottom: 1px solid #FFFFCB; } .commentbox input[type='submit']:active, .commentbox input[type='button']:active { box-shadow: inset 3px -3px 4px #FDF9C5; } textarea.textbox { width: 95% !important; } .lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div { display: none; } #postform { margin: 0px auto 15px auto; } /* ------- CALENDAR ------- */ .lj-view-archive #maincontent br { display: none; } ul.year { margin: 0px; padding: 0px 0px 10px 0px; text-align: center; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #A29C91; } ul.year li { padding: 0px 5px; display: inline; } table.yeartable { width: 100%; margin: 0px auto 15px auto; padding-top: 15px; } table.yeartable + br + br + br + table { border-top: 1px solid #A29C91; } td.yearmonth { font-size: 24px; vertical-align: bottom; border-style: none; } td.yearmonth a { font-size: 12px; border-style: none; } table.yeartable td.yearday { padding: 15px; text-align: center; text-transform: uppercase; letter-spacing: 1px; border: 1px solid #A29C91; } table.yeartable td.yeardate { padding: 0px; } table.yeartable td.yeardate a { display: block; } td.yeardate div { padding: 5px; border: 1px solid #A29C91; border-bottom: none; } td.yeardate div + div { padding: 0px 5px; font-size: 18px; border-top: none; border-bottom: 1px solid #A29C91; } .lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br { display: none; } .lj-view-month .entry { font-size: 0px; } .lj-view-month dt { margin: 15px 0px 0px 0px; padding: 15px 0px 1px 0px; font-size: 24px; border-top: 1px solid #A29C91; } .lj-view-month dt b { font-weight: normal; } .lj-view-month dd { margin: 0px; padding: 4px 0px 0px 0px; font-size: 12px; } .lj-view-day .skiplinks { margin-bottom: 0px; border-bottom: none; } .lj-view-day .separator + .clear + .clear + .skiplinks { padding-top: 15px; border-top: 1px solid #A29C91; } /* ------- TAGS ------- */ .lj-view-tags h2 { margin: 0px; font-size: 24px; font-weight: normal; } ul.ljtaglist { margin: 0px; padding: 0px 0px 15px 0px; list-style: circle; } ul.ljtaglist li { margin: 0px 0px 0px 13px; padding: 5px 0px 0px 0px; }

Comments

[emeraldarrows.livejournal.com]

This is awesome! Saving for later. <3

[wendelah1]

One of our members is now using it. It's an amazing layout. Thank you again for making and sharing it.

http://sharo-8760.livejournal.com/70522.html

[fuesch]

Yay! And thanks for letting me know.

[badforthefish.livejournal.com]

Oooh!!! Just when I was telling myself: I really need a decent layout for my LJ. I'm snatching this thank you so much, this is fabulous!

Edited for quick question: How can I make the subtitle card at the top smaller?

[fuesch]

Smaller in width/height or do you mean the font?

[badforthefish.livejournal.com]

Sorry, I meant in height, because you end up with this mostly blank card with only the subtitle at the top. Although...hmm...looking at it now I see how it is necessary to leave room for the links and calendar, maybe changing the height will disrupt the rest of the layout?

[fueschgast]

Oh, you mean because the entries are pushed down? That's caused by wide pictures stretching the maincontent. Usually the rest of the subtitle paper is hidden.

[badforthefish.livejournal.com]

Thanks, I sorted it. One of the pics in an entry was just too wide. I love this layout, it's like having a new LJ home. Thank you again!