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 make so many big, open layouts with large headings that I thought something teeny might be a fun change of pace. This layout supports almost all sidebar types, comes with a custom in-sidebar cast list, and the whole thing will scale up with just two quick value changes!

(Sorry, I'm feeling really crappy today so I'm keeping this short, haha.) Enjoy! ♥

Layout Coding

/*-- A SMALL AFFAIR - 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:'Raleway';font-style:normal;font-weight:400;src:local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/0dTEPzkLWceF7z0koJaX1A.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+2212, U+2215;}

@font-face{font-family:'Raleway';font-style:normal;font-weight:300;src:local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v12/-_Ctzj9b56b8RgXW8FArifk_vArhqVIZ0nv9q090hN8.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+2212, U+2215;}

body{margin:0;padding:0;background:#d7eef6 url(https://i.imgur.com/EiNSIvp.jpg)fixed repeat;font-family:Raleway,helvetica,arial,sans-serif;font-size:10px;color:#111;}
blockquote{font-style:italic;}
h1,h2,h3,h4,h5,h6{font-weight:300;text-transform:uppercase;margin:0;}
a, a:visited, a:active{color:#000;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:#77A0AF;text-decoration:none;}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;}

.layout-one-column #alpha{margin:0 50px;}

.layout-two-column-left #alpha{margin:0 0 0 33%;}
.layout-two-column-left #beta{float:left;width:30%;}

.layout-two-column-right #alpha{margin:0 33% 0 0;}
.layout-two-column-right #beta{float:right;width:30%;}

.layout-three-column-middle #alpha{margin:0 26.5%;}
.layout-three-column-middle #beta{float:left;width:24%;}
.layout-three-column-middle #gamma{float:right;width:24%;}

/* HEADER */

#header{padding:0;color:#000;background:#fff;text-transform:uppercase;letter-spacing:1px;}

#banner-text{height:40px;display:flex;justify-content:space-between;align-items:center;flex-direction:row-reverse;padding:0 30px;}

#nav-above{list-style:none;margin:0;padding:0;font-size:9px;}
#nav-above li:last-of-type{display:none;}
#nav-above a{display:inline-block;margin-left:13px;padding:4px 0 2px 0;border-bottom:2px solid transparent;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.current a{color:#000;border-bottom:2px solid #D7EEF6!important;}

#header-text{background:transparent url(https://i.imgur.com/jC7Lik6.png)center left no-repeat;border:none;margin:0;padding:0 0 0 25px;}
#header-text a{color:#77A0AF;}
#banner-header{font-family:Raleway,helvetica,arial,sans-serif;text-align:left;font-size:16px;}
#banner-description{display:none;font-family:Raleway,helvetica,arial,sans-serif;text-align:left;font-size:10px;font-weight:300;margin:0;}

/* BODY OF PAGE */

#pagebody{margin:60px auto;width:700px;}
.layout-three-column-middle #pagebody{width:850px;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;}
#alpha a, #alpha a:visited{color:#77A0AF;}
#alpha a:hover{color:#000;text-decoration:none;}

.content-nav{margin:0;font-weight:300;text-transform:uppercase;font-size:150%;}
.nav-top{display:none;}
.nav-bottom{text-align:center;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;margin:0 0 4vh 0;}
#tagpage-header h2{font-size:150%;}

.date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note .entry{padding:0;}
#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;color:#fff;background:#77A0AF;padding:10px;}
#sticky-note .entry-header h2{color:#fff;}
#sticky-note .entry-footer{display:none;}
#sticky-note .entry-content{margin-top:0;}
#sticky-note .entry-text{padding:0;padding:25px;}

