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! I'm so tired haha. I'm gonna have to leave off the usual chit-chat. This month's been thrashing my mental health.

This layout has a sectioned header and supports either no sidebar or left/right sidebar! All demo images are left in the layout, so feel free to use them if you like! This layout is optimized for mobile. Enjoy! ♥

Layout Coding

/*-- THE RITUAL - TESSISAMESS - 2018 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* GENERAL CLASSES */

@font-face{font-family:Marathon;src:url(https://dl.dropbox.com/s/b7mw1w3c4lqujqx/Marav2.otf);}

@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;src:local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3aZQNVED7rKGKxtqIqX5EUDXx4.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;}

body{margin:0;padding:0;background:#1B1E1D;font-family:Josefin Sans,ms gothic;font-size:15px;color:rgba(255,255,255,0.7);}
blockquote{font-style:italic;margin:0 0 0 10px;padding:0 0 0 10px;border-left:5px solid #242826;}
h1,h2,h3,h4,h5,h6{font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;letter-spacing:2px;font-weight:normal;color:#8B9B93;}
a, a:visited, a:active{color:#fff;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;opacity:0.5;}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;}

.layout-one-column #pagebody-inner{max-width:900px;}
.layout-one-column #alpha{margin:0;}

.layout-two-column-left #alpha{margin:0 0 0 31vw;}
.layout-two-column-left #beta{float:left;width:27vw;}

.layout-two-column-right #alpha{margin:0 31vw 0 0;}
.layout-two-column-right #beta{float:right;width:27vw;}

/* HEADER */

#header{padding:0;background:#0A0A0A url(https://i.imgur.com/MDfcwYb.jpg)center;background-size:cover;color:#fff;text-align:center;text-transform:uppercase;position:relative;}

#header-inner:after, #header-inner:before{content:'';height:100%;display:block;position:absolute;top:0;}
#header-inner:after{border-left:1px solid rgba(255,255,255,0.2);margin-left:5vw;left:0;}
#header-inner:before{border-right:1px solid rgba(255,255,255,0.2);margin-right:5vw;right:0;}

#nav-below{display:block;list-style:none;margin:0;padding:0;height:17vh;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(255,255,255,0.2);font-family:Marathon,palatino linotype,georgia,serif;font-size:35px;letter-spacing:2px;}
#nav-below a{color:#fff;margin:0 1.5vw;padding:0.5vw;}
#nav-below li:last-of-type{display:none;}
#nav-above{display:none;}

.banner-viewlinks{display:inline;padding:0;border:none;}
.current a{color:#fff;}

#header-text{background:transparent;border:none;margin:0;padding:8vh 0;}
#header-text a{color:#8B9B93;}
#banner-header:before{content:'';display:block;margin:0 auto 15px auto;width:50px;height:50px;background:url(https://i.imgur.com/MdTdtk6.png)center no-repeat;background-size:100%;}
#banner-header{font-family:Marathon,palatino linotype,georgia,serif;margin:0;font-size:40px;letter-spacing:8px;}
#banner-description{font-family:Josefin Sans,ms gothic;font-size:10px;margin:10px 0 0 0;letter-spacing:4px;}

/* BODY OF PAGE */

#pagebody{margin:3vw;}
#pagebody-inner{margin:0 auto;max-width:1300px;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;}

#alpha a, #alpha a:visited{color:#8B9B93;}
#alpha a:hover{text-decoration:none;}

.content-nav{margin:5px 0 0 0;}
.nav-top{display:none;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;margin-bottom:40px;}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry-inner{border:none;padding:0;}

#sticky-note .entry-header{text-align:center;color:#8B9B93;}
#sticky-note .entry-header h2{margin:0;padding:0;font-size:30px;}

#sticky-note .entry-content{margin-top:5px;}
#sticky-note .entry-text{min-height:0;padding:0;}

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

/* ENTRIES */

.entry{margin:0 0 4vw 0;padding:40px;background:#0A0A0A;position:relative;}
.entry-inner{padding-top:15px;}

.entry-header{background:transparent;border:none;padding:0;text-align:center;}
.entry-header h3{margin:0;padding:0;font-size:30px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#8B9B93;}

.entry-datetime{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);text-align:center;}

.inner-entry-userpic{position:absolute;text-align:center;padding:0;left:50%;margin-left:-35px;top:-30px;}
.inner-entry-userpic img{border-radius:100%;width:60px;height:60px;padding:5px;background:#0A0A0A;}
.outer-entry-userpic, .mid-entry-userpic{display:none;}

.pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #242826;margin:-10px auto 5px auto;}
.pic-poster{left:-12px;position:absolute;background:#242826;margin-top:-30px;padding:5px;text-align:center;line-height:1;font-size:11px;letter-spacing:1px;text-transform:uppercase;display:block;width:85px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);opacity:0;-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;}
.inner-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;}
.pic-poster img{display:none;}

.ljuser{font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;letter-spacing:1px;font-weight:normal;}

.entry-content{margin-top:20px;}
.entry-text{min-height:100px;overflow:auto;line-height:1.7;text-align:justify;}

.ljtags{margin:20px 0 0 0;font-size:9px;letter-spacing:1px;text-transform:uppercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#8B9B93;}

.entry-metadata{display:none;}

.entry-linkbar{margin:20px 0 0 0;padding:10px 0 0 0;border-top:1px solid rgba(255,255,255,0.1);font-size:9px;text-transform:uppercase;letter-spacing:2px;text-align:right;}
.entry-linkbar ul{list-style:none;padding-left:0;margin-left:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;}
.entry-linkbar li a:before{content:' / ';color:rgba(255,255,255,0.2);}
.entry-linkbar li:first-of-type a:before{content:'';}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;}

/* ARCHIVE VIEW */

.lj-view-archive .entry-content{margin-top:0;}
.yearlinks{text-align:center;font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;margin-bottom:10px;font-size:30px;}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:collapse;border:4px solid transparent;width:100%;}
td.monthlable, td.viewmonth{font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;background:transparent!important;font-size:20px;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;text-align:center;background:#242826!important;color:#fff;font-size:18px;}
.yeartable td{border:3px solid #0A0A0A!important;background:rgba(255,255,255,0.03);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha h2{font-size:30px;margin:0;}
.lj-view-tags #alpha, .lj-view-month #alpha{padding:40px;background:#0A0A0A;}

.ljtaglist{margin:0;padding:0;list-style:none;}
.ljtaglist li{margin-top:5px;}

/* SIDEBAR */

#beta-inner{font-size:15px;color:rgba(255,255,255,0.5);}

.module{padding:30px;background:#0a0a0a;margin:0;border:none;border-bottom:1px solid rgba(255,255,255,0.1);}
.module:last-of-type{border-bottom:none;}

.module-header{background:transparent;border:none;}
.module-header h3{margin:0;padding:0;font-size:30px;}
.module-header a, .module-header a:visited{color:#8B9B93;}

.module-customtext{padding:0;background:url(https://i.imgur.com/QHEqIz3.png)center;background-size:cover;height:60vh;display:flex;align-items:flex-end;font-family:Marathon,palatino linotype,georgia,serif;}
.module-customtext .module-inner{padding:30px;}
.module-customtext .module-header{display:none;}
.module-customtext .module-content{padding:20px;line-height:1.7;text-align:justify;background:rgba(0,0,0,0.5);}

.module-customtext2 .module-content{line-height:1.7;text-align:justify;}

.module-list{font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;letter-spacing:2px;}
.module-typelist ul, .module-pagesummary ul{list-style:none;margin:0 0 0 10px;padding:0;}
.module-typelist li a, .module-pagesummary li a{display:block;border-left:5px solid #242826;padding:2px 0 2px 10px;}

.module-calendar .module-content{text-align:center;}
.module-calendar table{border:none;font-size:small;margin-right:auto;margin-left:auto;margin-top:10px;width:100%;}
.module-calendar td{border:3px solid #0a0a0a;background:rgba(255,255,255,0.05);padding:5px;margin:5px;position:relative;}
.module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:#242826;padding:5px;color:#fff;}
.module-calendar th{color:#fff;font-weight:bold;}

.module-categories ul a{color:#fff;}
#tag-hierarchy ul{padding:0;margin:0;list-style:none;color:#8B9B93;}
#tag-hierarchy li:first-of-type{margin-top:0;}
#tag-hierarchy li{margin-top:20px;font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;letter-spacing:2px;}
#tag-hierarchy li li{margin-top:0;margin-left:20px;}
#tag-hierarchy li li a{font-family:Josefin Sans,ms gothic;font-size:12px;text-transform:none;letter-spacing:0;}
.tag-count{font-size:x-small;opacity:0.5;}

.all-link{font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;letter-spacing:2px;text-align:center;}

.module-layoutcredit{font-family:Marathon,palatino linotype,georgia,serif;text-transform:uppercase;letter-spacing:4px;text-align:center;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;}

.module-viewlinks, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* TINYICONS */

img[src*="img/userinfo.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_private.gif"], img[src*="img/icon_groups.gif"], img[src*="img/community.gif"]{background:transparent url(https://i.imgur.com/MdTdtk6.png)no-repeat!important;width:0!important;height:0!important;padding:16px 0 0 18px!important;margin-bottom:3px;background-size:16px!important;}

.entry-header img{margin-bottom:0;}

/* FOR MOBILE */

@media only screen and (max-width:800px){
.layout-two-column-left #alpha{margin:0;}
.layout-two-column-left #beta{float:none;width:auto;margin-bottom:3vw;}
}

Installation Guide

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

♡ Supported Layout Types:
One Column
Two Column (Sidebar on Left)
Two Column (Sidebar on Right)
♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: I. / II. / III. / IV.
♡ Fill in sticky note if desired.
♡ Fill in custom sidebar modules. The first module contains a custom background; leave blurb text blank if image-only is desired.
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

Josefin Sans - Page text
Marathon - Header text

IMAGES

https://i.imgur.com/MDfcwYb.jpg - Header background
https://i.imgur.com/MdTdtk6.png - Header icon and post/user icons
https://i.imgur.com/QHEqIz3.png - Sidebar blurb background

COLORS

255,255,255 Page text, header borders, entry date, entry links borders, some calendar elements, sidebar module borders (semi-transparent rgba value)

#fff Page links, header text, some calendar elements

#8b9b93 Headings, entry links, entry tags

#242826 Blockquote border, sidebar links lists border, userpic hover info background, some calendar elements

#1b1e1d Page background

#0A0A0A Header background, sidebar background, entry background

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: The Ritual

Information

Layout Coding

Installation Guide

Editing Guide

Terms of Use

Comments