Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

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

Information

Hey guys, we're doubling up on layouts this month since it's been so long since the last free layout! Pathways has two sidebar options that are pretty similar in setup, but gives you the option of an inset or outset titles block depending on how much sidebar space you need. Any size image works, so use whatever you like!

This layout is highly customizable and, even though the demo backgrounds are white, there are actually multiple background area options to use. Most things can be resized easily in the :root as well, including font sizes. Enjoy! 💖

Layout Coding

/*-- PATHWAYS - TESSISAMESS - 2020 --*/
/*-- 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{
	--darkest: #000; /* page links, nav links, nav link hover background, headings */
	--darker: #222; /* page text */
	--medium: #999; /* entry date, tags, entry link hover */
	--lightest: #fff; /* nav link hover text, layout credit hover background */
	--accent: #296d8e; /* entry links, calendar day name background, page selection */

--page-bg: #f1f1f1;
	--bg-img: url()center fixed;

--nav-bg: #fff;
	--content-bg: #fff; /* sidebar & entries */
	--borders: rgba(0,0,0,0.1);

--main-font: Open Sans,helvetica,arial,sans-serif;
	--headings: Crimson Text,georgia;
	--title-font: Rembank;

--nav-width: 75px;
	--side-width: 350px;
	--entry-width: 600px;

--margin: 30px;
	--padding: 50px;
	--entry-icon: 75px;

--font1: 12px; /* entry text, sidebar blurb */
	--font2: 11px; /* sidebar, entry date, entry tags, entry links */
	--font3: 10px; /* journal nav */
	--font4: 32px; /* sidebar and sticky note titles */

--nav-icon: url(ICON_URL)center bottom;

--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:Rembank;src:url(https://dl.dropbox.com/s/fm1zrt3b16wt5ul/Rembank.otf);}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(https://fonts.gstatic.com/s/crimsontext/v10/wlp2gwHKFkZgtmSR3NB0oRJfbwhT.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: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.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(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

*{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--page-bg) var(--bg-img);font-family:var(--headings);font-size:var(--font1);color:var(--darker);}

blockquote{font-style:normal;padding:10px;border:1px solid var(--borders);box-shadow:5px 5px 0 0 var(--borders);}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:normal;font-style:italic;text-transform:lowercase;letter-spacing:2px;}
img{max-width:100%;}
ul{list-style:square;}
hr{height:5px;border:1px solid var(--borders);border-left:none;border-right:none;}
summary{cursor:pointer;}
summary:focus{outline:none;}

a, a:visited, a:active{color:var(--darkest);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;}

.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 0 0 calc(var(--nav-width) + var(--side-width) + var(--padding) + var(--padding));width:var(--entry-width);}
.layout-two-column-left #beta, .layout-two-column-right #beta{width:var(--side-width);}

/* HEADER */

#header{position:fixed;top:0;left:0;bottom:0;padding:0;color:var(--darkest);width:var(--nav-width);text-align:center;background:var(--content-bg);}
#header-inner{height:100%;display:flex;align-items:center;justify-content:center;}
#banner{width:100%;}

#nav-above:before{content:'';display:block;background:var(--darkest) var(--nav-icon);background-size:cover;width:calc(var(--nav-width) - 30px);height:calc(var(--nav-width) - 30px);margin:20px auto;border-radius:100%;}

#nav-above{list-style:none;margin:0;padding:0;font-size:var(--font3);font-style:italic;letter-spacing:1px;text-transform:lowercase;}
#nav-below{display:none;}
.banner-viewlinks{display:block;padding:0;border:none;}
.banner-viewlinks:last-of-type{display:none;}

#nav-above a{display:block;margin:0;padding:25px 0;}
#nav-above a:after{content:'.';}
#nav-above a:hover{background:var(--darkest);color:var(--lightest);}
.current a{color:var(--darkest);}

#header-text{display:none;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:calc(var(--margin) * 1.5) 0 0 0;}
#alpha a, #alpha a:visited{color:var(--accent);}
#alpha a:hover{color:var(--medium);}

.content-nav{margin:var(--margin) 0;font-size:13px;font-style:italic;letter-spacing:1px;text-transform:lowercase;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin-bottom:var(--margin);}

.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(--darkest);}
#sticky-note .entry-header h2{margin:0;padding:0;font-family:var(--title-font);font-size:var(--font4);letter-spacing:0;text-transform:none;}

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

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

/* ENTRIES */

.entry{margin:0 0 var(--margin) 0;padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3{margin:0;padding:0;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);}

