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! Today we've got a super compact icon-y Generator layout with fun sliding panels for a small about section and links list! As always, this should be extremely easy to recolor, and no large images are needed to make this look nice, so no worries if you hate looking for big images or just can't find any! Enjoy, and don't forget to check out

sanity for some REALLY cool stuff! ♥

Layout Coding

FRIENDS_OPT_ITEMS=>20

FRIENDS_WEBSITE<=

<section id="info" class="block">
		<span class="inner">
			<img src="ABOUTIMG">
			<h4>TITLEHERE</h4>
			BLURBHERE
		</span>
	</section>
	<section id="links" class="block">
		<span class="inner">
			<h4>Navigation</h4>
			<a href="URL1">Link1</a>
			<a href="URL2">Link2</a>
			<a href="URL3">Link3</a>
			<a href="URL4">Link4</a>
		</span>
	</section>

<div> </div>
<=FRIENDS_WEBSITE

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

<div class="comments-inner">
		<a href="%%urlread%%">%%messagecount%%</a>
		<a href="%%urlpost%%"><img src="https://i.imgur.com/NhPqLhN.png"></a>
		<a href="http://www.insanejournal.com/editjournal_do.bml?%%itemargs%%"><img src="https://i.imgur.com/9teiZTn.png"></a>
		<a href="http://www.insanejournal.com/edittags.bml?%%itemargs%%"><img src="https://i.imgur.com/SMgiSTh.png"></a>
	</div>

</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div> </div>
<=DAY_WEBSITE

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

</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=

<title>PAGETITLE</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Gugi" rel="stylesheet">
	<link rel="shortcut icon" href="https://i.imgur.com/NhPqLhN.png" type="image/ico" />

<style>
<!--

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

/* REPLACEMENTS */

