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

tess064
Square sidebar | Triangle sidebar | Parallelogram sidebar

Information

Hey guys! It's my birthday month—I'm 31 tomorrow!—so the theme is one of my favorite things: '90s aesthetic! I'm super hype for this—I've been dying for July to get here already so I could start my '90s codes ever since I wrote up my annual schedule, haha. This Generator layout comes with four shape options for the sidebar, so make sure to check out the preview images! I have a lot more info and announcements to make, ranging from health to life updates to project plans, but I'll do that on Thursday. ♥ Enjoy!

Layout Coding

FRIENDS_OPT_ITEMS=>20

FRIENDS_WEBSITE<=

<header>
		<nav class="material-icons">
			<a href="http://JOURNALNAME.insanejournal.com/">home <span>Home</span></a>
			<a href="http://JOURNALNAME.insanejournal.com/profile">favorite <span>Profile</span></a>
			<a href="http://JOURNALNAME.insanejournal.com/friends">group <span>Friends</span></a>
			<a href="http://tessisamess.insanejournal.com/">copyright <span>Layout</span></a>
		</nav>
	</header>

<aside>
		<h1>TOP_TITLE</h1>
		<h2>BOTTOM_TITLE</h2>

<nav>
			<a href="">LINK_ONE</a>
			<a href="">LINK_TWO</a>
			<a href="">LINK_THREE</a>
			<a href="">LINK_FOUR</a>
		</nav>

</aside>

<div> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td colspan="2">

<div class="comments">
		<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
		<a href="%%urlpost%%">ADD ONE</a>
	</div>

</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<aside>
		<h1>TOP_TITLE</h1>
		<h2>BOTTOM_TITLE</h2>

<nav>
			<a href="">LINK_ONE</a>
			<a href="">LINK_TWO</a>
			<a href="">LINK_THREE</a>
			<a href="">LINK_FOUR</a>
		</nav>

</aside>

<div> </div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td colspan="2">

<div class="comments">
		<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
		<a href="%%urlpost%%">ADD ONE</a>
	</div>

</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=

<title>PAGE_TITLE</title>
	<link rel="shortcut icon" href="https://i.imgur.com/GvhycUX.png" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<meta name="viewport" content="device-width, initial-scale=1.0">
	<meta charset="UTF-8">

<style>
<!--

/*-- TOTALLY 90S- TESSISAMESS - 2019 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--darkest: #000; /* things */
	--darker: #111; /* date and footer nav */
	--dark: #777; /* info block text */
	--medium: #999; /* page text */
	--light: #eee; /* things */
	--lightest: #fff; /* things */

--accent1: #FF69B4; /* pink accent */
	--accent2: #7F52CA; /* purple accent */
	--accent3: #77E5A1; /* green accent */

--main-font: Dosis,helvetica,arial,sans-serif;
	--headings: Trash,arial black,gadget,sans-serif;
	--title-font: Trash,arial black,gadget,sans-serif;

