tesscodes | Layout: Film Grain

Information

Hey guys! Today's layout is actually two matching layouts in one, yay! Choose a page setup in your dropdown to pick different configurations, including no sidebar info, a top sidebar with custom configuration, and a standard sidebar, and off you go! This layout also supports three header images and a sidebar image in the standard sidebar configuration, and is optimized for mobile; enjoy! ♥

Layout Coding

/*-- FILM GRAIN - TESSISAMESS - 2018 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* FONTS */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;src:local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* GENERAL CLASSES */

body{margin:0;padding:0;background:#fff;font-family:Montserrat,century gothic,helvetica,arial,sans-serif;font-size:15px;color:#111;}

blockquote{font-style:italic;}
h1,h2,h3,h4,h5,h6{font-family:Oswald,arial black,sans-serif;text-transform:uppercase;letter-spacing:2px;font-weight:normal;color:#000;}

a, a:visited, a:active{color:#000;text-decoration:none;}
a:hover{text-decoration:none;opacity:0.5;}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;}

.layout-one-column #alpha{margin:0;}

.layout-two-column-left #alpha{margin:0;}
.layout-two-column-left #beta{float:none;width:100%;}

.layout-two-column-right #alpha{margin:0 32% 0 0;padding-right:4vw;}
.layout-two-column-right #beta{float:right;width:32%;}

/* HEADER */

#header{margin:60px 23vw 0 23vw;padding:0;color:#000;background:#ddd url(https://i.imgur.com/JGGRP5w.jpg)center;background-size:cover;position:relative;}
#header:before, #header:after{content:'';width:22vw;position:absolute;top:0;bottom:0;}
#header:before{background:#ddd url(https://i.imgur.com/mUsUoji.jpg)center;background-size:cover;border-right:1vw solid #fff;left:-23vw;}
#header:after{background:#ddd url(https://i.imgur.com/AarZe3Q.jpg)center;background-size:cover;border-left:1vw solid #fff;right:-23vw;}

#header-inner{padding:170px 0;}

#nav-above{position:absolute;z-index:100;top:-60px;right:-23vw;height:60px;line-height:60px;list-style:none;margin:0 30px 0 0;padding:0;font-family:Oswald,arial black,sans-serif;font-size:14px;letter-spacing:2px;text-transform:uppercase;}
#nav-above li:last-of-type, #nav-below{display:none;}
.banner-viewlinks{display:inline;padding:0;border:none;}
#nav-above a, .current a{color:#000;}
#nav-above a{display:inline-block;margin:0;padding:0 10px;}
.current a{font-weight:bold;}

#header-text{background:rgba(0,0,0,0.5);border:none;margin:0 25%;padding:20px;color:#fff;text-transform:uppercase;letter-spacing:2px;}
#header-text a{color:#fff;}

#banner-header{font-family:Oswald,arial black,sans-serif;text-align:center;margin:0;}
#banner-description{font-family:Oswald,arial black,sans-serif;text-align:center;font-size:large;margin:0;}

/* BODY OF PAGE */

#pagebody{padding:5vw 0;}
#pagebody-inner{width:53vw;margin:0 auto;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;}

#alpha a, #alpha a:visited{color:#000;}
#alpha a:hover{text-decoration:none;}

.content-nav{margin:.5em 1em;}
.nav-top{display:none;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry-inner{border:none;}

#sticky-note .entry-header{text-align:center;color:#fff;background:#333;padding:7px;line-height:1;}
#sticky-note .entry-header:after{display:none;}
#sticky-note .entry-header h2{margin:0;padding:0;color:#fff;}

#sticky-note .entry-text{min-height:0;padding:0;}

#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0 0 60px 0;padding:0;position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header-inner{background:#333;height:40px;line-height:40px;}
.entry-header:after{content:'';display:block;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #333;margin:0 25px -8px 0;float:right;}

.entry-header h3{margin:0;padding:0;color:#fff;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#fff;}

.entry-datetime{position:absolute;top:0;right:10px;height:40px;line-height:40px;font-family:Oswald,arial black,sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:8px;color:rgba(255,255,255,0.5);}

.mid-entry-userpic{display:initial;float:left;text-align:center;padding:0;margin:0 10px 0 0;}
.mid-entry-userpic img{width:40px;height:40px;}
.outer-entry-userpic, .inner-entry-userpic{display:none;}

.pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000;margin:-10px auto 5px auto;}
.pic-poster{left:-27px;position:absolute;background:#000;margin-top:-30px;padding:5px;text-align:center;line-height:1;font-size:11px;letter-spacing:1px;text-transform:uppercase;display:block;width:85px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);opacity:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
.mid-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;}
.pic-poster img{display:none;}

.ljuser{font-family:Oswald,arial black,sans-serif;letter-spacing:1px;text-transform:uppercase;}

.entry-content{margin-top:20px;}
.entry-text{min-height:100px;overflow:auto;text-align:justify;line-height:1.7;}
.entry-text a{font-weight:bold;}
.entry-text img{max-width:100%;}

.ljtags{margin:20px 0 0 0;font-family:Oswald,arial black,sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:rgba(0,0,0,0.4);}

.entry-metadata{display:none;}

.entry-linkbar{margin:20px 0 0 0;font-family:Oswald,arial black,sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;text-align:right;}
.entry-linkbar ul{list-style:none;padding:0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;}
.entry-linkbar li a{display:inline-block;margin-left:15px;color:#000!important;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;}

/* ARCHIVE VIEW */

.lj-view-archive .entry-content{margin-top:0;}
.yearlinks{text-align:center;font-family:Oswald,arial black,sans-serif;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-size:30px;}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:collapse;border:4px solid transparent;width:100%;}
td.monthlable, td.viewmonth{font-family:Oswald,arial black,sans-serif;letter-spacing:2px;text-transform:uppercase;background:transparent!important;font-size:20px;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{font-family:Oswald,arial black,sans-serif;letter-spacing:2px;text-transform:uppercase;text-align:center;background:#000!important;color:#fff;font-size:18px;}
.yeartable td{border:3px solid #fff!important;background:rgba(0,0,0,0.1);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha h2{font-size:30px;margin:0;}

.ljtaglist{margin:0;padding:0;list-style:none;}
.ljtaglist li{margin-top:5px;}

/* SIDEBAR */

.layout-two-column-right #beta-inner:before{content:'';display:block;height:34vh;margin:0 0 60px 0;background:#ddd url(https://i.imgur.com/tucguZ8.jpg)center;background-size:cover;}
#beta-inner{font-size:14px;color:#111;}

.module{padding:0;background:transparent;margin:0 0 60px 0;border:none;}

.layout-two-column-left .module-header{display:none;}
.module-header{text-align:center;border:none;background:transparent;}
.module-header:after{content:'';display:block;width:15%;height:3px;margin:20px auto;background:rgba(0,0,0,0.4);}
.module-header h3{margin:0;padding:0;color:#000;}
.module-header a, .module-header a:visited{color:#000;}

.module-customtext .module-header{display:block;}
.module-customtext .module-content{padding:0;line-height:1.6;text-align:justify;}

.layout-two-column-left .module-typelist ul{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;}
.layout-two-column-left .module-typelist li{width:23%;margin:0 1%;}
.module-typelist ul{list-style:none;margin:0;padding:0;font-family:Oswald,arial black,sans-serif;letter-spacing:2px;text-transform:uppercase;}
.module-typelist li a{display:block;padding:5px;border-bottom:1px solid rgba(0,0,0,0.1);}

.lj-view-recent .module-pagesummary{display:none;}
.module-pagesummary ul{list-style:none;margin:0;padding:0;font-family:Oswald,arial black,sans-serif;letter-spacing:2px;text-transform:uppercase;}
.module-pagesummary li a{display:block;padding:5px;border-bottom:1px solid rgba(0,0,0,0.1);}

#tag-hierarchy ul{padding:0;margin:0;list-style:none;}
#tag-hierarchy li:first-of-type{margin-top:0;}
#tag-hierarchy li{margin-top:20px;font-family:Oswald,arial black,sans-serif;letter-spacing:2px;text-transform:uppercase;}
#tag-hierarchy li ul{border-top:1px solid rgba(0,0,0,0.1);}
#tag-hierarchy li li{margin-top:0;}
#tag-hierarchy li li a{font-family:Montserrat,century gothic,helvetica,arial,sans-serif;text-transform:none;letter-spacing:0;}

.all-link{font-family:Oswald,arial black,sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;text-align:center;}
.all-link p{margin:0;}

.module-layoutcredit{position:absolute;right:10px;top:0;margin:0;height:60px;line-height:60px;font-family:Oswald,arial black,sans-serif;letter-spacing:2px;text-transform:uppercase;text-align:center;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;}

.layout-two-column-left .module-categories, .layout-two-column-left .module-pagesummary{display:none;}
.module-calendar, .module-viewlinks, .module-customtext2, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

img[src*="img/userinfo.gif"], img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/YlofFIe.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:3px!important;}

img[src*="img/icon_protected.gif"], img[src*="img/community.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/XnO8SxL.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;}

/* FOR MOBILE */

@media only screen and (max-width:900px){
.layout-two-column-right #alpha{margin:0;padding:0;}
.layout-two-column-right #beta{float:none;width:auto;margin-bottom:3vw;}
}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle if desired, then save.
♡ Fill in your Links List if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:

♡ Supported Layout Types:
One Column This gives you a header and entries-only layout
Two Column (Sidebar on Left) This gives you a large topbar under your header
Two Column (Sidebar on Right)This gives you a standard righthand sidebar
♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: Recent/Archive/Friends/Profile Important!
♡ Fill in sticky note if desired.
♡ Fill in custom sidebar module if desired.
♡ Person to credit if you have an individually created layout: © Important!
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

Montserrat - Page text
Oswald - Header text

IMAGES

https://i.imgur.com/mUsUoji.jpg - Left header image
https://i.imgur.com/JGGRP5w.jpg - Center header image
https://i.imgur.com/AarZe3Q.jpg - Right header image
https://i.imgur.com/tucguZ8.jpg - Sidebar image
http://i.imgur.com/YlofFIe.png - User and private icons
http://i.imgur.com/XnO8SxL.png - Comm and locked icons

COLORS

255,255,255 Entry date

#fff Page background, header borders and text, entry subject text, some calendar elements

#333 Entry header background and arrow

#111 Page text

#000 Links and headings, userpic hover info background, some calendar elements

0,0,0 Header titles background, entry tags, sidebar heading border, sidebar links borders

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!