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

light image preview |

tess020
dark image preview |

Information

Hey guys! I'm really excited to bring you this newest layout, which features an asymmetrical design and a robust sidebar with all modules available for use and custom styled! This includes both tag lists OR clouds, and the calendar and page summary!

The best part about it? One of my lovely patrons,

desiree, was kind enough to donate her subscription purchase this month to you guys! Her request was a free-to-use layout that is community-friendly—and what better way to do that than a really bitchin' sidebar?

This layout has a light and dark version, two header backgrounds, and I've added an edit in the guide below for those of you who don't need character PB cutouts in your header. This can easily use a solid color or a background image, as you can see in the previews! Enjoy, and thank you so much, Desiree! ♥

Layout Coding: Light

/*-- TILT [LIGHT] - TESSISAMESS - 2017 --*/
/*-- 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: 'Economica';font-style: normal;font-weight: 700;src: local('Economica Bold'), local('Economica-Bold'), url(https://fonts.gstatic.com/s/economica/v4/UK4l2VEpwjv3gdcwbwXE9Ogdm0LZdjqr5-oayXSOefg.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}
@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/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}

body{color:#333;background:#fff;margin:0;padding:0;font-family:Open Sans,helvetica,arial,sans-serif;font-size:15px;}
blockquote{margin:45px 12%;padding:10px 20px;font-style:normal;position:relative;background:#ddd;z-index:2;}
blockquote:before, blockquote:after{content:'';background:#ddd;height:30px;left:0;right:0;z-index:-1;}
blockquote:before{transform:skewY(-2deg);position:absolute;top:-15px;}
blockquote:after{transform:skewY(-2deg);position:absolute;bottom:-15px;}
h1, h2, h3, h4{font-family:Economica,helvetica,sans-serif;text-transform:uppercase;color:#ABCACA;margin:0;padding:0;}
a, a:visited, a:active{color:#ABCACA;text-decoration:none;}
a:hover{text-decoration:none;opacity:0.5;}

/* WHOLE PAGE CONTAINERS */
 
.layout-two-column-left #alpha{margin:0 0 0 410px;}
.layout-two-column-left #beta{float:left;width:330px;}

#container{background:#FDD2CB url()center fixed;background-size:cover;padding-bottom:100px;}

/* HEADER */

#header{padding:0;color:#fff;height:350px;background:url(CUTOUT)center bottom no-repeat;background-size:auto 100%;}

