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! It's the last resource post of the month, oh man! It's weird having it all posted so close together, right? I'm gonna get to some comment answering today, but just a heads up: The rest of the month is gonna be super busy with moving-related stuff on my end, so I probably will be really spotty on comment replies until April 1st.

An unrelated "announcement" is that I am now using a personal journal over at

shudder, and if you'd like to keep up with me you can feel free to add me over there for chit chat and life updates!

Cut & Run is a Generator layout with a lot of character-specific potential! It features an expanding navigation for extra links, icon links for your navigation pages, and a monochromatic design. Enjoy! ♥

Layout Coding

FRIENDS_OPT_ITEMS=>20

FRIENDS_WEBSITE<=

<span>SUBTITLE</span>
	</header>

<aside>

<details>
			<summary>NAVIGATION</summary>
			<a href="DROPURL">DROPLINK</a>
		</details>

</aside>

<div> </div>
<=FRIENDS_WEBSITE

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

<a href="%%urlread%%">%%messagecount%%</a>
	<a href="%%urlpost%%">+</a>

</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<span>SUBTITLE</span>
	</header>

<aside>

<details>
			<summary>NAVIGATION</summary>
			<a href="DROPURL">DROPLINK</a>
		</details>

</aside>

<div> </div>
<=DAY_WEBSITE

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

<a href="%%urlread%%">%%messagecount%%</a>
	<a href="%%urlpost%%">+</a>

</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=

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

<style>
<!--

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

/*--- GENERAL ---*/

body{background:#97AFA0 url()top left repeat fixed;margin:75px 0 75px 410px;padding:0;}
body,table,tr,td{text-align:justify;font-family:Roboto Condensed,helvetica,sans-serif;font-size:12px;color:#000;}
body div[align=center]{text-align:left;}

a{color:#395543;-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:#000;text-decoration:none;}

h1,h2,h3,h4{padding:0;margin:0;color:#395543;font-family:Yesteryear,georgia,serif;}
hr{border:none;height:1px;margin:0 20%;padding:0;background:rgba(0,0,0,0.2);}
blockquote{font-style:italic;}
ul{list-style:square;margin:0;}

/*--- HEADER ---*/

header{visibility:visible;position:fixed;z-index:2000;top:0;left:0;right:0;background:#fff;padding:8px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,0.13);font-size:10px;text-transform:uppercase;letter-spacing:2px;}
header img{display:inline!important;margin-right:5px;height:20px;}
header b{color:#395543;}
header span b{margin-right:5px;}
header span{display:flex;align-items:center;justify-content:center;}

/*--- SIDEBAR ---*/

#block{visibility:visible;position:fixed;z-index:1000;top:0;left:0;bottom:0;width:200px;background:#395543;border-right:10px solid rgba(0,0,0,0.1);}

aside{visibility:visible;position:fixed;z-index:2000;width:184px;top:130px;left:110px;background:#fff;padding:5px;border:1px solid rgba(0,0,0,0.13);font-size:10px;}
aside img{display:inline!important;}

#gif{max-width:100%;}

nav{display:flex;text-align:center;margin:7px 0;}
nav a{width:100%;border-right:1px solid rgba(0,0,0,0.13);}
nav a:last-of-type{border-right:none;}

nav img{-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;}
nav a:hover img{opacity:0.5;}

aside details{border:1px solid rgba(0,0,0,0.13);text-transform:uppercase;letter-spacing:2px;}
aside summary{padding:3px 5px 2px 5px;cursor:pointer;-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;}
aside details a{display:block;padding:3px 5px 2px 5px;color:#000;text-decoration:none;}
aside summary:focus{outline:none;}
aside details[open] summary, aside details a:hover, aside summary:hover{background:rgba(0,0,0,0.06);}
aside details[open] summary ~ *{animation:fade 1s ease-in-out;}
@keyframes fade{0%{opacity:0;}100%{opacity:1;}}

/*--- ENTRIES ---*/

table{width:500px;margin:0;}
.entrybox{visibility:visible;margin:0 0 50px 0;background:rgba(0,0,0,0.1);padding:40px;position:relative;border:1px solid rgba(0,0,0,0.13);}

.entrybox table{line-height:150%;}
.entrybox img{max-width:100%;}

/*--- ENTRY SUBJECT ---*/

td.caption{padding:0 0 10px 0;text-align:left;color:#395543;font-size:25px;font-family:Yesteryear,georgia,serif;}

/*--- DATE & TIME ---*/

.date{color:#395543;font-size:12px;}
.entrybox td.index{position:absolute;right:0;top:-10px;text-align:right;color:transparent;font-size:0;}

/*--- COMMENT FOOTER ---*/

.comments{text-align:center;position:absolute;bottom:0;right:-40px;text-transform:uppercase;font-size:10px;}
.comments a{background:#395543;border:1px solid rgba(0,0,0,0.13);color:#fff;display:block;width:31px;height:31px;margin-top:5px;line-height:31px;border-radius:30px;}
.comments a:hover{background:rgba(0,0,0,0.1);color:#000;}

/*--- 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;padding:5px;margin-bottom:10px;background:rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.13);}
.entrybox a.index font{color:#222!important;font-size:8px;letter-spacing:1px;}

/*--- PAGE NAVIGATION ---*/

.meta, table table .index{color:rgba(0,0,0,0.5);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;}

/*--- 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/sFHOgEt.png)no-repeat!important;background-size:16px!important;width:0!important;height:0!important;padding:16px 0 0 18px!important;margin-bottom:3px;}

/*--- 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">

<a href="%%urlread%%">%%messagecount%%</a>
	<a href="%%urlpost%%">+</a>

</td></tr>
<=FRIENDS_TALK_LINKS

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

LASTN_OPT_ITEMS=>10

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

CALENDAR_WEBSITE<=

<span>SUBTITLE</span>
	</header>

<aside>

<details>
			<summary>NAVIGATION</summary>
			<a href="DROPURL">DROPLINK</a>
		</details>

</aside>

<div> </div>
<=CALENDAR_WEBSITE

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

LASTN_WEBSITE<=

<span>SUBTITLE</span>
	</header>

<aside>

<details>
			<summary>NAVIGATION</summary>
			<a href="DROPURL">DROPLINK</a>
		</details>

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

PAGETITLE for your journal title
<b>NAME</b> HERE for your header title
SUBTITLE for your header subtitle
SIDEIMG for your sidebar picture
DROPURL and DROPLINK for your dropdown nav (copy/paste as needed for more)
JOURNALNAME to complete your URL and activate links

Editing Guide

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

FONTS

Roboto Condensed - Page text
Yesteryear - Header text

IMAGES

https://i.imgur.com/sFHOgEt.png - Header bar icon; tab, user, and lock icons
http://i.imgur.com/QvoqWhi.png - Home icon
http://i.imgur.com/sYvEel5.png - Profile icon
http://i.imgur.com/Vv82jA8.png - Friends icon
http://i.imgur.com/rdoLWZd.png - Credit icon

COLORS

#fff Header background, sidebar background, and comment link text

#97afa0 Page background

#395543 Link color, headings color, header bold text color, left-of-page background, entry title, date color, and comment link background

#222 Username/community link on posts

#000 Page text, link hover color, sidebar link color, comments link hover color

0,0,0 Horizontal rule, all borders, entry background, dropdown link background hover, comments hover background, entry userpic background, bottom page navigation text (semi-transparent rgba value)

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: Cut & Run

Information

Layout Coding

Installation Guide

Editing Guide

Terms of Use

Comments