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

Information

Hey guys! So, I recently switched from both Notepad and Docs to Obsidian, and I can't get enough of it. I'm obsessed with it and I'm never looking back LOL. Anyway, I love the look of it a lot too, so I got a MIGHTY NEED to make a layout that matches it. Enjoy! 💖

Layout Coding

/*-- OBSIDIAN - TESSISAMESS - 2023 --*/
/*-- 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
	tessisamess.gumroad.com

--*/

/* REPLACEMENTS */

:root{
/* COLORS */
	--headings-color: #fff;
	--text-color: #eee;
	--date-tags: #555;
	--lightest: #fff;

--page-bg: #262626;
	--header-bg: #363636;
	--content-bg: #1E1E1E;
	--alt-content-bg: #212121;
	--borders: rgba(255,255,255,0.1);
	--accent: #888;

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

--body-text: 15px;

--title-text: 12px;
	--subtitle-text: 12px;
	--nav-text: 12px;

--side-text: 13px;
	--side-titles: 16px;

--entry-titles: 22px;
	--entry-info: 12px;

/* DIMENSIONS */
	--content-width: 650px;
	--header-height: 40px;
	--nav-width: 40px;

--side-width: 350px;
	--side-padding: 30px;
	--side-img-height: 200px;
	--side-img-display: block; /* CHANGE TO none TO DISABLE */

--margin: 30px;
	--padding: 30px;
	--sticky-padding: 20px;
	--entry-icon: 40px;
	--adjust-username: 76px; /* in case username runs into date when you change font sizes */

/* IMAGES */
    --bg-img: url()center fixed;
	--top-icon: url()center;
	--side-img: 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;

/* LINKS LIST */
	--link1-icon: 'link';
	--link1-text: 'Link One';

--link2-icon: 'link';
	--link2-text: 'Link Two';

--link3-icon: 'link';
	--link3-text: 'Link Three';

--link4-icon: 'link';
	--link4-text: 'Link Four';

--link5-icon: 'link';
	--link5-text: 'Link Five';

--link6-icon: 'link';
	--link6-text: 'Link Six';

--link7-icon: 'link';
	--link7-text: 'Link Seven';

--link8-icon: 'link';
	--link8-text: 'Link Eight';

--link9-icon: 'link';
	--link9-text: 'Link Nine';

--link10-icon: 'link';
	--link10-text: 'Link Ten';

--link11-icon: 'link';
	--link11-text: 'Link Eleven';

--link12-icon: 'link';
	--link12-text: 'Link Twelve';

--link13-icon: 'link';
	--link13-text: 'Link Thirteen';

--link14-icon: 'link';
	--link14-text: 'Link Fourteen';

--link15-icon: 'link';
	--link15-text: 'Link Fifteen';
}

/* FONTS */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v120/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY40KH8nGzv3fzHVJU22ZZLsYEpzC_1ver5Y0.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* 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:7px;background:transparent;}
::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--page-bg);border-radius:5px;}

*, *:before, *:after{box-sizing:border-box;-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;}
body{margin:0;padding:0;background:var(--page-bg) var(--bg-img);background-size:cover;font-family:var(--main-font);font-size:var(--body-text);color:var(--text-color);}

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

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

.layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--nav-width));}
.layout-two-column-left #beta{float:left;width:var(--side-width);}

/* HEADER */

#header{position:sticky;top:0;z-index:2;padding:0 calc(var(--header-height) / 2) 0 0;background:var(--header-bg);color:var(--headings-color);}

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

#nav-above{width:calc(100% - var(--side-width) - var(--nav-width));list-style:none;margin:7px 0 0 0;padding:0;font-size:var(--nav-text);}
#nav-below{display:none;}
.banner-viewlinks{display:inline-block;padding:0;border:none;line-height:var(--header-height);width:calc(100% / 4);max-width:170px;}
.banner-viewlinks:last-of-type{display:none;}

#nav-above a{margin:0 2px 0 0;display:flex;align-items:center;height:calc(var(--header-height) - 7px);padding:0 calc((var(--header-height) - 7px) / 3);border-radius:5px 5px 0 0;background:rgba(0,0,0,0.1);}
#nav-above a:hover{background:rgba(0,0,0,0.3);}
.current a{background:var(--content-bg)!important;color:var(--headings-color);}

#nav-above a:before, #nav-above a:after{font-family:'Material Symbols Outlined';color:var(--date-tags);font-size:15px;}
#nav-above a:before{margin:-2px 4px 0 0;}
#nav-above a:after{content:'close';margin:0 0 0 auto;}

#nav-above a[href$="/"]:before{content:'home';}
#nav-above a[href*="/calendar"]:before{content:'calendar_today';}
#nav-above a[href*="/friends"]:before{content:'group';}
#nav-above a[href*="/profile"]:before{content:'star';}
#nav-above a:hover:before{color:var(--accent);}

