Previous | Next

Come Closer: Cast list/roster



Hey guys! Two HTML pages for you today: A cast list/character roster with a lot of style on hover! Depending on your personal preference, either one of these codes would be great for a cast list or a character roster, so I'm displaying them as both so you can get an idea of what I mean!

The maxi version would also be wonderful for locations or other similar game information pages, especially if you inverted the width/height dimensions for landscape view cards!

Enjoy, and I hope you all have a great month! ♥

Coding: Maxi

Coding: Mini

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) and fill in the following!

Title Here - Page title
ICOURL - Page icon

NAVLINK - Top nav link; you can add as many links as desired, or you can use the subtitle for links instead and delete the nav.
TITLEHERE - Header title
SUBTITLEHERE - Header subtitle

CHARPIC - Background image of each card; you do not need set dimensions but using portrait pictures for Maxi and squares for Mini helps avoid funky positioning.
CHARNAME - Character title
CHARSUB - Character subtitle
BLURBHERE - Character blurb (Maxi only)
JOURNALURL - Link to journal

FOOTERINFO - Optional footer text; delete if unneeded, but leave footer link.

Note: To add a title to sections of the cast list just add <h2>Title</h2> before the start of the characters you want to section off.

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
Oswald - Heading text

https://i.imgur.com/2zzBySA.jpg - Page background