--private: url(https://i.imgur.com/dJgLxi8.png)center no-repeat!important;
	--locked: url(https://i.imgur.com/tIooCJT.png)center no-repeat!important;
	--customs: url(https://i.imgur.com/LcxM0s0.png)center no-repeat!important;
}

/* GENERAL */

@font-face{font-family:Trash;src:url(https://dl.dropbox.com/s/b69partc0v65sxt/TrashHand.otf);}

::selection{background:var(--accent1);color:var(--lightest);}
::-moz-selection{background:var(--accent1);color:var(--lightest);}

body{background:var(--light);background-attachment:fixed;background-image:linear-gradient(rgba(0,0,0,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.1) 1px,transparent 1px);background-size:15px 15px;margin:30px 0;padding:0;}
body,table,tr,td{text-align:justify;font-family:var(--main-font);font-size:14px;color:var(--darker);}

a{color:var(--accent1);text-decoration:none;}
a:hover{color:var(--darkest);text-decoration:none;}

h1,h2,h3,h4{padding:0;margin:0;color:var(--accent2);font-family:var(--headings);}

hr{width:60px;height:30px;background:var(--accent3);-webkit-clip-path:polygon(50% 18%, 79% 61%, 100% 38%, 100% 52%, 80% 77%, 50% 36%, 25% 77%, 0 52%, 0 38%, 24% 61%);clip-path:polygon(50% 18%, 79% 61%, 100% 38%, 100% 52%, 80% 77%, 50% 36%, 25% 77%, 0 52%, 0 38%, 24% 61%);}

blockquote{background:var(--light);padding:15px;box-shadow:1px 1px 0 0 var(--accent3),2px 2px 0 0 var(--accent3),3px 3px 0 0 var(--accent3),4px 4px 0 0 var(--accent3),5px 5px 0 0 var(--darkest);}
ul{list-style:square;margin:0;}
img{max-width:100%;}

summary{cursor:pointer;}
summary:focus{outline:none;}

.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}
.ljuser a[href*="asylum"][href*="profile"]:before{content:'#';}

/* HEADER */

header{visibility:visible;position:fixed;top:20px;left:0;bottom:20px;width:35px;background:var(--accent3);text-align:center;box-shadow:1px 1px 0 0 var(--accent2),2px 2px 0 0 var(--accent2),3px 3px 0 0 var(--accent2),4px 4px 0 0 var(--accent2),5px 5px 0 0 var(--darkest);}
header nav{margin:20px 0 0 0;}
header nav a{display:block;margin:0 0 15px 0;color:var(--lightest);font-size:16px;position:relative;}
header nav a:hover span{display:block;}
header nav a span{display:none;position:absolute;top:0;left:29px;font-size:9px;font-family:var(--main-font);background:var(--darker);color:var(--lightest);padding:3px 0;letter-spacing:1px;width:55px;text-transform:uppercase;}

/* SIDEBAR */

aside{visibility:visible;position:fixed;top:40px;left:130px;width:250px;text-align:center;line-height:1;}
aside h1{font-size:16px;text-align:left;font-family:var(--main-font);text-transform:uppercase;color:var(--accent2);letter-spacing:1px;}
aside h2{font-size:85px;text-align:right;color:var(--darkest);text-shadow:1px 1px 0 var(--accent1),2px 2px 0 var(--accent1),3px 3px 0 var(--accent1),4px 4px 0 var(--accent1),5px 5px 0 var(--darkest);}

aside nav{margin:30px 0 0 0;font-family:var(--title-font);font-size:20px;line-height:1;}
aside nav a{display:block;padding:5px;background:var(--accent2);border:2px solid var(--accent2);color:var(--lightest);margin:0 0 5px 0;box-shadow:1px 1px 0 0 var(--accent1),2px 2px 0 0 var(--accent1),3px 3px 0 0 var(--accent1),4px 4px 0 0 var(--accent1),5px 5px 0 0 var(--darkest);}
aside nav a:hover{background:var(--accent1);border:2px solid var(--accent3);box-shadow:1px 1px 0 0 var(--accent3),2px 2px 0 0 var(--accent3),3px 3px 0 0 var(--accent3),4px 4px 0 0 var(--accent3),5px 5px 0 0 var(--darkest);}

.badge{display:block;width:200px;position:relative;margin:30px auto 0 auto;}
.badge img{display:block!important;position:relative;z-index:2;margin:0 auto;}
.badge:before, .badge:after{display:block;content:'';position:absolute;z-index:1;}

.circle:before{width:70px;height:70px;border:5px solid var(--accent3);transform:rotate(-7deg);left:0;}
.circle:after{width:90px;height:70px;-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);background:var(--accent2);top:30px;right:0;transform:rotate(7deg);}
.circle img{border-radius:100%;border:5px solid var(--accent1);}

.square{margin-left:30px;}
.square:before{width:80px;height:80px;border:5px solid var(--accent3);border-radius:100%;left:-20px;}
.square:after{width:90px;height:70px;-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);background:var(--accent2);top:30px;right:0;transform:rotate(7deg);}
.square img{border:5px solid var(--accent1);}

.triangle:before{width:80px;height:80px;border:5px solid var(--accent3);border-radius:100%;left:20px;}
.triangle:after{-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);background:var(--accent1);width:115px;height:115px;top:-5px;left:55px;}
.triangle img{-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);}

.parallel{margin-left:55px;}
.parallel:before{width:100px;height:80px;background:var(--accent3);z-index:2;top:20px;left:-40px;-webkit-clip-path: polygon(0 0, 38% 43%, 63% 0, 100% 33%, 100% 46%, 66% 15%, 39% 61%, 0 15%);
clip-path: polygon(0 0, 38% 43%, 63% 0, 100% 33%, 100% 46%, 66% 15%, 39% 61%, 0 15%);}
.parallel:after{width:110px;height:110px;top:-5px;left:-5px;background:var(--accent1);-webkit-clip-path:polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);clip-path:polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);}
.parallel img{-webkit-clip-path:polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);clip-path:polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);}

/* ENTRIES */

table{width:620px;margin-right:100%;margin-left:475px;}
.entrybox{visibility:visible;margin-bottom:30px;background:var(--lightest);padding:30px 25px 25px 25px;position:relative;}
.entrybox table{line-height:1.6;}