#header-text:before{content:'';display:block;width:var(--nav-width);height:var(--header-height);background:var(--accent) var(--top-icon);background-size:cover;border-right:1px solid var(--borders);margin:0 calc(var(--header-height) / 2) 0 0;}

#header-text{display:flex;align-items:center;justify-content:center;background:transparent;border:none;margin:0;padding:0;}
#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;}
#banner-description:before{content:'/';margin:0 5px;opacity:0.4;}

/* MAIN COLUMN */

#alpha:before{content:'';display:block;position:sticky;top:var(--header-height);height:var(--padding);background:var(--content-bg);z-index:2;}
#alpha{min-height:calc(100vh - var(--header-height));padding:0 var(--padding) var(--padding) var(--padding);background:var(--content-bg);border:none;}
#alpha-inner{max-width:var(--content-width);margin:0 auto;}
#alpha a, #alpha a:visited{color:var(--accent);}
#alpha a:hover{color:var(--date-tags);}

.content-nav{margin:var(--margin) 0 0 0;color:transparent;}
.content-nav a{background:var(--page-bg);border:1px solid var(--borders);padding:3px 8px;border-radius:3px;}
.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);font-family:var(--main-font);background:var(--page-bg);border:1px solid var(--borders);padding:3px 8px;border-radius:3px;}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry{padding:0;border:0;}
#sticky-note .entry-inner{background:var(--page-bg);border:1px solid var(--borders);padding:var(--sticky-padding);border-radius:5px;}

#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-content{margin-top:0;}
#sticky-note .entry-text{padding:0;}

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

/* ENTRIES */

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

.entry-header{background:transparent;border:none;padding:0;}
.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);}

.entry-datetime{font-size:var(--entry-info);color:var(--date-tags);text-transform:lowercase;}

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

.pic-poster{position:absolute;top:0;left:calc(var(--entry-icon) + 10px + var(--adjust-username));height:var(--entry-icon);text-align:left;font-size:var(--entry-info);display:flex;align-items:flex-end;color:var(--date-tags);}
.pic-poster img{display:none;}
.pic-poster a[href*="profile"]{display:none;}
.pic-poster b{font-weight:normal;}
.pic-poster .ljuser:before{content:'/';margin:0 7px;}

.entry-content{margin-top:10px;}
.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);}
.ljtags a:before{content:'/';color:var(--date-tags)!important;margin:0 3px;}
.ljtags a:first-of-type:before{content:'folder_open';font-family:'Material Symbols Outlined';font-size:14px;margin:-2px 5px 0 0;float:left;}

.entry-metadata{display:none;}

.entry-linkbar{margin:0;font-size:var(--entry-info);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:10px 0 0 5px;background:var(--page-bg);border:1px solid var(--borders);padding:3px 8px;border-radius:3px;}
.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;background:var(--page-bg);border:1px solid var(--borders);padding:3px 8px;border-radius:3px;}

.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);}

/* SIDEBAR */

#beta{position:fixed;left:var(--nav-width);height:calc(100vh - var(--header-height));overflow:auto;padding:var(--side-padding);border-right:1px solid var(--borders);}

#beta-inner:before{content:'';display:var(--side-img-display);height:var(--side-img-height);background:var(--alt-content-bg) var(--side-img);background-size:cover;border:var(--sticky-padding) solid var(--alt-content-bg);border-radius:5px;margin:0 0 10px 0;outline:1px solid var(--borders);outline-offset:-1px;}

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

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

.module-header{background:transparent;border:none;}
.module-header h3{margin:0 0 5px 0;padding:0;font-size:var(--side-titles);display:flex;align-items:center;}
.module-header a, .module-header a:visited{color:var(--headings-color);}

.module-customtext{background:var(--alt-content-bg);border:1px solid var(--borders);padding:var(--sticky-padding);border-radius:5px;}
.module-customtext .module-header h3:before{content:'info';font-family:'Material Symbols Outlined';margin:0 5px 0 0;}
.module-customtext .module-content{padding:0;}

.module-typelist{position:fixed;top:var(--header-height);left:0;bottom:0;z-index:2;margin:0;width:var(--nav-width);border-right:1px solid var(--borders);}
.module-typelist .module-header{display:none;}
.module-typelist ul{list-style:none;margin:0;padding:0;font-size:0;}
.module-typelist li a{position:relative;color:var(--side-text)!important;}

.module-typelist li a:before{font-family:'Material Symbols Outlined';font-size:19px;display:block;height:var(--nav-width);line-height:var(--nav-width);border-bottom:1px solid var(--borders);text-align:center;}
.module-typelist li a:after{font-size:var(--side-text);position:absolute;top:calc((var(--nav-width) - var(--side-text) - 12px) / 2);left:-70px;background:var(--content-bg);border:1px solid var(--borders);padding:5px 8px;border-radius:3px;box-shadow:2px 2px 1px 0 rgba(0,0,0,0.2);opacity:0;white-space:nowrap;}