:root{
	--darkest: #000; /* blockquote border; sidebar background; popup background; comments background; poster icon border */
	--dark: #222; /* page background */
	--dark-med: #333; /* entry background */
	--medium: #666; /* link hover; date; page nav */
	--accent: #2FBFA2; /* links; headings; horizontal rule; code background; title background; nav links hover; comment hover background; poster info */
	--light: #bbb; /* page text */
	--lightest: #fff; /* sidebar links; comments link; code background */

--main-font: Roboto Condensed,helvetica,arial,sans-serif;
	--headings: Gugi,arial black,gadget,sans-serif;

--info: url(https://i.imgur.com/EubFs7h.png)center no-repeat;
	--links: url(https://i.imgur.com/WCTYvff.png)center no-repeat;
	--home: url(https://i.imgur.com/T9zbBoB.png)center no-repeat;
	--profile: url(https://i.imgur.com/fAgzx2J.png)center no-repeat;
	--friends: url(https://i.imgur.com/lHVzejZ.png)center no-repeat;
	--calendar: url(https://i.imgur.com/729usXf.png)center no-repeat;

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

/* GENERAL */

body{margin:50px 0 50px 50px;background:var(--dark);padding:0;}
body,table,tr,td{font-family:var(--main-font);font-size:14px;color:var(--light);text-align:justify;}

a{text-decoration:none;color:var(--accent);-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:var(--medium);text-decoration:none;}

h1,h2,h3,h4{font-family:var(--headings);padding:0;margin:0;color:var(--accent);font-weight:normal;}
hr{border:none;height:1px;margin:0 30%;padding:0;background:var(--accent);}
blockquote{font-style:italic;border-left:6px solid var(--darkest);padding-left:10px;margin:20px 0 0 20px;}
ul{list-style:square;margin:0;}
code{background:var(--accent);color:var(--lightest);}

/* SIDEBAR */

aside{visibility:visible;position:fixed;top:0;left:0;bottom:0;background:var(--darkest);width:50px;text-align:center;z-index:3;}
aside img, section img{display:block!important;}
aside #av{height:50px;}
aside a, section a{color:var(--lightest);}

nav a{display:block;height:50px;line-height:50px;border-bottom:1px solid rgba(255,255,255,0.6);opacity:0.4;}
#cred{display:block;height:50px;line-height:50px;opacity:0.4;border-top:1px solid rgba(255,255,255,0.5);border-bottom:none;position:absolute;bottom:0;left:0;right:0;font-size:25px;}
nav a:hover, #current{opacity:1;border-bottom:1px solid rgba(255,255,255,0.2);}
#cred:hover{opacity:1;border-top:1px solid rgba(255,255,255,0.2);}

nav a:nth-of-type(1){background:var(--info);}
nav a:nth-of-type(2){background:var(--links);}
nav a:nth-of-type(3){background:var(--home);}
nav a:nth-of-type(4){background:var(--profile);}
nav a:nth-of-type(5){background:var(--friends);}
nav a:nth-of-type(6){background:var(--calendar);}

.block{visibility:visible;background:var(--darkest);text-align:center;color:rgba(255,255,255,0.7);font-size:11px;position:fixed;width:250px;left:-260px;z-index:1;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}
.block:target{left:60px;}
.block .inner{display:block;padding:15px;}
.block:before{content:'';position:absolute;top:15px;left:-10px;display:block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--darkest);}
.block h4{padding:10px;border-bottom:1px solid rgba(255,255,255,0.2);text-align:center;}

#info{top:50px;text-align:justify;}
#info img{width:100%;}
#info h4{margin-bottom:10px;font-size:9px;letter-spacing:2px;text-transform:uppercase;}

#links{top:100px;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:bold;}
#links h4{padding:0 10px 10px 10px;}
#links a{display:block;padding:7px;border-bottom:1px solid rgba(255,255,255,0.2);}
#links a:last-of-type{border-bottom:none;padding:7px 7px 0 7px;}
#links a:hover{color:var(--accent);}

/* ENTRIES */

table{width:650px;margin:0 auto;}
.entrybox{visibility:visible;margin-bottom:30px;background:var(--dark-med);padding:30px 60px 30px 30px;border:1px solid rgba(0,0,0,0.2);position:relative;}
.entrybox table{line-height:1.7;}
.entrybox img{max-width:100%;}

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

/* ENTRY SUBJECT */

td.caption{text-align:left;color:var(--accent);font-size:18px;font-family:var(--headings);}

/* DATE & TIME */

.date{color:var(--medium);font-size:12px;letter-spacing:2px;}
.entrybox td.index{text-align:right;color:transparent;font-size:0;}

/* COMMENT FOOTER */

.comments{position:absolute;width:30px;top:-1px;right:-1px;bottom:-1px;font-size:10px;font-weight:bold;text-align:center;text-transform:uppercase;background:var(--darkest);display:flex;align-items:flex-end;}
.comments-inner{width:100%;}
.comments a{color:var(--lightest);display:block;padding:9px 0;}
.comments a img{width:12px;}
.comments a:hover{background:var(--accent);}

/* USERPICS */

.entrybox table table table td{position:absolute;top:0;right:-75px;text-align:center;padding:0;}
.entrybox a.index img{width:50px;height:50px;margin-bottom:7px;border:7px solid var(--darkest);}
.entrybox a.index font{color:var(--accent)!important;font-size:8px;}

/* PAGE NAVIGATION */

.meta, table table .index{text-transform:uppercase;letter-spacing:1px;color:var(--medium);font-size:8px;text-transform:uppercase;line-height:8px;text-align:right;}
table table table{float:right;width:auto;}
table table table td.meta{padding:1px;}

/* 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: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);}

/* 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 class="comments" colspan="2">

<div class="comments-inner">
		<a href="%%urlread%%">%%messagecount%%</a>
		<a href="%%urlpost%%"><img src="https://i.imgur.com/NhPqLhN.png"></a>
	</div>

</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>10

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

CALENDAR_WEBSITE<=

<div> </div>
<=CALENDAR_WEBSITE

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

LASTN_WEBSITE<=

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

PAGETITLE for your journal title
https://i.imgur.com/NhPqLhN.png for your tab icon
JOURNALNAME to complete your URL and activate links

ICONIMG for your sidebar icon
ABOUTIMG, TITLEHERE, and BLURBHERE for your info panel content
URL1 through URL4 and LINK1 through LINK4 for your links panel content

Editing Guide

As always now, check the layout's :root for all editing values! Change it one and it changes through the whole sheet, which makes for great on the fly editing and taking multiple options for test runs!

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: Compact Panel

Information

Layout Coding

Installation Guide

Editing Guide

Terms of Use