Tessisamess

image preview | tess066

Information

Hey guys! I got a bug up my ass to make another social media-inspired layout, this time based on Instagram! Except with usable journal entries haha. ALL icons are quickly customizable by searching the Material Icons directory and replacing the text, so this doesn't necessarily have to have a social media feel. Enjoy! ♥

Layout Coding

/*-- SOCIETAL - TESSISAMESS - 2019 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --darkest: #000; /* page links; header text and links; topbar text; custom button icons; link list link hover border */ --darker: #222; /* page text */ --medium: #999; /* entry date & tags; entry link hover */ --lightest: #fff; /* header background; custom blurb link hover background; entry background */ --light-accent: #f9f9f9; /* page background */ --accent: #296d8e; /* page link hover; headings; entry links; custom blurb link text */ --borders: rgba(0,0,0,0.1); --main-font: Roboto,helvetica,arial,sans-serif; --headings: Quicksand,helvetica,arial,sans-serif; --title-font: Quicksand,helvetica,arial,sans-serif; --width: 1000px; --pic: url(TOPBAR_PIC)center; /* HEADER ICONS */ --title-icon: 'favorite_outline'; --recent: 'person_outline'; --profile: 'favorite_border'; --friends: 'people_outline'; --archive: 'access_time'; /* CUSTOM BLURB ICONS */ --add: 'add_circle_outline'; --tags: 'clear_all'; --contact: 'mail_outline'; /* LINKS LIST ICONS */ --link-1: 'star_border'; --link-2: 'bookmark_border'; --link-3: 'done_all'; --link-4: 'favorite_border'; --link-5: 'attach_file'; --link-6: ''; --link-7: ''; --link-8: ''; --link-9: ''; --link-10: ''; --private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important; --locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important; --customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important; } /* FONTS */ @font-face{font-family:'Quicksand';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/quicksand/v13/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.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:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.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:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} /* GENERAL */ ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} *{box-sizing:border-box;} body{margin:0;padding:0;background:var(--light-accent);font-family:var(--main-font);font-size:14px;color:var(--darker);} blockquote{font-style:italic;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);text-transform:lowercase;margin:0;color:var(--accent);} img{max-width:100%;} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--darkest);text-decoration:none;} a:hover{text-decoration:none;color:var(--accent);} .ljuser{font-weight:bold;} .ljuser a[href*="profile"] img{display:none;} .ljuser a[href*="profile"]:before{content:'@';} .ljuser a[href*="asylum"][href*="profile"]:before{content:'#';} /* WHOLE PAGE CONTAINERS */ #container{background:transparent;} .layout-two-column-left #alpha, .layout-two-column-right #alpha{margin:0;} .layout-two-column-left #beta, .layout-two-column-right #beta{float:none;width:auto;} .layout-two-column-right.lj-view-recent #alpha-inner{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;-webkit-column-width:320px;-moz-column-width:320px;column-width:320px;} .layout-two-column-right .entry{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;} .layout-two-column-right .content-nav, .layout-two-column-right #tagpage-header, .layout-two-column-right .yearlinks{-webkit-column-span:all;column-span:all;} .layout-two-column-right #tagpage-header h2{margin:40px 0;} /* HEADER */ #header{padding:10px;color:var(--darkest);position:sticky;top:0;background:var(--lightest);box-shadow:0 0 2px 1px rgba(0,0,0,0.1);z-index:3;} #header-inner{max-width:var(--width);margin:0 auto;} #banner-text{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;} #nav-above{list-style:none;margin:0;padding:0;font-size:0;font-family:Material Icons;} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks a{font-size:0;margin:0 0 0 15px;} .banner-viewlinks a:after{font-size:22px;} .banner-viewlinks a[href$='com/']:after{content:var(--recent);} .banner-viewlinks a[href*='calendar']:after{content:var(--archive);} .banner-viewlinks a[href*='friends']:after{content:var(--friends);} .banner-viewlinks a[href*='profile']:after{content:var(--profile);} .banner-viewlinkslast-of-type{display:none;} .current a{color:var(--darkest);} #header-text{background:transparent;border:none;margin:0;padding:0;display:flex;} #banner-header{font-family:var(--title-font);text-align:center;margin:0;font-size:22px;border-left:2px solid var(--darkest);padding:0 0 0 6px;line-height:1;} #header-text:before{content:var(--title-icon);font-family:Material Icons;font-size:25px;margin:0 5px 0 0;} #banner-description{display:none;} /* BODY OF PAGE */ #pagebody{padding:40px;} #pagebody-inner{max-width:var(--width);margin:0 auto;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--medium);} .content-nav{margin:30px 0 0 0;font-weight:bold;font-size:11px;text-transform:uppercase;letter-spacing:1px;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:40px;font-weight:bold;font-size:11px;text-transform:uppercase;letter-spacing:1px;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:center;color:var(--accent);} #sticky-note .entry-header h2{margin:0;padding:0;} #sticky-note .entry-text{padding:30px;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 30px 0;padding:0;background:var(--lightest);border:1px solid var(--borders);position:relative;} .entry-header{background:transparent;border:none;padding:10px;border-bottom:1px solid var(--borders);} .entry-header-inner{display:flex;align-items:center;} .entry-header h3{margin:0;padding:0;font-size:22px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{font-weight:bold;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--medium);position:absolute;bottom:10px;left:10px;} .mid-entry-userpic{display:block;float:left;text-align:center;padding:0 15px 0 0;} .mid-entry-userpic img{max-width:40px;max-height:40px;border-radius:100%;} .outer-entry-userpic, .inner-entry-userpic, .pic-poster{display:none;} .header-poster{display:flex;justify-content:flex-end;font-size:9px;text-transform:uppercase;letter-spacing:1px;padding:5px 10px;border-bottom:1px solid var(--borders);} .header-poster img{display:none;} .header-poster a[href*="profile"]{display:none;} .header-poster .ljuser:before{content:'Posted by ';} .header-poster .ljuser ~ .ljuser:before{content:'in ';margin:0 0 0 4px;} .entry-content{margin-top:0;} .entry-text{padding:30px;min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:20px 0 0 0;text-align:left;font-weight:bold;font-size:0;text-transform:uppercase;letter-spacing:1px;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--accent);margin:0 10px 0 0;font-size:10px;} #alpha .ljtags a:before{content:'#';} .entry-metadata{display:none;} .entry-linkbar{margin:0;padding:10px;border-top:1px solid var(--borders);text-align:right;font-weight:bold;font-size:10px;text-transform:uppercase;letter-spacing:1px;} .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{margin:0 5px 0 0;} .entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;} /* ARCHIVE VIEW */ .yearlinks{text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;} .year{list-style:none;margin:0;padding:0;} .year li{display:inline;padding:0;} .lj-view-archive .entry-content{margin:0;padding:30px;} .yeartable{border-collapse:separate;border:none;width:100%;} td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;} td.monthlable{text-align:left;} td.viewmonth{text-align:right;} .dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--darkest)!important;color:var(--lightest);} .yeartable td{border:none!important;background:rgba(0,0,0,0.05);padding:5px;} /* TAGS & MONTH VIEW */ .lj-view-tags #alpha, .lj-view-month #alpha{background:var(--lightest);padding:30px;border:1px solid var(--borders);} /* SIDEBAR */ #beta-inner{margin:0 0 40px 0;padding:0 100px;font-size:small;color:var(--darkest);display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:'pic custom custom custom' 'pic custom custom custom' 'links links links links';} .module{padding:0;background:transparent;margin:0;border:none;display:flex;align-items:center;} .module-header{display:none;background:transparent;border:none;} .module-header h3{margin:0;padding:0;font-size:29px;color:var(--accent);} .module-header a, .module-header a:visited{color:var(--accent);} .module-about{grid-area:pic;height:170px;} .module-about .module-inner{width:170px;height:170px;background:var(--medium) var(--pic);background-size:cover;border-radius:100%;} .module-about .module-content{text-align:center;padding:0;} .userpic img{border:none;width:200px;height:200px;opacity:0;} .username, .journalname, .usersite{display:none;} .module-customtext{grid-area:custom;} .module-customtext .module-inner{padding:0 0 0 40px;} .module-customtext .module-header{display:block;} .module-customtext a{font-weight:bold;} .btns{display:flex;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:1px;} .btns a{display:flex;align-items:center;justify-content:center;margin:0 10px 0 0;padding:3px 10px;border:1px solid var(--borders);border-radius:3px;color:var(--accent);} .btns a:hover{background:var(--lightest);} .btns a:before{font-family:Material Icons;text-transform:none;font-weight:normal;letter-spacing:0;font-size:24px;margin:0 8px 0 0;color:var(--darkest);} .add:before{content:var(--add);} .tags:before{content:var(--tags);} .msg:before{content:var(--contact);} .module-typelist{grid-area:links;justify-content:center;align-items:flex-end;text-align:center;font-weight:bold;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin:0 -100px;} .module-typelist .module-inner{width:100%;border-top:1px solid var(--borders);} .module-typelist ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;} .module-typelist li{width:100%;} .module-typelist li a{display:flex;align-items:center;justify-content:center;margin:-1px 3px 0 3px;padding:15px 0 0 0;border-top:1px solid transparent;} .module-typelist li a:hover{border-top:1px solid var(--darkest);} .module-typelist li a:before{font-family:Material Icons;text-transform:none;font-weight:normal;letter-spacing:0;font-size:14px;margin:0 4px 0 0;} .module-typelist li:nth-of-type(1) a:before{content:var(--link-1);} .module-typelist li:nth-of-type(2) a:before{content:var(--link-2);} .module-typelist li:nth-of-type(3) a:before{content:var(--link-3);} .module-typelist li:nth-of-type(4) a:before{content:var(--link-4);} .module-typelist li:nth-of-type(5) a:before{content:var(--link-5);} .module-typelist li:nth-of-type(6) a:before{content:var(--link-6);} .module-typelist li:nth-of-type(7) a:before{content:var(--link-7);} .module-typelist li:nth-of-type(8) a:before{content:var(--link-8);} .module-typelist li:nth-of-type(9) a:before{content:var(--link-9);} .module-typelist li:nth-of-type(10) a:before{content:var(--link-10);} .module-layoutcredit{position:fixed;left:20px;bottom:20px;font-family:var(--headings);font-size:22px;font-weight:bold;} .module-layoutcredit p{padding:0;margin:0;} .module-customtext2, .module-viewlinks, .module-pagesummary, .module-calendar, .module-categories, .module-syndicate, .module-powered, .module-ads{display:none;} /* CONTENT FOOTER */ #content-footer{clear:both;height:0;} /* ICON REPLACEMENTS */ img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;} img[src*="img/icon_private.gif"]{background:transparent var(--private);} img[src*="img/icon_protected.gif"]{background:transparent var(--locked);} img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title, 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:

♡ Layout Type:

Two Column (Sidebar on Left) - No Columns
Two Column (Sidebar on Right) - Columns

♡ Disable customized comment pages for your journal: Yes
♡ Show Userpics on Entries: Can choose No to disable outside of Friends Page.
♡ Fill in sticky note if desired.
♡ Title to use for custom text sidebar module: Your topbar title (use next field to turn it into a journal link if desired)
♡ Fill in custom sidebar module:

YOUR_BLURB

<span class="btns"><a href="http://www.insanejournal.com/friends/add.bml?user=JOURNALNAME" class="add">Follow</a> <a href="http://JOURNALNAME.insanejournal.com/tag" class="tags">Tags</a> <a href="CONTACT_URL" class="msg">Contact</a></span>

♡ Person to credit if you have an individually created layout: ©
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

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!