.lj-view-day .entry-datetime{display:none;}
.entry-datetime{position:absolute;top:var(--padding);right:var(--padding);font-size:var(--font2);font-style:italic;letter-spacing:1px;text-transform:lowercase;color:var(--medium);}

.inner-entry-userpic{text-align:center;padding:0;}
.inner-entry-userpic img{position:absolute;top:0;right:calc((var(--entry-icon) + 10px) * -1);max-width:var(--entry-icon);max-height:var(--entry-icon);padding:5px;border:1px solid var(--borders);border-radius:100%;}
.outer-entry-userpic, .mid-entry-userpic{display:none;}

.pic-poster{position:absolute;left:var(--padding);bottom:var(--padding);display:flex;font-family:var(--headings);font-size:var(--font2);font-style:italic;letter-spacing:1px;text-transform:lowercase;}
.pic-poster img{display:none;}
.pic-poster .ljuser ~ .ljuser:before{content:'/';margin:0 5px;}
.pic-poster a[href*="profile"]{display:none;}
.pic-poster b{font-weight:normal;}

.entry-content{margin-top:10px;}
.entry-text{font-family:var(--main-font);min-height:0;overflow:hidden;line-height:1.6;text-align:justify;}

.ljtags{margin:var(--margin) 0 0 0;font-family:var(--headings);font-size:var(--font2);font-style:italic;letter-spacing:1px;text-transform:lowercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);}

.entry-metadata{display:none;}

.entry-linkbar{margin:var(--margin) 0 0 0;font-size:var(--font2);font-style:italic;letter-spacing:1px;text-transform:lowercase;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{margin:0 0 0 10px;}
.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;}

/* 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:calc(var(--margin) * 1.5) 0 0 0;}
.lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);}

/* SIDEBAR */

#beta{position:fixed;top:0;left:var(--nav-width);bottom:0;background:var(--content-bg);border-right:1px solid var(--borders);border-left:1px solid var(--borders);text-align:center;}
#beta-inner{height:100%;display:flex;flex-direction:column;font-size:var(--font2);color:var(--darker);}

.module{background:transparent;padding:0;margin:0;border:none;border-top:1px solid var(--borders);}

.module-customtext{border:0;line-height:0.7;}
.module-customtext .module-content{padding:0;position:relative;}
.layout-two-column-left .module-customtext .titles{position:absolute;left:var(--margin);right:var(--margin);bottom:var(--margin);background:var(--content-bg);padding:10px 0;}
.layout-two-column-right .module-customtext .titles{padding:20px 0;}
.module-customtext .title{font-family:var(--title-font);font-size:var(--font4);}
.module-customtext .subtitle{font-style:italic;letter-spacing:3px;text-transform:lowercase;}

.module-customtext2 .module-content{padding:20px;line-height:1.5;font-size:var(--font1);}

.module-typelist ul{list-style:none;margin:0;padding:0;font-style:italic;letter-spacing:1px;text-transform:lowercase;}
.module-typelist li{margin:0;padding:0;border-bottom:1px solid var(--borders);}
.module-typelist li a{display:block;padding:15px 0;}
.module-typelist li a:hover{background:var(--borders);letter-spacing:5px;}

.module-layoutcredit{position:fixed;right:10px;bottom:10px;border:none;font-style:italic;letter-spacing:1px;text-transform:lowercase;}
.module-layoutcredit p{padding:0;margin:0;}
.module-layoutcredit a{display:block;padding:2px 8px;background:var(--content-bg);border:1px solid var(--borders);}
.module-layoutcredit a:hover{background:var(--darkest);color:var(--lightest);}

.module-header, .module-viewlinks, .module-pagesummary, .module-calendar, .module-categories, .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, 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) - Inset Titles
Two Column (Sidebar on Right) - Block Titles

♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No (Not required, but recommended)

♡ Link text to leave a comment: Comment
♡ Navigation link names: Recent/Archive/Friends/Profile

♡ Fill in sticky note if desired.
♡ Body of custom sidebar module:
<img src="IMG_URL"> <div class="titles"><div class="title">Title</div> <span class="subtitle">Subtitle</span></div>
♡ Body of second custom sidebar module: Your blurb
♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/128300.html
♡ Sidebar ordering:
Custom Text
Custom Text Two*
Links List
Layout Credit
(none) for the rest of the Primary items. Don't worry about the Secondary items.
*You can skip this one if you don't need a blurb.

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

Tags: layouts, layouts: s2 complete style

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Layout: Pathways

Information

Layout Coding

Installation Guide

Terms of Use