255,255,255 Character name border (semi-transparent rgba value)
#fff Page text and links
#ccc Highlight selection color
#333 Page background
0,0,0 Header/footer text shadow, container background, hover background, journal link background (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!


Mar. 2nd, 2018 01:47 am (UTC)
Oh, come on, this is getting a little ridiculous. I get my stuff set up with awesome layouts from you, I'm rockin' it out, and suddenly there's something new and awesome to use and I need to find a place for it and I'm running out places to put things.

No, but really, this (and everything that's gone up on Patreon the last few days) is gorgeous and I am in love and forever completely in awe of your design skills. ♥♥♥
Mar. 2nd, 2018 01:54 am (UTC)
Mar. 2nd, 2018 01:56 am (UTC)
LOL IT'S SUCH A GREAT PROBLEM TO HAVE, THOUGH. I'm so ridiculously picky and all your stuff lately is hitting all my "I GOTTA HAVE THIS RIGHT NOW" buttons. :D
Mar. 2nd, 2018 02:01 am (UTC)
Aw, I'm so glad to hear that! I'm right there with you on being picky LOL.
Mar. 2nd, 2018 12:23 pm (UTC)
Just updated my cast lists... and now I'm gonna update again. You're evil. Brilliant but still evil.

I've been looking forward to this one though
Mar. 12th, 2018 07:30 pm (UTC)
Mar. 2nd, 2018 07:54 pm (UTC)
This wonderful! Thank you for all the hard work! <3
Mar. 12th, 2018 07:30 pm (UTC)
Aw, thank you!! ♥
Mar. 3rd, 2018 02:08 pm (UTC)
Thank you so much~ Used it here ♥ ♥
Mar. 12th, 2018 07:30 pm (UTC)
Mar. 4th, 2018 09:09 pm (UTC)
Do you have any suggestions for an off-site equivalent for the custom style if you don't have a paid account? Looove this!
Mar. 5th, 2018 02:57 am (UTC)
Tumblr is usually what most people use, but I can look around for some recommendations for you if that's not something you're wanting to use!
Mar. 5th, 2018 08:31 pm (UTC)
This is truly so beautiful. I wish I still had a cast just to use this!
Mar. 12th, 2018 07:31 pm (UTC)
SAME haha. I love making cast lists but I don't actually use them anywhere sighhhh.
Mar. 6th, 2018 06:46 am (UTC)
I keep putting off asking this dumb question every time you post an off-site thing, but I'll never know if I keep doing this so... HI, how exactly do I make it work on an off-site place? I have a place where I upload my icons and store them (here) but I don't know how to use it to upload something like this. (I had thought it was 'save it to notepad as a html and then upload that file' but apparently it's not??)
Mar. 10th, 2018 07:51 pm (UTC)
Hey, I'm not sure why that didn't work for you, because I did the same thing via my songsofstardust subdomain and it worked fine for me!


It looks like you have some funky encoding, so make sure to save it as a plain text file and then rename to .html before you upload? The only difference is I have a mac so I did mine in textedit.
Mar. 12th, 2018 11:01 pm (UTC)
I will give it another shot then, thanks!
Mar. 8th, 2018 10:44 pm (UTC)
this is SO GORGEOUS, i decided to use it for a cr chart! i love it, thank you for sharing it with us!
Mar. 12th, 2018 07:31 pm (UTC)
Oh, that's awesome!! ♥ I'm so glad you like it!
Mar. 10th, 2018 07:47 pm (UTC)
This is amazing! I am using it as a muse list here!
Mar. 12th, 2018 07:32 pm (UTC)
Tysm! ♥ Ughhh, that background is too pretty.
Mar. 12th, 2018 08:19 pm (UTC)
Purple is my fave and I am really in love with how it turned out! I have very ambitious plans to also try to add some filtering functions eventually lol
Mar. 19th, 2018 03:40 am (UTC)
so i've never used custom styles before, and was wondering how i go about pasting this into one? i do have a perm acct.
Apr. 2nd, 2018 04:01 pm (UTC)
Okay, so! Using custom styles as custom HTML pages can definitely seem like a big pain, but if you know which parts to mentally ignore it's actually extremely easy! First thing's first: You can get to your styles by going to http://www.insanejournal.com/styles. This page has links to create new styles and edit existing styles that you've already made.

If you're replacing a journal view with a custom HTML page, the type you pick matters. If you're not, it doesn't. You have four style options:
Most Recent Events - Main journal page
Friends View - Friends page
Calendar - Calendar/archive page
Day View - Specific date URL pages

If you're going to use this page to sub out an existing journal view pick the appropriate one (this only works when using S1. If you're using S2 you won't be able to replace pages to take up their URLs, but you can still make custom styles with their own randomized URL strings.) Usually if I'm using my styles for demos (like I did for this entry) I just pick Most Recent Events and move on.

Once you've picked your style type and clicked edit, you're probably wondering, okay, but what the hell do I do with all these textareas... The answer? Nothing, mostly. The very top textarea is the title (good for if you plan to make multiple styles and need to keep track of them in the editing list) and the very bottom textarea is for your coding. Paste it there and save and you're good to go; that's it! The [Preview Current Style] link above where you put the style's title is your permanent link to the page.

Now, if you were thinking "Hey, yeah! I want to use this to replace a journal page!" and you're using S1 Generator, then go ahead and go to Customize > Look and Feel and click whichever pave type dropdown you set the custom style to. The style you just made should be on the list and you can swap out S1 Generator for that instead!
Apr. 2nd, 2018 05:28 pm (UTC)

Thank you so much!
Apr. 2nd, 2018 05:46 pm (UTC)
No problem at all! ♥ The various links to style editing are SUPER hard to find and it's really annoying lmfao. And then you finally get to them and it's like oh good, fifty textareas, just what I wanted to deal with... (Which isn't to say they aren't useful, just... in most cases we don't need them for what we're doing LOL.)

But yeah! In most cases all you're really going to need to know is that you can create styles here: http://www.insanejournal.com/styles/create.bml and edit styles here: http://www.insanejournal.com/styles/edit.bml and that the only inputs you need on the creation page for custom HTML pages are the first and last ones!
Apr. 2nd, 2018 05:50 pm (UTC)
Yeah, i saw the gazillion textareas and i was like 'um...'.

But thanks to your handy instructions I've gotten it up! Now I just need to go through and add everything in...
Apr. 2nd, 2018 05:53 pm (UTC)
RIGHT LOL. I remember the first time I saw that page I was like w h a t lmfao. It's DAUNTING before you realize you don't actually need any of them.

Let me know if you need any help with anything! ♥
Apr. 2nd, 2018 05:57 pm (UTC)
Will do! Thanks again. ♥
Mar. 24th, 2018 04:52 pm (UTC)
seconding the above comment -- i have a perm account but have never used a custom style. i poked around the FAQ and all that on it but am still not sure where the coding goes?
Apr. 2nd, 2018 04:02 pm (UTC)
Apr. 3rd, 2018 03:10 am (UTC)
omg thank you! i was super scared by all the text areas.

i seem to be having an additional problem, where each picture has decided to be on its own line rather than several to a row? (see here) i'm sure it's something silly i did, but i can't figure it out.

thank you so much for all your help, and for this beautiful code!
May. 8th, 2018 05:50 pm (UTC)
Love this! I'm using it here but I have a question! How would you go about using two links in the "view journal" section? I fiddled around with the code but all I got was two separate boxes.
May. 8th, 2018 06:11 pm (UTC)
Thank you! If you're wanting them side by side in the block link area, replace the .j-link CSS with this CSS instead:

.j-link{margin:20px auto 0 auto;text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-size:10px;letter-spacing:2px;font-style:normal;}
.j-link a{display:inline-block;margin:0 3px;background:rgba(0,0,0,0.3);padding:3px 7px;}

And then you'd replace the single journal HTML link with this:

<div class="j-link">
<a href="URL">LINK</a>
<a href="URL">LINK</a>

If you want them one above the other then use the same HTML above, but this CSS:

.j-link{margin:20px auto 0 auto;text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-size:10px;letter-spacing:2px;font-style:normal;}
.j-link a{display:block;margin:3px 0;background:rgba(0,0,0,0.3);padding:3px 7px;}

Hope that helped! ♥
Oct. 3rd, 2018 02:12 am (UTC)
I love this! BUT I've been poked that it's not super mobile friendly with the hover - is there a way to turn the hover off, and make the blurb just stationary on the faded out picture in the back? Or would that be too complicated?
Oct. 3rd, 2018 02:14 am (UTC)
(NM I see that if you click the pic, it comes up with the blurb. I should be okay! :D)
Oct. 12th, 2018 04:31 am (UTC)
Can I ask what browser you're using? I haven't been able to get any mobile browser to react :(
Oct. 12th, 2018 04:35 am (UTC)
Chrome on IOS and Android both work for me, I haven't tried any others :/
Oct. 12th, 2018 04:34 am (UTC)
I LOVE this and I've been trying to use it, but I'm having mobile problems too. Is there any way to get the image itself to be a link, so that people could click through without needing the hover effect text to show up? (I mean, they'll miss out on a beautiful hover animation, but at least it's functional enough that I don't have to worry!)