#nav-above{list-style:none;margin:0;padding:5px;font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:bold;}
#nav-above a{color:#fff;display:inline-block;padding:0 5px;}
#nav-above li:nth-of-type(5), #nav-above li:nth-of-type(4):after{display:none;}
#nav-above li:after{content:'/';}
.banner-viewlinks{display:inline;padding:0;border:none;}
.current a{color:#fff;}

#header-text{background:transparent;border:none;margin:0;padding:0;display:inline;position:absolute;top:100px;left:50%;margin-left:100px;}
#header-text a{color:#fff;}
#banner-header{font-family:Economica,helvetica,sans-serif;text-transform:uppercase;text-align:left;}
#banner-description{font-family:Economica,helvetica,sans-serif;text-transform:uppercase;text-align:center;background:#fff;color:#FDD2CB;margin:0;padding:0;}

#nav-below{display:none;}

/* BODY OF PAGE */

#pagebody{background:#fff;position:relative;padding:50px 0;z-index:2;} 
#pagebody:before, #pagebody:after{content:'';background:#fff;height:60px;left:0;right:0;z-index:1;}
#pagebody:before{transform:skewY(-1.8deg);position:absolute;top:-30px;}
#pagebody:after{transform:skewY(1.8deg);position:absolute;bottom:-30px;}
#pagebody-inner{width:70%;min-width:1000px;margin:0 auto;}

/* MAIN COLUMN */

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

#alpha a, #alpha a:visited{color:#C39F99;}

.content-nav{margin:.5em 1em;}

.nav-top{text-align:right;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;}

.date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:left;color:#ABCACA;}
#sticky-note .entry-footer{display:none;}
#sticky-note .entry-text{padding:0;}

.entry{margin:0 100px 75px 0;padding:0;position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:30px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#ABCACA;}
.entry-datetime{font-size:14px;color:#999;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;}

.entry-content{margin-top:1em;}
.entry-text{min-height:100px;overflow:auto;text-align:justify;}
.entry-text img{max-width:100%;}

.inner-entry-userpic{position:absolute;text-align:center;padding:0 0 0 5px;top:0;bottom:0;right:-95px;border-left:2px solid #ddd;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;font-size:10px;}
.inner-entry-userpic img{width:70px;height:70px;margin-bottom:5px;}
.pic-poster img{display:none;}

.entry-metadata{display:none;}
.lj-view-friends .ljtags{top:105px;}
.ljtags:before{content:'CATEGORIES';font-size:14px;}
.ljtags{position:absolute;width:70px;right:-95px;top:80px;margin:0;font-size:0;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;text-align:left;}
#alpha .ljtags a{display:block;font-size:12px;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#999;}

.entry-linkbar{font-size:10px;text-transform:uppercase;letter-spacing:1px;text-align:right;}
.entry-linkbar ul{list-style:none;padding:30px 0 0 0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;} 
.entry-linkbar a{display:inline-block;margin-left:15px;}
li.first-el{border-left:none;padding-left:0;}

.outer-entry-userpic, .mid-entry-userpic, .header-poster{display:none;}

/* ARCHIVE VIEW */

.yearlinks{font-family:Economica,helvetica,sans-serif;text-transform:uppercase;}
.yeartable{border-collapse:collapse;border:none;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;}
td.monthlable{text-align:left;background:#fff!important;}
td.viewmonth{text-align:right;background:#fff!important;}
.dayname{text-align:center;color:#FDD2CB;font-weight:bold;background:#fff!important;}
.yeartable td{border:3px solid #fff!important;background:#eee;padding:5px;margin:5px!important;position:relative;}

/* TAG LIST */

.ljtaglist{list-style:none;}
.ljtaglist li{display:block;border-bottom:1px solid #ddd;padding:4px;}
.lj-view-tags #alpha{padding:0;}

/* SIDEBAR */

#beta-inner{font-size:14px;color:#333;}

.module{padding:0;background:transparent;margin:0 0 40px 0;border:none;}
.module-content{text-align:justify;}

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

.module-customtext img{border-radius:400px;max-width:80%;margin:0 auto;display:block;}
.module-customtext .module-content{padding:0;}
.module-customtext2 .module-header{text-align:center;}

.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 #fff;background:#eee;padding:5px;margin:5px;position:relative;}
.module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:#FDD2CB;padding:5px;color:#fff;}
.module-calendar th{color:#FDD2CB;font-weight:bold;}

.module-categories ul a{color:#C39F99;}
#tag-hierarchy ul{padding:0;margin:0;list-style:none;}
#tag-hierarchy li{margin-top:10px;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;font-size:19px;}
#tag-hierarchy li li{margin-top:0;margin-left:20px;}
#tag-hierarchy li li a{font-family:Open Sans,helvetica,sans-serif;text-transform:lowercase;font-size:14px;}
.tag-count{font-size:x-small;opacity:0.5;}
#tag-cloud{text-align:center;}
#tag-cloud ul{list-style:none;padding:0;margin:0;}
#tag-cloud li{float:none;padding:0;display:inline;}
#tag-cloud li a{display:inline-block;padding:2px 4px;}
#tagclear{clear:both;}
.all-link{font-size:10px;text-transform:uppercase;letter-spacing:2px;text-align:center;}

.module-pagesummary ul, .module-typelist ul{margin:0;padding:0;list-style:none;}
.module-pagesummary li a, .module-typelist li a{display:block;border-bottom:1px solid #ddd;padding:4px;}

.module-layoutcredit{font-size:10px;text-transform:uppercase;letter-spacing:2px;padding:0 20px;margin:0 10%;position:relative;background:#ddd;z-index:2;}
.module-layoutcredit a{color:#fff;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;text-align:center;}
.module-layoutcredit:before, .module-layoutcredit:after{content:'';background:#ddd;height:15px;left:0;right:0;z-index:-1;}
.module-layoutcredit:before{transform:skewY(-2deg);position:absolute;top:-10px;}
.module-layoutcredit:after{transform:skewY(-2deg);position:absolute;bottom:-10px;}

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

/* ICON REPLACEMENTS */

img[src*="img/userinfo.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_private.gif"], img[src*="img/community.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(ICONIMG)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;}

Layout Coding: Dark

/*-- TILT [DARK] - TESSISAMESS - 2017 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* GENERAL CLASSES */

body{color:#aaa;background:#000;margin:0;padding:0;font-family:Open Sans,helvetica,arial,sans-serif;font-size:15px;}
blockquote{margin:45px 12%;padding:10px 20px;font-style:normal;position:relative;background:#111;z-index:2;}
blockquote:before, blockquote:after{content:'';background:#111;height:30px;left:0;right:0;z-index:-1;}
blockquote:before{transform:skewY(-2deg);position:absolute;top:-15px;}
blockquote:after{transform:skewY(-2deg);position:absolute;bottom:-15px;}
h1, h2, h3, h4{font-family:Economica,helvetica,sans-serif;text-transform:uppercase;color:#887194;margin:0;padding:0;}
a, a:visited, a:active{color:#887194;text-decoration:none;}
a:hover{text-decoration:none;opacity:0.5;}

/* WHOLE PAGE CONTAINERS */
 
.layout-two-column-left #alpha{margin:0 0 0 410px;}
.layout-two-column-left #beta{float:left;width:330px;}

#container{background:#323264 url(BGIMG)center bottom fixed;background-size:cover;padding-bottom:100px;}

/* HEADER */

#header{padding:0;color:#fff;height:350px;background:url(CUTOUT)center bottom no-repeat;background-size:auto 100%;}

#nav-below{display:none;}

/* BODY OF PAGE */

#pagebody{background:#000;position:relative;padding:50px 0;z-index:2;} 
#pagebody:before, #pagebody:after{content:'';background:#000;height:60px;left:0;right:0;z-index:1;}
#pagebody:before{transform:skewY(-1.8deg);position:absolute;top:-30px;}
#pagebody:after{transform:skewY(1.8deg);position:absolute;bottom:-30px;}
#pagebody-inner{width:70%;min-width:1000px;margin:0 auto;}

/* MAIN COLUMN */

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

#alpha a, #alpha a:visited{color:#323264;}

.content-nav{margin:.5em 1em;}

.nav-top{text-align:right;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;}

.date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:left;color:#887194;}
#sticky-note .entry-footer{display:none;}
#sticky-note .entry-text{padding:0;}

.entry{margin:0 100px 75px 0;padding:0;position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:30px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#887194;}
.entry-datetime{font-size:14px;color:#444;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;}

.entry-content{margin-top:1em;}
.entry-text{min-height:100px;overflow:auto;text-align:justify;}
.entry-text img{max-width:100%;}

.inner-entry-userpic{position:absolute;text-align:center;padding:0 0 0 5px;top:0;bottom:0;right:-95px;border-left:2px solid #111;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;font-size:10px;}
.inner-entry-userpic img{width:70px;height:70px;margin-bottom:5px;}
.pic-poster img{display:none;}

.outer-entry-userpic, .mid-entry-userpic, .header-poster{display:none;}

/* ARCHIVE VIEW */

.yearlinks{font-family:Economica,helvetica,sans-serif;text-transform:uppercase;}
.yeartable{border-collapse:collapse;border:none;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;}
td.monthlable{text-align:left;background:#000!important;}
td.viewmonth{text-align:right;background:#000!important;}
.dayname{text-align:center;color:#323264;font-weight:bold;background:#000!important;}
.yeartable td{border:3px solid #000!important;background:#111;padding:5px;margin:5px!important;position:relative;}

/* TAG LIST */

.ljtaglist{list-style:none;}
.ljtaglist li{display:block;border-bottom:1px solid #111;padding:4px;}
.lj-view-tags #alpha{padding:0;}

/* SIDEBAR */

#beta-inner{font-size:14px;color:#aaa;}

.module{padding:0;margin:0 0 40px 0;border:none;background:transparent;}
.module-content{text-align:justify;}

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

.module-customtext img{border-radius:400px;max-width:80%;margin:0 auto;display:block;}
.module-customtext .module-content{padding:0;}
.module-customtext2 .module-header{text-align:center;}

.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 #000;background:#111;padding:5px;margin:5px;position:relative;}
.module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:#323264;padding:5px;color:#000;}
.module-calendar th{color:#323264;font-weight:bold;}

.module-categories ul a{color:#323264;}
#tag-hierarchy ul{padding:0;margin:0;list-style:none;}
#tag-hierarchy li{margin-top:10px;font-family:Economica,helvetica,sans-serif;text-transform:uppercase;font-size:19px;}
#tag-hierarchy li li{margin-top:0;margin-left:20px;}
#tag-hierarchy li li a{font-family:Open Sans,helvetica,sans-serif;text-transform:lowercase;font-size:14px;}
.tag-count{font-size:x-small;opacity:0.5;}
#tag-cloud{text-align:center;}
#tag-cloud ul{list-style:none;padding:0;margin:0;}
#tag-cloud li{float:none;padding:0;display:inline;}
#tag-cloud li a{display:inline-block;padding:2px 4px;}
#tagclear{clear:both;}
.all-link{font-size:10px;text-transform:uppercase;letter-spacing:2px;text-align:center;}

.module-pagesummary ul, .module-typelist ul{margin:0;padding:0;list-style:none;}
.module-pagesummary li a, .module-typelist li a{display:block;border-bottom:1px solid #111;padding:4px;}

.module-layoutcredit{font-size:10px;text-transform:uppercase;letter-spacing:2px;padding:0 20px;margin:0 10%;position:relative;background:#222;z-index:2;}
.module-layoutcredit a{color:#000;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;text-align:center;}
.module-layoutcredit:before, .module-layoutcredit:after{content:'';background:#222;height:15px;left:0;right:0;z-index:-1;}
.module-layoutcredit:before{transform:skewY(-2deg);position:absolute;top:-10px;}
.module-layoutcredit:after{transform:skewY(-2deg);position:absolute;bottom:-10px;}

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

/* ICON REPLACEMENTS */

Header Replacement: No Image

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title AND subtitle, 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)
♡ Disable customized comment pages for your journal: Yes
♡ Navlink titles: Recent, Archive, Friends, Profile
♡ Link text to leave a comment: Comment
♡ Fill in sticky note if desired.
♡ Fill in your sidebar as desired and order them in whatever way you need! Tags can be set to list or cloud and both blurbs can be used as text or otherwise (first blurb is set to display your image as rounded.)
♡ 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!

PLACEHOLDER VALUES

CUTOUT - Header PNG image
BGIMG - Background image (leave as is for color only)
ICONIMG - User/lock icon

FONTS

Open Sans - Page text
Economica - Header text

COLORS (LIGHT)

#fff - Header text/links, content background color, calendar/credit link color
#eee - Calendar day background (each day)
#ddd - Blockquote background, tags page borders, sidebar link borders, credit background
#fdd2cb - Header/footer background, calendar elements, subtitle text
#c39f99 - Entry and sidebar links
#abcaca - Sidebar and entry headings
#999 - Date and tags color
#333 - Bulk text color

COLORS (DARK)

#fff - Header text/links
#aaa - Bulk text color
#887194 - Sidebar and entry headings
#444 - Date and tags color
#323264 - Header/footer background, calendar elements, subtitle text, sidebar links
#222 - Credit background color
#111 - Blockquote background, tags page borders, sidebar link borders
#000 - Some link colors, content background color

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: Tilt