tesscodes | Layout: Waterfall

Two Column (Sidebar on Left) | Friends Page | Three Column (Content in Middle) |

Information

Hey guys! I recently got a request to make a layout that uses a similar entry header to the waterfall.social blog theme's post header, and I couldn't wait to jump on that since I don't have any layouts with this kind of entry header setup as far as I can remember. The journal version of this layout utilizes a faux username since userpics don't have usernames on them on personal journals, so there's a separate option for those of you using this for a community, and for the people who like this layout but prefer the way I usually do my entry headers, there's an option for that too. Enjoy! 💖

Layout Coding

/*-- WATERFALL - TESSISAMESS - 2022 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*--

Find more fun stuff at:
	tessisamess.insanejournal.com
	tesscodes.dreamwidth.org
	patreon.com/tessisamess

--*/

/* REPLACEMENTS */

:root{
/* COLORS */
	--headings-color: #fff;
	--text-color: #eee;
	--entry-date: rgba(255,255,255,0.4);
	--lightest: #fff;

--page-bg: #132021;
	--content-bg: rgba(0,0,0,0.1);
	--header-bg: rgba(255,255,255,0.05);
	--accent: #5F9EA1;

/* FONTS */
	--main-font: Open Sans,calibri,arial,sans-serif;
	--headings: ;
	--title-font: ;

--body-text: 15px;

--title-text: 20px;
	--subtitle-text: 15px;
	--nav-icons: 20px;

--side-titles: 25px;
	--side-text: 13px;
	--side-links: 10px;

--entry-titles: 17px;
	--entry-info: 14px;
	--comments-size: 14px;
	--link-icons: 20px;

--fake-username: 'username';
	--fake-username-display: block;

/* DIMENSIONS */
	--content-width: 1000px;
	--content-gap: 50px;

--header-height: 70px;
	--header-icon-size: 30px;
	--header-icon-display: block;

--side-width: 250px;

--margin: 20px;
	--padding: 30px;

--entry-header-padding: 15px;
	--entry-icon: 60px;
	--entry-icon-radius: 3px;

/* IMAGES */
	--header-icon: url()center;

--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: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.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/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

::-webkit-scrollbar-track{background:var(--page-bg);}
::-webkit-scrollbar{width:4px;background:transparent;}
::-webkit-scrollbar-thumb{background:var(--accent);border:3px solid var(--page-bg);border-left:0;}

*, *:before, *:after{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--page-bg);font-family:var(--main-font);font-size:var(--body-text);color:var(--text-color);}

blockquote{font-style:normal;background:var(--header-bg);padding:15px;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;}
img{max-width:100%;}
ul{list-style:square;}
hr{border:none;border-bottom:1px solid var(--page-bg);}
summary{cursor:pointer;}
summary:focus{outline:none;}

a, a:visited, a:active{color:var(--headings-color);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{color:var(--accent);text-decoration:none;}

.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, .layout-three-column-middle #alpha{margin:0 0 0 calc(var(--side-width) + var(--content-gap));}
.layout-two-column-left #beta, .layout-two-column-right #beta, .layout-three-column-middle #beta{float:left;width:var(--side-width);}
.layout-three-column-middle #gamma{display:none;}

/* HEADER */

#header{position:sticky;top:0;z-index:1;background:var(--page-bg);padding:0;color:var(--headings-color);line-height:1;}
#header-inner{background:var(--header-bg);}

#banner-text{height:var(--header-height);max-width:var(--content-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;}

#nav-above{list-style:none;margin:0;padding:0;font-size:var(--nav-text);}
#nav-below{display:none;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.banner-viewlinks:last-of-type{display:none;}

#nav-above a{margin:0 0 0 20px;font-size:0;}
#nav-above a:before{font-family:'Material Icons';font-size:var(--nav-icons);}
#nav-above a[href$='com/']:before{content:'home';}
#nav-above li a[href*='calendar']:before{content:'schedule';}
#nav-above li a[href*='friends']:before{content:'group';}
#nav-above li a[href*='profile']:before{content:'favorite';}
.current a{color:var(--headings-color);}

#header-text{display:flex;align-items:center;background:transparent;border:none;margin:0;padding:0;}
#header-text:before{content:'';display:var(--header-icon-display);height:var(--header-icon-size);width:var(--header-icon-size);background:var(--header-bg) var(--header-icon);background-size:cover;margin:0 8px 0 0;border-radius:3px;}
#banner-header{font-family:var(--title-font);text-align:center;font-size:var(--title-text);}
#banner-description{font-family:var(--headings);text-align:center;font-size:var(--subtitle-text);margin:0 0 0 10px;padding:5px 0 5px 10px;border-left:1px solid;}

/* BODY OF PAGE */

#pagebody{padding:var(--content-gap) 0;max-width:var(--content-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(--lightest);}

.content-nav{margin:var(--margin) 0 0 0;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin-bottom:var(--margin);font-size:var(--entry-info);color:var(--entry-date);}

.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(--headings-color);}
#sticky-note .entry-header h2{margin:0;padding:0;font-size:var(--entry-titles);}

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

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

/* ENTRIES */

.entry{margin:0 0 var(--margin) 0;padding:0;background:var(--content-bg);position:relative;}

.entry-header{background:var(--content-bg);border:none;padding:var(--entry-header-padding);}
.entry-header-inner{display:flex;align-items:flex-start;}
.entry-header h3{margin:0;padding:0;font-size:var(--entry-titles);}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--headings-color);}

