Tessisamess - Layout: Blocked: Redux

image preview | tess046
friends page | day page

Information

Hey, guys! Ready for something super cool? Back at the end of 2013 I created Blocked, an S1 Generator layout that I was SUPER stoked to be able to bring you guys. It's still visually really nice and continues to be one of my favorite "firsts" on IJ, but looking at it now kind of makes me wince. Not because I don't like it! But because I know the coding could be so much nicer and more functional and responsive now that I've had the last four years' worth of experience.

So today I'm bringing you Blocked: Redux to celebrate the new year and how far I've come over the years! This redo has been a long time coming, and I'm so pleased with the end result.

Blocked: Redux features a fully responsive grid mask on your Recent page, but retains total journal functionality on all other page views, unlike the original, which masked all page views. Additionally, you can do some EXTRA cool things with your grid blocks this time around!

Want a single background like the demo? Just add one image to the #mask background. Or you can add backgrounds to each and every .link for a total of ten image squares! You can even mix-and-match and use a full background and only fill in some squares' backgrounds for some creative combos!

If you miss the colored title block, don't worry! You can still set a background color for it in .title and it will do the work for you! Honestly, you could even set each square to a solid color and put a background image in the title area instead. The possibilities and combinations are crazy extensive!

(Hint: If you love the alt page views of this journal layout and don't need a mask on Recent you can replace the mask coding with the header coding to have a regular journal!)

Have fun seeing all the great animations and extra features in the demo, and make sure to play around with resizing your browser to see the responsiveness! (I'll shut up now lmfao.)

Layout Coding

FRIENDS_OPT_ITEMS=>20

FRIENDS_WEBSITE<=

<div id="header">
	<span id="header-inner">
		<h1>JOURNALTITLE</h1>
		<span class="links">
			<a href="http://JOURNALNAME.insanejournal.com/">Home</a>
			<a href="http://JOURNALNAME.insanejournal.com/profile">Profile</a>
			<a href="http://JOURNALNAME.insanejournal.com/calendar">Calendar</a>
			<a href="http://JOURNALNAME.insanejournal.com/friends">Friends</a>

<span class="dropdown">
			<b>Navigate</b>
				<span class="drop-links">
					<a href="DROPLINK1">DROPONE</a>
					<a href="DROPLINK2">DROPTWO</a>
					<a href="DROPLINK3">DROPTHREE</a>
					<a href="DROPLINK4">DROPFOUR</a>
					<a href="http://tessisamess.insanejournal.com/">Layout By</a>
				</span>
			</span>
		</span>
	</span>
</div>

<div> </div>
<=FRIENDS_WEBSITE

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

<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
	<a href="%%urlpost%%">ADD COMMENT</a>

</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div> </div>
<=DAY_WEBSITE

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

<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
	<a href="%%urlpost%%">ADD COMMENT</a>

</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=

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

<style>
<!--

/*--- BLOCKED: REDUX - 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:#fff;margin:55vh 0 30px 0;padding:0;}
body,table,tr,td{text-align:justify;font-family:Open Sans,helvetica,arial,sans-serif;font-size:14px;color:#222;}

a{color:#F99398;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:#356B81;text-decoration:none;}

h1,h2,h3,h4{padding:0;margin:0;color:#000;font-family:Open Sans Condensed,helvetica,arial,sans-serif;font-weight:normal;text-transform:uppercase;}

hr{border:none;height:1px;margin:0 20%;padding:0;background:#ddd;}
blockquote{font-style:italic;margin:15px 30px 0 30px;padding-left:10px;border-left-width:5px;border-left-style:solid;-webkit-border-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f99398), to(#356b81)) 1 100%;-webkit-border-image: -webkit-linear-gradient(#f99398, #356b81) 1 100%;-moz-border-image:-moz-linear-gradient(#f99398, #356b81) 1 100%;-o-border-image:-o-linear-gradient(#f99398, #356b81) 1 100%;border-image:linear-gradient(to bottom, #f99398, #356b81) 1 100%;}
ul{list-style:circle;margin:0;}

/*--- MASK ---*/

#mask{background:#fff url(LARGEBG)center;background-size:cover;text-align:center;font-size:9px;visibility:visible;position:fixed;z-index:2000;left:4vw;right:4vw;top:4vw;bottom:4vw;border:0.5vw solid #fff;display:flex;flex-wrap:wrap;justify-content:center;}

#mask:hover .link span{opacity:1;}
#mask:hover .link:nth-of-type(1) span{transition-delay:0s;}
#mask:hover .link:nth-of-type(2) span{transition-delay:0.3s;}
#mask:hover .link:nth-of-type(3) span{transition-delay:0.6s;}
#mask:hover .link:nth-of-type(4) span{transition-delay:0.9s;}
#mask:hover .link:nth-of-type(7) span{transition-delay:1.2s;}
#mask:hover .link:nth-of-type(11) span{transition-delay:1.5s;}
#mask:hover .link:nth-of-type(10) span{transition-delay:1.8s;}
#mask:hover .link:nth-of-type(9) span{transition-delay:2.1s;}
#mask:hover .link:nth-of-type(8) span{transition-delay:2.4s;}
#mask:hover .link:nth-of-type(5) span{transition-delay:2.7s;}

.block{display:flex;align-items:center;justify-content:center;border:0.5vw solid #fff;}

.title{width:48.9%;background:#fff url(TITLEBG)center;background-size:cover;}
.title h1{font-size:30px;}
.title h2{font-size:9px;letter-spacing:3px;font-weight:bold;}

.link{width:23.9%;text-transform:uppercase;letter-spacing:2px;font-weight:bold;}
.link span{opacity:0;display:block;width:50%;-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;}
.link a{background:#fff;color:#000;display:block;height:25px;line-height:25px;}
.link a:hover{background:rgba(255,255,255,0.5);}

/*
	Use the below backgrounds if you'd like each
	link block to have a background image instead.

Images can be any dimension; just make sure they're
	not too small or they'll warp on large resolutions.
*/

.link:nth-of-type(1){background:url(BG1)center;background-size:cover;}
.link:nth-of-type(2){background:url(BG2)center;background-size:cover;}
.link:nth-of-type(3){background:url(BG3)center;background-size:cover;}
.link:nth-of-type(4){background:url(BG4)center;background-size:cover;}
.link:nth-of-type(5){background:url(BG5)center;background-size:cover;}
.link:nth-of-type(7){background:url(BG6)center;background-size:cover;}
.link:nth-of-type(8){background:url(BG7)center;background-size:cover;}
.link:nth-of-type(9){background:url(BG8)center;background-size:cover;}
.link:nth-of-type(10){background:url(BG9)center;background-size:cover;}
.link:nth-of-type(11){background:url(BG10)center;background-size:cover;}

#cred{visibility:visible;position:fixed;right:5vw;bottom:2vw;z-index:2000;font-family:Open Sans Condensed,helvetica,arial,sans-serif;text-transform:uppercase;font-size:8px;letter-spacing:2px;font-weight:bold;color:#999;}

/*--- HEADER ---*/

#header{background:#fff url(HEADERBG)center;background-size:cover;text-align:center;font-size:9px;visibility:visible;position:absolute;z-index:2000;left:4vw;right:4vw;top:4vw;border:0.5vw solid #fff;display:flex;justify-content:center;align-items:center;height:40vh;}
#header-inner{background:#fff;padding:2vw;width:40%;min-width:500px;}

#header-inner h1{font-size:30px;}
#header-inner .links{display:block;padding-right:90px;font-family:Open Sans Condensed,helvetica,arial,sans-serif;text-transform:uppercase;font-size:9px;letter-spacing:3px;font-weight:bold;}
#header-inner .links a{display:inline-block;width:90px;}

.dropdown{display:inline-block;width:90px;background:#fff;text-align:center;position:absolute;cursor:pointer;}
.dropdown b{display:block;}
.drop-links{display:block;max-height:0;overflow:hidden;-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;}
.dropdown:hover .drop-links{max-height:500px;}
.drop-links a{display:block;padding:4px 2px;}

#header-inner a{color:#000;}
#header-inner a:hover{color:#F99398;}

/*--- ENTRIES ---*/

table{width:85vw;max-width:700px;margin:0 auto;}
.entrybox{visibility:visible;margin-bottom:4vw;padding:50px;position:relative;border:1px solid #ddd;}
.entrybox table{line-height:150%;}
.entrybox img{max-width:100%;}

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

td.caption{padding:10px 0 20px 0;text-align:center;color:#000;font-family:Open Sans Condensed,helvetica,arial,sans-serif;text-transform:uppercase;font-size:27px;}

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

.date{color:#999;font-size:9px;font-weight:bold;letter-spacing:3px;font-family:Open Sans Condensed,helvetica,arial,sans-serif;text-transform:uppercase;}
.entrybox td.index{position:absolute;left:0;right:0;text-align:center;color:transparent;font-size:0;}

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

.comments{text-align:right;font-size:9px;font-weight:bold;letter-spacing:3px;font-family:Open Sans Condensed,helvetica,arial,sans-serif;text-transform:uppercase;padding:20px 0 0 0;}
.comments a{border-bottom:2px solid #ddd;color:#000;display:inline-block;width:100px;text-align:center;margin-left:2px;}
.comments a:hover{border-bottom:2px solid #356B81;color:#F99398;}

/*--- 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;margin-bottom:10px;background:#fff;padding:5px;border:1px solid #ddd;}
.entrybox a.index font{color:#222!important;}

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

.meta, table table .index{color:#222;font-size:9px;font-weight:bold;letter-spacing:2px;font-family:Open Sans Condensed,helvetica,arial,sans-serif;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/NPTi02T.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;}

/*--- 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%% COMMENTS</a>
	<a href="%%urlpost%%">ADD COMMENT</a>

</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 id="mask">
	<span class="block link"><span><a href="URLONE">LINKONE</a></span></span>
	<span class="block link"><span><a href="URLTWO">LINKTWO</a></span></span>
	<span class="block link"><span><a href="URLTHREE">LINKTHREE</a></span></span>
	<span class="block link"><span><a href="URLFOUR">LINKFOUR</a></span></span>

<span class="block link"><span><a href="URLFIVE">LINKFIVE</a></span></span>
	<span class="block title"><span>
		<h1>JOURNALTITLE</h1>
		<h2>Hover for Navigation</h2>
	</span></span>
	<span class="block link"><span><a href="URLSIX">LINKSIX</a></span></span>

<span class="block link"><span><a href="URLSEVEN">LINKSEVEN</a></span></span>
	<span class="block link"><span><a href="URLEIGHT">LINKEIGHT</a></span></span>
	<span class="block link"><span><a href="URLNINE">LINKNINE</a></span></span>
	<span class="block link"><span><a href="URLTEN">LINKTEN</a></span></span>
</div>

<a href="http://tessisamess.insanejournal.com/" id="cred">LAYOUT BY TESSISAMESS</a><noembed>

<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
JOURNALTITLE for your mask/header titles
JOURNALNAME to complete your URL and activate links

DROPLINK1 through DROPLINK4 for your alt page view dropdown nav link URLs (you can add as many links to this as you need)
DROPONE through DROPFOUR for your alt page view dropdown nav link titles

URLONE through URLTEN for your mask nav link URLs
LINKONE through LINKTEN for your mask nav link titles

LARGEBG for your mask background, if one large image is desired
TITLEBG for if you'd rather have an image than a background color in the middle title block
BG1 through BG10 for your mask backgrounds, if small grid backgrounds are desired
HEADERBG for your header background on alt page views

Editing Guide

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

FONTS

Open Sans - Page text
Open Sans Condensed - Header text

COLORS

#fff - Page backgrounds (multiple instances)
#ddd - Entry and userpic border
#f99398 - Entry links, blockquote gradient, header and comment link hover
#999 - Entry date
#356b81 - Entry link hover, blockquote gradient, comment border hover
#222 - Page text
#000 - Mask and header links, titles, comment links

IMAGES

https://i.imgur.com/NPTi02T.png - Tab, user, and lock icons

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: layout remakes, layouts: s1 generator

Comments

(Comment)

tessisamess

Feb. 1st, 2018 07:02 pm (UTC)

Aw yay, glad I could help! ♥ There are A LOT OF BACKGROUND OPTIONS in this layout so it gets a little confusing LOL. I've added background image specs into the base in this post too though, just in case anyone else ever wants an image instead of a color as their middle block background!

The DW version for Blocked: Redux is scheduled to be rolled out on Patreon sometime around the middle of the month!