.entry{margin:0 0 4vh 0;padding:20px;background:#fff;position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:150%;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#000;}

.entry-datetime{font-size:85%;color:#999;text-transform:uppercase;font-weight:bold;}
.lj-view-day .entry-datetime{display:none;}

.mid-entry-userpic{display:block;float:left;text-align:center;padding:0;margin-top:-7px;margin-right:10px;}
.mid-entry-userpic img{width:30px;height:30px;border-radius:60px;padding:3px;border:1px solid #D7EEF6;margin-bottom:5px;}
.outer-entry-userpic, .inner-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 #77A0AF;margin:-10px auto 5px auto;}
.pic-poster{left:-10px;position:absolute;background:#D7EEF6;border:1px solid #77A0AF;margin-top:-20px;padding:5px;text-align:center;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;}
.mid-entry-userpic:hover .pic-poster{opacity:1;margin-top:0;}
.pic-poster img{display:none;}

.entry-content{margin-top:20px;}
.entry-text{min-height:50px;overflow:auto;padding:0 15px 5px 15px;text-align:justify;line-height:150%;}

.entry-metadata{display:none;}
.ljtags{margin:20px 0 0 0;text-transform:uppercase;font-size:85%;letter-spacing:1px;font-weight:bold;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#999;}

.entry-linkbar{font-size:85%;text-transform:uppercase;font-weight:bold;text-align:right;border-top:1px solid #D7EEF6;padding-top:10px;}
.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:0 0 0 10px;}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;text-transform:uppercase;font-size:200%;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:collapse;border:4px solid transparent;width:100%;}
td.monthlable, td.viewmonth{text-transform:uppercase;font-size:140%;background:transparent!important;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{text-transform:uppercase;font-size:100%;text-align:center;background:transparent!important;color:#77A0AF;font-weight:bold;}
.yeartable td{border:3px solid #fff!important;background:rgba(0,0,0,0.03);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha h2{font-size:150%;}
.lj-view-tags #alpha, .lj-view-month #alpha{padding:30px;background:#fff;}

/* SIDEBARS */

#beta-inner, #gamma-inner{font-size:100%;color:#111;line-height:120%;}

.module{padding:0;background:#fff;margin:0 0 4vh 0;border:none;}
.module-content{padding:20px;}

.module-header{background:#77A0AF;border:none;padding:10px;}
.module-header h3{margin:0;padding:0;font-size:130%;color:#fff;}
.module-header a, .module-header a:visited{color:#fff;}

.module-list{list-style:none;text-transform:uppercase;font-size:80%;letter-spacing:1px;font-weight:bold;}
.module-list, .module-list-item{margin:0!important;padding:0!important;}
.module-list-item:first-of-type{margin-top:0;}
.module-list-item a{display:block;padding:0 0 0 15px;margin-top:6px;border-left:1px solid #D7EEF6;}
.module-list-item a:hover{border-left:15px solid #D7EEF6;}

.module-customtext{text-align:justify;}
.module-customtext .module-content{padding:20px;line-height:130%;}

.module-customtext2 .module-content{padding:15px;text-align:center;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.module-customtext2 a{width:20%;padding:1%;border:1px solid rgba(0,0,0,0.1);margin-bottom:0.8vh;}
.module-customtext2 a:hover{border:1px solid #77A0AF;}
.module-customtext2 img{width:100%;}
.module-customtext2 .all-link{width:100%;padding:0;border:none;margin-bottom:0;}
.module-customtext2 .all-link:hover{border:none;}

.module-calendar .module-content{text-align:center;}
.module-calendar table{border:none;font-size:95%;font-weight:bold;margin:0 auto;width:100%;}
.module-calendar td{border:1px solid rgba(0,0,0,0.08);padding:4px;position:relative;}
.module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:#77A0AF;padding:4px;color:#fff;}
.module-calendar th{color:#000;}

#tag-hierarchy ul{padding:0;margin:0;list-style:none;}
#tag-hierarchy li:first-of-type{margin:0;}
#tag-hierarchy li{margin:10px 0 0 0;text-transform:uppercase;font-size:80%;letter-spacing:3px;font-weight:bold;color:#77A0AF;}
#tag-hierarchy li ul{padding-left:20px;}
#tag-hierarchy li li{margin:3px 0 0 0;text-transform:none;font-size:120%;letter-spacing:0;font-weight:normal;}
.tag-count{display:none;}

.all-link{text-align:center;text-transform:uppercase;font-size:80%;letter-spacing:1px;font-weight:bold;}
.all-link p{margin:5px 0 0 0;}
.all-link a{color:#77A0AF;}

.module-layoutcredit{background:transparent;margin:0;text-align:center;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit .module-content{padding:0;}
.module-layoutcredit p{padding:0;margin:0;text-transform:uppercase;font-size:80%;letter-spacing:3px;font-weight:bold;}

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

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

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:

♡ Supported Layout Types:
One Column
Two Column (Sidebar on Left)
Two Column (Sidebar on Right)
Three Column (Content in Middle)
♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ Display of tags in sidebar: List
♡ Fill in and order custom sidebar modules as needed. If you want a cast list like the demo shows it's below!
♡ 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!

TO ADD IN A CAST LIST

Use the second custom text for your cast list and paste in the following:

<a href="JOURNALURL" title="Name"><img src="ICON"></a> <a href="JOURNALURL" title="Name"><img src="ICON"></a> <a href="JOURNALURL" title="Name"><img src="ICON"></a> <a href="CASTLINKURL" class="all-link">VIEW ALL CHARACTERS</a>

SCALING THE LAYOUT UP

font-size:10px; - This will scale all page font up or down (the rest of the fonts are a percentage based on this font size)
width:700px; - Overall container width for One Column and Two Column
width:850px; - Overall container width for Three Column

FONTS

Raleway - Page text (comes up again for the header title)
font-weight:300; - Header text (same font in a different weight; change this to a font-family if you're replacing it with a different font)

IMAGES

https://i.imgur.com/EiNSIvp.jpg - Background image
https://i.imgur.com/jC7Lik6.png - Header and user/lock icons

COLORS

#fff Header, module, and entry background; module and sticky header text; some calendar elements

#d7eef6 Current page link border; userpic border and userinfo hover background; entry links border; sidebar link border

#999 Entry date and tag links

#77a0af Header title and header link hover; main content link color; module and sticky header background; userinfo hover border; cast list border hover; tag group title color; some calendar elements

#111 Page text color

#000 Main content link hover color; header links; entry header color; some calendar elements

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: A Small Affair

Information

Layout Coding

Installation Guide

Editing Guide

Terms of Use