Previous | Next

Layout: Blocked: Redux

image preview | [info]tess046
friends page | day page


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

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!

Open Sans - Page text
Open Sans Condensed - Header text

#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

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!


Jan. 24th, 2018 11:27 pm (UTC)
So pretty!

Do you mind if I try to convert this to S2/Dreamwidth? With credit, of course!
Jan. 24th, 2018 11:29 pm (UTC)
Aw, thank you! ♥ I'll probably be doing an S2/DW version of this myself soon, but if you still want to then sure, go for it!
Jan. 25th, 2018 11:17 am (UTC)
i was just coming to ask if you would do a dw version of this! i would absolutely love to use it for my character journals over there. i can't wait to see the dw version!
Jan. 25th, 2018 05:13 pm (UTC)
Aw, thank you!! ♥ Yeah, as soon as I got done I was like HMMMM YES I NEED TO TRY AND MAKE THIS IN S2 lmfao.
Jan. 28th, 2018 06:49 pm (UTC)
This is utterly gorgeous! We're now using it at [info]destructionmods
Jan. 28th, 2018 07:01 pm (UTC)
Thank you! ♥

Oh, this looks beautiful! I love how perfectly the lighthouse is framed!
Jan. 29th, 2018 03:42 am (UTC)
Hi, I love this layout, but I'm having a really weird problem with using multiple images. For some reason, Image #6 won't show up, and each image after #6 is moved up a space in the order, so that Image #10 has Link #9 on it, and therefore there's no image behind Link #10. Do you know what might be causing this? I took a close look at my coding, and it doesn't look like I accidentally deleted anything when I copy/pasted Image #6 in, but maybe I've missed something obvious? It's this account and here's a copy of my code.
Feb. 1st, 2018 03:16 am (UTC)
Just commenting to say I had the same issue! Trying to see if I can find a largebg image I like for the corner as a temporary fix.
Feb. 1st, 2018 03:23 am (UTC)
Hey guys! Just popping over to let you know I'm going to troubleshoot this for you tomorrow and get back to you with an answer and update the layout post's code once I figure out what's making the layout images hiccup!
Feb. 1st, 2018 04:06 am (UTC)
You're so rad!

My best guess at the issue (and it's just a guess since I only half understand the code) is that under the "/*---Mask---*/" code you have the list of numbers that position and delay the images (...the bits that go "nth-of-type(7)", etc).

I noticed there was an (11) but no (6) in the numbers. I tried changing the (11) to (6) not knowing what it would do, but it seemed to make no difference.

I hope this helps and not just expose how little I know about CSS, haha.
Feb. 1st, 2018 04:10 am (UTC)
And I figured out what changing that value did. It just changed the delay of when the 10th position link showed up in the hover. Haha. I changed it back and the links appear in the right order now on the hover. :B
Feb. 1st, 2018 06:55 pm (UTC)
LOL, yeah that section is just for timing the animation delays so that they run clockwise instead of all showing up at once. I did figure out the issue, though! I somehow managed to forget to skip nth-of-type(6) and move on to the next number to account for the title block in the section for individual backgrounds.

The code in the post has been updated to fix that, as well as to add a spec for if you want a background image in .title, but here's the relevant code change!
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.

Basically we're just pretending six isn't a number and skipping it, so the (#) part is the only thing changed to make it 1-11 with no 6 instead of 1-10.
Feb. 1st, 2018 11:01 pm (UTC)
You're amazing! Thanks!
Feb. 2nd, 2018 05:42 am (UTC)
i just wanted to say i am VERY intrigued by whatever this game is, and i am eyeing all the progress you make with a lot of interest.
Feb. 2nd, 2018 05:47 am (UTC)
Thanks! I'm excited to roll it out and meet some new players!

If you have any ideas, questions, whatever, feel free to sound off in the drop box as I'm getting content put up.
Feb. 2nd, 2018 08:41 pm (UTC)
Thank you very much for this fix!
Feb. 10th, 2018 05:14 pm (UTC)
Absolutely, no problem! That's 100% on me because I just unintentionally assumed I'm incapable of typos (like a jackass lmfao) and didn't test plugging individual images before release, so... oops.
Jan. 30th, 2018 02:25 am (UTC)
hey tess! i really love this layout and can't wait to use the dw version, but in the meantime i'm fiddling with the ij one, and i've moooostly gotten it to do what i want -- i changed it so the links are always visible, and i wanted to have a gif play in the middle rather than have a title and "hover for nav", but... i can't get the gif to show up unless i put words in there, and even then it's just the small sliver where the words are. here's an example. do you know what i'm doing wrong?
Feb. 1st, 2018 03:29 am (UTC)
It looks like you've just got your background CSS in the wrong spot is all! You'll want this for your title block:

.title{width:48.9%;background: url(https://78.media.tumblr.com/27b57d57bb8a35aab025963a02be0375/tumblr_p27ll0PWL01vigpn1o1_500.gif)center;background-size:cover;}

And then you should be able to delete the h1 and h2 out of the block's HTML and it will only display a gif in the middle. ♥
Feb. 1st, 2018 10:02 am (UTC)
you were totally right, that did it! thanks so much. now i can mess around with background images and links until the dw version comes out! \o/
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!
Feb. 16th, 2018 02:47 pm (UTC)
This is sooo awesome! I used it for my CDJ, I might also use it for my mod journal. It looks awesome on mobile too!
Feb. 17th, 2018 03:29 pm (UTC)
I can't wait for the S2 version!!
Aug. 26th, 2018 06:11 am (UTC)
Hey there, so I'm using my test account to work on a few things before I implement it in game, but I had a question for you. The hovering doesn't work well for people on phones or tablets. Is there a way to make the links and text for the links just stay on the screen?
Aug. 26th, 2018 10:00 pm (UTC)
For sure! Basically, on touch screens you need to tap the active area (basically anywhere you'd hover on a regular monitor) to trigger the hover animation, but if you want something more immediately obvious you can delete the highlighted in the following portion of code!

.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;}
Aug. 27th, 2018 12:06 am (UTC)
Thank you thank you thank you!
Sep. 24th, 2018 01:15 am (UTC)
Okay, one more thing for you because I suck. I know you were thinking of turning this into an s2 layout (which would be amazing. TAGS ftw), but I was wondering if the Tag pages have to be that default currently, or if there's a way to make it look like the other pages?
Sep. 26th, 2018 04:06 am (UTC)
hey tess, i've recently switched to using firefox instead of chrome, and this layout has been a little strange. on chrome it looks like this and this, but in firefox it looks like this. is there something i'm doing wrong to make that happen, or something that's just inherent to firefox?
Nov. 5th, 2018 12:59 am (UTC)
Hi, I love your layouts! I would like to use several small images instead of one large picture for the grid. What height should I use for each one? Thank you for your help :)
Nov. 5th, 2018 01:19 am (UTC)
This layout's dimensions are based on your browser size, so as long as the images are at least mmm, I'd say around 400x400 they should scale pretty well for most screens!