.entrybox a{font-weight:bold;transition:background-size 0.4s ease;background:linear-gradient(to bottom, transparent 62%, #77E5A1 0) center center/0% 75% no-repeat;}
.entrybox a:hover{background-size:100% 100%;}
.entrybox a:active{background-size:70% 100%;}

/* ENTRY SUBJECT */

td.caption{background:var(--accent2);position:absolute;top:0;left:0;right:0;line-height:0;padding:5px 10px;text-align:left;color:var(--accent1);font-size:30px;font-family:var(--title-font);text-shadow:1px 1px 0 var(--darkest),2px 2px 0 var(--darkest);}

/* DATE & TIME */

.date{color:var(--medium);font-size:13px;}
.entrybox td.index{position:absolute;left:25px;bottom:25px;color:transparent;font-size:0;}

/* COMMENT FOOTER */

.comments{text-align:right;padding:10px 0 0 0;margin:15px 0 0 0;border-top:1px solid rgba(0,0,0,0.1);font-size:12px;}
.comments a{margin:0 0 0 10px;}

/* USERPICS */

.entrybox table table table td{position:absolute;top:0;right:-100px;text-align:center;padding:0;}
.entrybox a.index img{width:70px;height:70px;border:7px solid var(--accent3);box-shadow:1px 1px 0 0 var(--accent2),2px 2px 0 0 var(--accent2),3px 3px 0 0 var(--accent2),4px 4px 0 0 var(--darkest);}
.entrybox a.index font{display:block;margin:9px 0 0 0;background:var(--accent1);box-shadow:1px 1px 0 0 var(--accent2),2px 2px 0 0 var(--accent2),3px 3px 0 0 var(--accent2),4px 4px 0 0 var(--darkest);font-size:11px;color:var(--lightest)!important;text-transform:uppercase;}

/* PAGE NAVIGATION */

p:last-of-type table{z-index:200;position:fixed;bottom:20px;left:9px;display:block;width:16px;overflow:hidden;}
p:last-of-type table .meta, p:last-of-type table .index{color:transparent;font-size:0;}
p:last-of-type table .meta a{color:transparent;font-size:0;display:block;margin:0 0 15px 0;width:16px;height:16px;filter:invert(100%);background:url(http://i.imgur.com/cVU7vBl.png)center no-repeat;background-size:16px;}
p:last-of-type table .meta a + a{background:url(http://i.imgur.com/RZrp7cR.png)center no-repeat;background-size:16px;}
p:last-of-type table .meta a:hover{filter:invert(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:20px 0 0 20px!important;margin:-15px 0 0 0;border-radius:100%;border:2px solid var(--accent2);}
img[src*="img/icon_private.gif"]{background:var(--lightest) var(--private);}
img[src*="img/icon_protected.gif"]{background:var(--lightest) var(--locked);}
img[src*="img/icon_groups.gif"]{background:var(--lightest) var(--customs);}

/* DISABLED & HIDDEN ELEMENTS - DO NOT EDIT */

/* ORIGINAL TOP HEADER */ .shadowed{visibility:hidden;position:absolute;top:0;left:0;right:0;height:0;background:transparent;}
/* TOP HEADER CONTENTS */ .shadowed img, tr.caption, .index3, table table table table .meta {display:none;}
/* ALL ORIGINAL TABLE STYLING */ table,tr,td{border:none;background:transparent;padding:0;}
/* INNER-ENTRY */ table table{width:100%;margin:0;}
/* HIDES USERPIC INFO BRACKETS */ .entrybox table table table td[align=center]{color:transparent;text-align:center;font-size:0;}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td colspan="2">

<div class="comments">
		<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
		<a href="%%urlpost%%">ADD ONE</a>
	</div>

</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>10

LASTN_DATE_FORMAT=><span class="date">%%mm%%/%%dd%%/%%yy%%</span>

CALENDAR_WEBSITE<=

<aside>
		<h1>TOP_TITLE</h1>
		<h2>BOTTOM_TITLE</h2>

<nav>
			<a href="">LINK_ONE</a>
			<a href="">LINK_TWO</a>
			<a href="">LINK_THREE</a>
			<a href="">LINK_FOUR</a>
		</nav>

</aside>

<div> </div>
<=CALENDAR_WEBSITE

FRIENDS_DATE_FORMAT=><span class="date">%%mm%%/%%dd%%/%%yy%%</span>

LASTN_WEBSITE<=

<aside>
		<h1>TOP_TITLE</h1>
		<h2>BOTTOM_TITLE</h2>

<nav>
			<a href="">LINK_ONE</a>
			<a href="">LINK_TWO</a>
			<a href="">LINK_THREE</a>
			<a href="">LINK_FOUR</a>
		</nav>

</aside>

<div> </div>
<=LASTN_WEBSITE

Installation Guide

♡ Make sure you have a website in your profile page.
♡ Go to Basics and choose S1 for your style system, then save.
♡ Go to Look and Feel, choose Generator for all page views, then save.
♡ Go to Custom Options and paste the layout code, then save. Make sure you've done a replace all on the following with your information:

PAGE_TITLE for your journal title
https://i.imgur.com/GvhycUX.png for the page tab icon
JOURNALNAME to complete your URL and activate links
TOP_TITLE for your first sidebar title (small)
BOTTOM_TITLE for your second sidebar title (large)
YOUR_USERPIC for your sidebar userpic
LINK_ONE through LINK_FOUR for your links; add as many new links as you like!

SIDEBAR BADGE This layout comes with four shape options for your sidebar userpic design! Choose one of the following and make sure it's changed all four times it shows up in your layout:

class="circle badge" - Circular icon with color block accents as seen in live demo
class="square badge" - Square icon with color block accents
class="triangle badge" - Triangular icon with color block accents
class="parallel badge" - Parallelogram icon with color block accents

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: s1 generator

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Layout: Totally '90s!

Information

Layout Coding

Installation Guide

Terms of Use