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!
×

October 2019

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

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

Playlist: Album Cover





LittleGhosts
Song One
Song Two
Song Three
Song Four
Song Five
Song Six
Song Seven
Artist One
Artist Two
Artist Three
Artist Four
Artist Five
Artist Six
Artist Seven
CODE BY TESSISAMESS

BLOODLUST
I made this extra one just to show you how easy it is to edit lmao

A Song
Another Song
Cool Song
Favorite Song
An Artist
Very Cool Artist
Another Artist
Rad Artist
CODE BY TESSISAMESS


Information

Hey guys! I just wanted to do a fun front/back playlist cover mockup for you guys that involves much less image editing for those of you who aren't as inclined towards that skill. Like my move poster mockup, this comes with alternate text styles. Enjoy! ♥

The Coding



Installation Guide

Paste into an entry and fill in the following!

FRONT_COVER - Front cover background image
BACK_COVER - Back cover background image
SPOTIFY_URL - Spotify playlist link

A note: For the demo I actually used the same image for both and just sized and positioned them differently. If you have a large image that you'd like to do this with, what I did with the front cover was set the background size to 220% and positioned it to center. Then, for the back cover, I set the size to 260% and positioned it to center right. That way I had two "matching" images without actually needing two matching images.

Editing Guide

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

DIMENSIONS
1020px - Overall width (this should be your cover width multiplied by two, plus 20px for spacing.)
500px - Each cover's height and width

TITLE POSITION
The title position's default is justify-content:flex-start;align-items:flex-end;, which puts it at the bottom left. The justify spec is for horizontal alignment, and the align spec is for vertical alignment. Check out my flex alignment grid for information on how to align your title in any quadrant of the front cover.

FONTS
century gothic,helvetica,sans-serif - Overall font
font-size:40px; - Title font size
font-size:12px; - Overall font size

IMAGES
https://i.imgur.com/KWVRnSS.png - Spotify icon

COLORS
#fff Container background and overall text and track listing text
#ccc Border
#4E778A Accent color on some alt titles
#000 Secondary color on some alt titles


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

Oct. 8th, 2019 02:08 am (UTC)
This is pretty neat!
Oct. 8th, 2019 04:40 am (UTC)
Ty ty!! ♥
Oct. 8th, 2019 06:22 pm (UTC)
ooooOOOOooooh nifty!
Oct. 9th, 2019 07:43 am (UTC)
TY!!! ♥
Oct. 9th, 2019 02:43 am (UTC)
T E S S
Oct. 9th, 2019 07:43 am (UTC)
I KNOW RIGHT LOL I'M SO INTO IT (and it spawned an idea for ANOTHER cool one that I'm really pumped to post, hehehe.)
Oct. 9th, 2019 07:20 am (UTC)
AHHHH. THIS IS SO GOOD.

Going to use this for one of my characters now because the atmosphere and the aesthetics for Little Ghosts edit are PERFECT for them. Thank you thank you thank you for sharing this.
Oct. 9th, 2019 07:42 am (UTC)
AHHH, TY TY!! I LOVE this one ngl haha. I'm having so much fun this month combining spooky aesthetics with mockups, which is a type of code people have been asking for.

Here's the ghost photo I used for that cover for you! Just follow the installation guide note on background positioning and size if you want it to look exactly the same! (Fun tip: That's basically exactly what I did for the second example too, so setting the backgrounds that way is really just such a nice way to get a cohesive front and back without needing two matching photos.)
Oct. 10th, 2019 03:15 am (UTC)
I love this so much!! I used it here. I added links to the song titles instead of using a spotify playlist link.

http://torre.insanejournal.com/7850.html
Oct. 10th, 2019 03:46 am (UTC)
Okay, but I am literally in love with what you did for the cover backgrounds??? That's such a good idea!!
Oct. 10th, 2019 03:48 am (UTC)
omg thank you. it was one picture but i cropped it so i could do the side by side like that. i thought about just using the whole picture (cropped) on the front cover and then just zooming for the back cover, but i loved this idea more.
Oct. 10th, 2019 03:50 am (UTC)
That was SUCH a smart design choice dude, I'm so into it!
Oct. 10th, 2019 02:42 pm (UTC)
This is so cool and useful, thank you!! I love the sneaky little Spotify icon in the corner. ♥