.lj-view-day .entry-datetime{display:none;}
.entry-datetime{position:absolute;left:calc(var(--entry-icon) + 10px + var(--entry-header-padding));top:calc(var(--entry-titles) + var(--entry-header-padding) + 5px);font-size:var(--entry-info);color:var(--entry-date);}

.lj-view-recent.layout-two-column-left .entry-datetime:before{content:var(--fake-username);font-weight:bold;color:var(--accent);display:var(--fake-username-display);}
.layout-two-column-left.lj-view-friends .entry-datetime, .layout-two-column-right .entry-datetime{margin:calc(var(--entry-info) + 5px) 0 0 0;}

.layout-three-column-middle .entry-datetime{top:var(--entry-header-padding);right:var(--entry-header-padding);left:auto;}

.mid-entry-userpic{display:initial;float:left;text-align:center;padding:0 10px 0 0;}
.lj-view-day .mid-entry-userpic{display:none;}
.mid-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);border-radius:var(--entry-icon-radius);}
.outer-entry-userpic, .inner-entry-userpic{display:none;}

.layout-three-column-middle .mid-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + var(--entry-header-padding) + 5px) * -1);}
.layout-three-column-middle .mid-entry-userpic img{background:var(--content-bg);padding:6px;box-shadow:inset 0 0 0 10px var(--content-bg);}

.pic-poster{text-align:left;font-size:var(--entry-info);color:var(--entry-date);display:block;position:absolute;left:calc(var(--entry-icon) + 10px + var(--entry-header-padding));top:calc(var(--entry-titles) + var(--entry-header-padding) + 5px);}
.layout-three-column-middle .pic-poster{text-align:center;position:static;font-size:9px;text-transform:uppercase;}
.pic-poster img{display:none;}
.pic-poster a[href*="profile"]{display:none;}
.pic-poster a{color:var(--accent)!important;}
.lj-view-friends .pic-poster .ljuser + .ljuser:before{content:'posted in';margin:0 5px 0 0;color:var(--entry-date);}

.entry-content{margin-top:0;padding:var(--padding);}
.entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;}

.ljtags{margin:15px 0 0 0;font-size:0;text-align:left;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--accent);font-size:var(--entry-info);margin:0 5px 0 0;}
#alpha .ljtags a:before{content:'#';}

.entry-metadata{display:none;}

.entry-linkbar{margin:0;font-size:0;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:15px 0 0 15px;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions], .entry-linkbar li a[href$=html]{display:none;}

.entry-linkbar li a[href*=comments]{font-size:var(--comments-size);float:left;margin:15px 0 0 0;}
.entry-linkbar li a:after{font-family:Material Icons;font-size:var(--link-icons);}
.entry-linkbar li a[href*=reply]:after{content:'maps_ugc';}
.entry-linkbar li a[href*=edittags]:after{content:'label';}
.entry-linkbar li a[href*=editjournal]:after{content:'edit';}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;margin-bottom:10px;}
.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:var(--padding);background:var(--content-bg);}

/* SIDEBARS */

#beta-inner{font-size:var(--side-text);color:var(--text-color);}

.module{padding:0;background:transparent;margin:0 0 var(--margin) 0;border:none;}

.module-header{display:none;background:transparent;border:none;}
.module-header h3{margin:0;padding:0;font-size:var(--side-titles);color:var(--accent);}
.module-header a, .module-header a:visited{color:var(--accent);}

.module-customtext .module-content{padding:0;}
.module-customtext .module-content img{padding:15px;background:var(--content-bg);}

.module-customtext2 .module-header{display:block;}

.module-typelist .module-header{display:block;}
.module-typelist ul{list-style:none;margin:0;padding:0;font-size:var(--side-links);text-transform:uppercase;letter-spacing:2px;}
.module-typelist li a{display:block;background:var(--content-bg);padding:10px;margin:0 0 3px 0;border-left:2px solid var(--header-bg);border-right:2px solid var(--header-bg);}
.module-typelist li a:hover{border-left:8px solid var(--header-bg);border-right:8px solid var(--header-bg);}

#tag-hierarchy ul{padding:0;margin:0;list-style:none;font-size:var(--side-titles);color:var(--accent);text-transform:capitalize;}
#tag-hierarchy li{margin:var(--margin) 0 0 0;}
#tag-hierarchy li ul{font-size:var(--side-links);text-transform:uppercase;letter-spacing:2px;}
#tag-hierarchy li ul li{margin:0;}
#tag-hierarchy li ul li a{display:block;background:var(--content-bg);padding:10px;margin:0 0 3px 0;border-left:2px solid var(--header-bg);border-right:2px solid var(--header-bg);}
#tag-hierarchy li ul li a:hover{border-left:8px solid var(--header-bg);border-right:8px solid var(--header-bg);}
.tag-count{font-size:x-small;}

.module-layoutcredit{margin:0;position:fixed;right:15px;bottom:10px;font-size:0;}
.module-layoutcredit p{padding:0;margin:0;}
.module-layoutcredit a:after{font-family:Material Icons;content:'code';font-size:25px;}

.module-viewlinks, .all-link, .module-pagesummary, .module-calendar, .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);}

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) - Stacked entry header info (for journals)
Two Column (Sidebar on Right) - Stacked entry header info (for communities)
Three Column (Content in Middle) - Classic setup (for journals and communities)

♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Yes !IMPORTANT unless using as Three Column (Content in Middle), then you can choose either.

♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.

♡ Fill in first custom sidebar module with sidebar image: <img src="URL">
♡ Fill in second custom sidebar module with your blurb if desired.

♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/149817.html

♡ 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!