Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

December 2019

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

Roster: Lined Up





BARBARA GORDON
BUT FIRST, LET ME TAKE A #SELFIE
PB: HOLLAND RODEN
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME

CODE BY TESSISAMESS



BARBARA GORDON
BUT FIRST, LET ME TAKE A #SELFIE PB: HOLLAND RODEN
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME
NAME HERE
5 lines max freetext (7 lines total) PB: PB NAME

CODE BY TESSISAMESS


Information

Hey guys! I'm super sorry the previews aren't chock-full of images! I'm super sick right now, so I'm kind of just DOIN MY BEST LOL.

Today we have two versions of a character roster, which could easily be reused as a CR chart or cast list for GPSLs or other, smaller games. The vertical orientation roster holds as many slides and icons as you can fit into an entry, while the horizontal orientation fits sixteen total, so if you have a large list and prefer Horizontal, my suggestion would be to use multiples and choose a way to section them (gender, fandom, game, etc.)

The striped background is a CSS gradient, which means you can feel free to change it to any color! I also show how to remove it, put in a background image instead, and how to replace it with a new CSS pattern below. Enjoy! ♥

Coding: Vertical



Coding: Horizontal



Installation Guide

Paste into an entry and fill in the following!

NAMEHERE (x4) - Character name
FREETEXT (x4) - Blurb info, can be 1-5 lines of text
PBNAME (x4) - PB name
IMAGE1 through IMAGE4 - Main image of each character; can be any dimension, as this is a background image
ICON1 through ICON4 - Each corresponding icon link; can be any size as long as the dimensions are all the same as each other or the way they line up will get wonky

*You can add/delete characters as needed; just remember to edit the a name and a href of the corresponding icon link when adding extra blocks so that it shows up when clicked.

Editing Guide

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

FONTS
helvetica,arial,sans-serif - Overall font
arial black,gadget,sans-serif - Headings font

COLORS
255,255,255 - Infobox background color (semi-transparent rgba value)
#E6DFE7 - Background color
#000 - Text color
0,0,0 - Box shadows and gradient stripe color (semi-transparent rgba value)

BACKGROUND
Remove striped gradient -
background:linear-gradient(to bottom,rgba(0,0,0,0.05),rgba(0,0,0,0.05) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1));background-size:100% 5px; (you can also keep the stripes and make them larger by editing 5px to a larger number.)

To keep the stripes but change them to a light overlay change each instance of 0,0,0 to 255,255,255 to invert it! Keep in mind not to do this as a replace all in the overall code or the box shadows in the code will change too.

You can find other CSS gradient designs here! Just keep in mind that since they're not mine, I may not have time to help edit them. Don't be scared though, color changes on these are very easy with replace all! To use these on this code you'll just want to replace the same code as given in remove striped gradient.

Add background image - Change background:#E6DFE7; to background:#E6DFE7 url(BGIMAGE)center; and add background-size:cover; after it if you're using a single large image and not a repeating pattern. This CAN be used behind the gradient stripes. If your background seems odd and it's a single large image add no-repeat after center.

REMOVE/CHANGE ALL INSTANCES OF BORDER-RADIUS
border-radius:10px/20px; This can be changed to a single pixel size for standard border radius, removed completely, or changed in current format. This radius is on the outer containers, each icon, the blurb, and the large background image of each character.

CHANGE BLURB WIDTH
width:270px; Need more space? Need less space? You can change the width of the blurb with this, OR you can change padding:290px to a smaller number of your text is still getting cut off. If you do alter the padding make sure to ADD however many pixels you take off to height:110px;

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!

Comments

Sep. 28th, 2017 09:05 pm (UTC)
BURNING ELMO GIF DAMN IT
Sep. 28th, 2017 09:08 pm (UTC)
SCREAM LOL the sentiment is still the same
Sep. 28th, 2017 10:21 pm (UTC)
OMG I LOVE THIS AND I LOVE YOU!
Sep. 28th, 2017 10:32 pm (UTC)
AHHH, I'M GLAD ♥ I'M HYPE! I'VE ALREADY USED IT NGL.
Sep. 29th, 2017 12:50 am (UTC)
I just added it to this journal for my current character list.
Sep. 29th, 2017 04:33 pm (UTC)
I JUST REDID MY CHARACTER ROSTER AND NOW THERE IS THIS YOU BEAUTIFUL WITCH
Sep. 29th, 2017 06:50 pm (UTC)
OOPS, MMMMMMMY BAD ♥
Oct. 20th, 2017 12:51 am (UTC)
Oct. 23rd, 2017 10:24 pm (UTC)
GUHHHHHHHH, I'm drooling. Especially since it all matches your journal theme perfectly. ♥_♥
Oct. 3rd, 2017 10:33 am (UTC)
This is epically awesome. You're a bad ass at all things and I am just head over heels for this code. I am SO using it at my CDJ.
Oct. 19th, 2017 03:24 am (UTC)
Pshhh, tysm boo! ♥
Oct. 22nd, 2017 06:12 pm (UTC)
LOL I lied. I used it here instead!!
Oct. 23rd, 2017 10:23 pm (UTC)
OHHH, sweet dude!!! ♥
Apr. 2nd, 2019 09:35 pm (UTC)
I know you didn't create this as a phone lock screen, but I modified it and made it one, and I. LOVE. IT. Take a look! Thank you so much!
Apr. 2nd, 2019 09:39 pm (UTC)
OH MAN THAT IS DOPE, I LOVE IT!!!
Apr. 2nd, 2019 09:49 pm (UTC)
ME TOO! THANK YOU SO MUCH FOR THE CODE! ♥♥♥♥