.module-typelist li a:hover:after{left:calc(var(--nav-width) + 5px);opacity:1;}

.module-typelist li:nth-of-type(1) a:before{content:var(--link1-icon);}
.module-typelist li:nth-of-type(1) a:after{content:var(--link1-text);}

.module-typelist li:nth-of-type(2) a:before{content:var(--link2-icon);}
.module-typelist li:nth-of-type(2) a:after{content:var(--link2-text);}

.module-typelist li:nth-of-type(3) a:before{content:var(--link3-icon);}
.module-typelist li:nth-of-type(3) a:after{content:var(--link3-text);}

.module-typelist li:nth-of-type(4) a:before{content:var(--link4-icon);}
.module-typelist li:nth-of-type(4) a:after{content:var(--link4-text);}

.module-typelist li:nth-of-type(5) a:before{content:var(--link5-icon);}
.module-typelist li:nth-of-type(5) a:after{content:var(--link5-text);}

.module-typelist li:nth-of-type(6) a:before{content:var(--link6-icon);}
.module-typelist li:nth-of-type(6) a:after{content:var(--link6-text);}

.module-typelist li:nth-of-type(7) a:before{content:var(--link7-icon);}
.module-typelist li:nth-of-type(7) a:after{content:var(--link7-text);}

.module-typelist li:nth-of-type(8) a:before{content:var(--link8-icon);}
.module-typelist li:nth-of-type(8) a:after{content:var(--link8-text);}

.module-typelist li:nth-of-type(9) a:before{content:var(--link9-icon);}
.module-typelist li:nth-of-type(9) a:after{content:var(--link9-text);}

.module-typelist li:nth-of-type(10) a:before{content:var(--link10-icon);}
.module-typelist li:nth-of-type(10) a:after{content:var(--link10-text);}

.module-typelist li:nth-of-type(11) a:before{content:var(--link11-icon);}
.module-typelist li:nth-of-type(11) a:after{content:var(--link11-text);}

.module-typelist li:nth-of-type(12) a:before{content:var(--link12-icon);}
.module-typelist li:nth-of-type(12) a:after{content:var(--link12-text);}

.module-typelist li:nth-of-type(13) a:before{content:var(--link13-icon);}
.module-typelist li:nth-of-type(13) a:after{content:var(--link13-text);}

.module-typelist li:nth-of-type(14) a:before{content:var(--link14-icon);}
.module-typelist li:nth-of-type(14) a:after{content:var(--link14-text);}

.module-typelist li:nth-of-type(15) a:before{content:var(--link15-icon);}
.module-typelist li:nth-of-type(15) a:after{content:var(--link15-text);}

#tag-hierarchy ul{padding:0;margin:0;list-style:none;}
#tag-hierarchy li:before{content:'folder_open';font-family:'Material Symbols Outlined';color:var(--date-tags);font-size:14px;padding:0 5px 0 0;}
#tag-hierarchy li{padding:3px 0;}
#tag-hierarchy li ul{padding:5px 0 5px 20px;margin:0 0 0 6px;border-left:1px solid var(--borders);}
#tag-hierarchy li ul li:before{content:'folder';}
#tag-hierarchy li ul li:hover:before{content:'folder_open';}

.all-link p{margin:10px 0 0 0;text-align:center;}
.all-link a{background:var(--alt-content-bg);border:1px solid var(--borders);padding:5px 10px;border-radius:3px;}

.module-layoutcredit{position:fixed;left:10px;bottom:10px;padding:0;background:transparent;margin:0;border:0;font-weight:bold;font-size:8px;text-transform:uppercase;letter-spacing:2px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;}

.module-customtext2, .tag-count, .module-viewlinks, .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"], img[src*="entry/private.png"], img[src*="entry/protected.png"], img[src*="entry/groups.png"]{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);}

img[src*="entry/private.png"]{background:transparent var(--private);}
img[src*="entry/protected.png"]{background:transparent var(--locked);}
img[src*="entry/groups.png"]{background:transparent var(--customs);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle (optional), then save.
♡ Fill in your Links List (required), then save. Please note that, with this layout, you'll also be putting your link titles in the layout CSS.
♡ 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)
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Yes or No

♡ Navigation link names: Recent/Archive/Friends/Profile

♡ Fill in sticky note if desired.

♡ Fill in first custom sidebar module if desired. You'll want to disable Custom Text in the sidebar ordering dropdowns if you don't want to use this module.

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

♡ Display of tags in sidebar: List

♡ 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: Obsidian

Information

Layout Coding

Installation Guide

Terms of Use