Tessisamess

Two Column (Sidebar on Left) | Two Column (Sidebar on Right) | tess073

Information

Hey guys! It's been a hot minute since I've made a cast list journal layout, and since the last time was more of a trial run/surface approach, this time I really dug into everything and made this as versatile as possible. Everything can be quickly and easily resized via the :root, which includes the header, header icon, sidebar, and entries. You can also choose how many characters (ie. entries) you want in each row.

Additionally, I've added easy access to editing your entries so there's no need this time to remember an entry URL link. If you're logged into the account, you'll see a handy edit button on each entry to provide owner-accessibility without visitors seeing unneeded elements. As usual, to retain usability, this non-standard entry setup does not effect your friends page or the day page.

And as if I haven't rambled enough, if you want to use this as a regular journal, either to match your game comms or just because you like the vibe but don't need cast entries, all you need to do is choose Two Column (Sidebar on Right) instead of Two Column (Sidebar on Left) to have a standard journal! Enjoy! 💖

A NOTE: If switching to Casting Call from Cast Sorter, you can do so without needing to change your entry coding!

Layout Coding

/*-- CASTING CALL - TESSISAMESS - 2019 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --darker: #222; /* page text; sidebar links */ --medium: #999; /* entry date & tags */ --lightest: #fff; /* header text and links, header icon border, entry background, sidebar content background, button link text */ --accent: #D98D6E; /* sidebar link hover, header border, button links background, headings, entry links */ --accent2: #D9766E; /* blockquote border, button link hover background, entry link hover, character title, tag count */ --page-bg: #F9F6F1; --borders: rgba(0,0,0,0.1); --main-font: Roboto Condensed,helvetica,arial,sans-serif; --headings: Lato,helvetica,arial,sans-serif; --title-font: Northern,Lato,helvetica,arial,sans-serif; --header-height: 300px; --header-img: url(https://i.imgur.com/imjGDYV.jpg)center fixed; --header-icon-size: 80px; --header-icon: url(https://i.imgur.com/tHtzc0R.gif)center; --main-width: 1100px; --side-width: 250px; --chars-row: 3; /* how many cast entries per row */ --char-text: 11px; --char-title: 18px; --char-sub: 10px; --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:Northern;src:url(https://dl.dropbox.com/s/fyhgor12yex4amb/NORTHEN.otf);} @font-face{font-family:'Lato';font-style:normal;font-weight:300;src:local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh7USSwiPGQ.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 Condensed';font-style:normal;font-weight:400;src:local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.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 */ ::selection{background:var(--accent2);color:var(--lightest);} ::-moz-selection{background:var(--accent2);color:var(--lightest);} *{box-sizing:border-box;} body{margin:0;padding:0;background:var(--page-bg);font-family:var(--main-font);font-size:12px;color:var(--darker);} blockquote{font-style:italic;padding:0 0 0 15px;border-left:5px solid var(--accent2);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-transform:uppercase;letter-spacing:1px;font-weight:normal;} img{max-width:100%;} ul{list-style:square;} hr{margin-left:20%;margin-right:20%;border:none;height:1px;background:var(--borders);} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--darker);text-decoration:none;-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;} 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.lj-view-recent #alpha{margin:0 0 0 var(--side-width);} .layout-two-column-left #alpha, .layout-two-column-right #alpha{margin:0 0 0 calc(var(--side-width) + 30px);} .layout-two-column-left #beta, .layout-two-column-right #beta{float:left;width:var(--side-width);} /* HEADER */ #header{padding:20px 20px 0 20px;color:var(--lightest);line-height:0;text-transform:uppercase;letter-spacing:1px;height:var(--header-height);display:flex;align-items:flex-end;justify-content:center;background:var(--borders) var(--header-img);background-size:cover;border-bottom:4px solid var(--accent);} #header-inner{width:var(--main-width);} #banner-text{display:flex;align-items:flex-end;justify-content:space-between;flex-direction:row-reverse;} #nav-above{list-style:none;margin:0 0 -2px 0;padding:0;font-size:9px;font-weight:bold;} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-above a{color:var(--lightest);background:var(--accent);margin:0 0 0 8px;border-radius:3px;padding:2px 5px 2px 6px;border:1px solid var(--borders);} .current a{color:var(--lightest);} #nav-above a:hover{background:var(--accent2);} #header-text{background:transparent;border:none;margin:0;padding:0;} #header-text:before{content:'';display:block;margin:0 0 calc((var(--header-icon-size) / 2) - var(--header-icon-size)) 0;width:var(--header-icon-size);height:var(--header-icon-size);border-radius:100%;border:3px solid #fff;box-shadow:0 0 0 1px var(--borders);background:var(--header-icon);background-size:cover;} #header-text a{color:var(--lightest);}#banner-header{font-family:var(--title-font);text-align:center;display:flex;align-items:center;margin:0 0 0 calc(var(--header-icon-size) + 20px);font-size:35px;text-shadow:2px 2px 0 var(--borders),2px 2px 0 var(--borders),2px 2px 0 var(--borders);} #banner-description{display:none;} /* BODY OF PAGE */ #pagebody{background:transparent;padding:75px 50px 50px 50px;} #pagebody-inner{margin:0 auto;width:var(--main-width);} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} .layout-two-column-left.lj-view-recent #alpha-inner{display:flex;flex-wrap:wrap;align-items:flex-start;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--accent2);} .content-nav{position:absolute;top:10px;right:10px;margin:0;font-size:0;text-transform:uppercase;font-weight:bold;letter-spacing:1px;} .content-nav a{font-size:8px;color:var(--lightest)!important;background:var(--accent);margin:0 0 0 8px;border-radius:3px;padding:2px 5px 2px 6px;border:1px solid var(--borders);} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;position:absolute;top:10px;right:10px;color:var(--lightest)!important;background:var(--accent);border-radius:3px;padding:2px 5px 2px 6px;border:1px solid var(--borders);} #tagpage-header h2{margin:0;font-size:8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;color:var(--lightest);} .date-header{display:none;} #column-footer{clear:both;display:none;} /* CAST LIST ENTRIES */ #sticky-note{display:none;} .layout-two-column-left.lj-view-recent .entry-header, .layout-two-column-left.lj-view-recent .entry-datetime, .layout-two-column-left.lj-view-recent .entry-metadata, .layout-two-column-left.lj-view-recent .ljtags, .header-poster{display:none;} .layout-two-column-left.lj-view-recent .entry{padding:15px;width:calc(((var(--main-width) - var(--side-width)) / var(--chars-row)) - 30px);height:calc(((var(--main-width) - var(--side-width)) / var(--chars-row)) - 30px);margin:0 0 30px 30px;overflow:hidden;} .layout-two-column-left.lj-view-recent .entry-content{margin:0;} .layout-two-column-left.lj-view-recent .entry-inner, .layout-two-column-left.lj-view-recent .entry-content, .layout-two-column-left.lj-view-recent .entry-body, .layout-two-column-left.lj-view-recent .entry-text{width:100%;height:100%;} .layout-two-column-left.lj-view-recent .entry-linkbar{position:absolute;right:10px;bottom:10px;margin:0;padding:0;border-top:none;} .layout-two-column-left.lj-view-recent .entry-linkbar a{display:none;} .layout-two-column-left.lj-view-recent .entry-linkbar a[href*=editjournal]{display:block;color:var(--lightest)!important;padding:2px 5px;background:var(--accent);border:1px solid var(--borders);border-radius:3px;} .char{background:var(--borders);position:relative;width:100%;height:100%;text-align:center!important;text-transform:uppercase;} .char .pic{position:absolute;top:0;left:0;bottom:0;right:0;background-size:cover!important;} .char-inner{position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(255,255,255,0.8);opacity:0;font-size:var(--char-text);display:flex;-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;} .center{align-self:center;width:100%;} .char-inner:hover{opacity:1;} .char-inner h4{font-size:var(--char-title);margin:0;line-height:1;color:var(--accent2);} .char-inner b{display:block;letter-spacing:2px;margin-top:5px;font-size:var(--char-sub);} .char-inner i{display:block;letter-spacing:1px;margin-top:5px;font-style:normal;font-size:var(--char-sub);} .charlink{display:block;margin:5px 7% 0 7%;border-bottom:1px solid var(--lightest);padding:0 0 3px 0;} .charlink:hover{letter-spacing:2px;} /* ENTRIES */ .entry{margin:0 0 30px 0;padding:30px;background:var(--lightest);border:1px solid var(--borders);position:relative;} .entry-header{background:transparent;border:none;padding:0;} .entry-header-inner{display:flex;align-items:center;} .entry-header h3{margin:0;padding:0;font-size:25px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;right:0;top:-8px;font-size:8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;color:var(--medium);} .mid-entry-userpic{display:block;text-align:center;padding:0 10px 0 0;} .mid-entry-userpic img{width:50px;height:50px;} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster{position:absolute;left:30px;bottom:30px;font-size:8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;display:flex;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .pic-poster .ljuser:before{content:'Posted by ';} .pic-poster .ljuser ~ .ljuser:before{content:'in ';margin:0 0 0 4px;} .entry-content{margin-top:30px;} .entry-text{min-height:0;overflow:hidden;line-height:1.7;text-align:justify;} .ljtags{margin:30px 0 0 0;font-size:8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);} .entry-metadata{display:none;} .entry-linkbar{margin:20px 0 0 0;padding:20px 0 0 0;border-top:1px solid var(--borders);text-align:right;font-size:9px;text-transform:uppercase;font-weight:bold;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 0 0 10px;} .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;} .year{list-style:none;margin:0;padding:0;} .year li{display:inline;padding:0;} .lj-view-archive .entry-content{margin:0;} .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(--accent)!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{padding:30px;background:var(--lightest);border:1px solid var(--borders);} /* SIDEBAR */ #beta-inner{font-size:12px;color:var(--darker);} .module{padding:0;background:transparent;margin:0;border:none;} .module-content{padding:20px;margin:0 0 20px 0;background:var(--lightest);border:1px solid var(--borders);border-top:4px solid var(--accent);} .module-header{background:transparent;border:none;line-height:.8;} .module-header h3{margin:0;padding:0;font-weight:bold;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-size:14px;} .module-header a, .module-header a:visited{color:var(--accent);} .module-customtext .module-content{padding:0;} .module-customtext2 .module-content{line-height:1.5;text-align:justify;} .module-customtext a, .module-customtext2 a{color:var(--accent)!important;font-weight:bold;} .module-typelist ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;text-align:center;font-size:9px;text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .module-typelist li{width:calc(50% - 2px);} .module-typelist li a{display:block;border:1px solid var(--borders);margin:2px 0;padding:4px 0;} .module-typelist li a:hover{background:var(--accent2);color:var(--lightest);} .module-categories .module-content{padding:0;margin:0;background:transparent;border:none;} .module-categories .module-header{display:none;} #tag-hierarchy ul{list-style:none;margin:0;padding:0;font-family:var(--headings);font-weight:bold;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-size:14px;line-height:.8;} #tag-hierarchy ul li ul{padding:20px;margin:0 0 20px 0;background:var(--lightest);border:1px solid var(--borders);border-top:4px solid var(--accent);color:var(--accent2);} #tag-hierarchy ul li ul li{display:flex;align-items:center;justify-content:space-between;} #tag-hierarchy a{font-family:var(--main-font);font-weight:normal;letter-spacing:0;text-transform:capitalize;font-size:12px;padding:6px 0;} .tag-count{font-size:8px;} .all-link{display:none;} .module-layoutcredit{position:fixed;left:10px;bottom:10px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;text-transform:uppercase;letter-spacing:2px;font-size:8px;font-weight:bold;} .module-layoutcredit .module-content{padding:0;margin:0;background:transparent;border:none;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:0;} .module-viewlinks, .module-calendar, .module-pagesummary, .module-about, .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);}

Entry Coding

No special steps needed! Just add the following code to an entry, fill it out, and tag the post. Pictures do not need to be square to fit; just make sure they're at least as large as the background space they're filling on Recent.
<lj-raw><div class="char"> <div class="pic" style="background:url(CHAR_PIC)center;"></div> <div class="char-inner"><div class="center"> <h4>CHAR_NAME</h4> <b>SUBTITLE</b> <a href="URL" class="charlink">LINK</a> <a href="URL" class="charlink">LINK</a> <i>PB: PBNAMEHERE</i> </div></div> </div></lj-raw>

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:

Cast list entries: Two Column (Sidebar on Left)
Regular entries: Two Column (Sidebar on Right)

♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in custom sidebar module with image if desired.
♡ Fill in second custom sidebar module with blurb if desired.
♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Display of tags in sidebar: List
♡ Show tag count in hierarchical list? Yes
♡ Order primary sidebar dropdowns if desired. The live demo uses the following ordering: Custom Text, Custom Text Two, Links List, Page Summary, Tags, Layout Credit
♡ 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!