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

Detailed Locations





Lucky's Bar
123 W. Main St.
Owner is Bae
OWNER
This Cutie
MANAGER
It's That Guy
BARTENDER
Quisque diam mauris, euismod volutpat ipsum non, bibendum imperdiet erat. Nam non sem vel dolor dictum pharetra. In vestibulum sapien sed consectetur cursus. Maecenas placerat placerat quam, vel mollis velit euismod commodo. Suspendisse mauris justo, vestibulum congue ullamcorper nec, iaculis vitae dui.

In accumsan tellus ut ultricies bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sagittis suscipit felis. Fusce congue accumsan convallis. Integer eu tellus ante. Suspendisse condimentum metus vel est ultrices, nec gravida lacus consequat. Proin interdum iaculis hendrerit. Suspendisse potenti.


Information

Hey guys! I don't have too many location codes (a decent amount, but we could definitely have more!), so I thought this would be a fun one to do this month! This code comes with two options: A single location with written information under the information card, or a grid of slightly smaller location cards without written location info. This could also easily be used as a log header though; that would be extra cute! Enjoy! ♥

Coding: Single block with information



Coding: Multiple blocks; title cards only



Installation Guide

Paste into an entry and fill in the following!

COVER_BG - Location background (this has a darkening overlay so that your text is readable)
LOCATION_NAME - Title
ADDRESS/SUBTITLE - Subtitle
ICON - Employee picture
NAME - Employee name
ROLE - Employee position

Linked Directory

Want to use the multiple version as a link directory to individuals of each one with written info? No worries, I got your back!

In <!---LOCATION BLOCK--> of the Multiple blocks; title cards only code, change the holding divs to link tags instead, as specified here and then add an href="URL" before the style tag. Boom, a link!

Additionally, you'll want to add text-decoration:none;color:#fff; to that div's (now link's) style tag.

Editing Guide

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

FONTS
tahoma,arial,sans-serif - Overall font

IMAGES
https://i.imgur.com/Y4duKcD.png - Location pin

COLORS
rgba(255,255,255,0.1) Each employee background
#fff Container background
#ddd Border
#000 Photo overlay and text shadow


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. 4th, 2019 12:18 am (UTC)
THIS IS DOOOOPE! I love it!
Sep. 4th, 2019 05:54 pm (UTC)
THIS IS ONE OF MY TOP FAVS TBH!!! I want to make some other types of codes to match the style for SURE.
Sep. 4th, 2019 01:04 am (UTC)
This is so awesome. I will totally snag this the next time I'm coding stuff for a game.
Sep. 4th, 2019 05:54 pm (UTC)
Heee, ty ty! ♥
Sep. 4th, 2019 02:25 am (UTC)
//bangs fist in excitement!!!

Oh my gosh oh my gosh oh my gosh! This is!! Exactly!! What I need for an information post for a character of mine!!!! The setup, the design, the style- Absolutely gorgeous and lovely and functional. 😍

Thank you for being my lifesaver, Tess. I've been quietly dying inside every time I hit preview and I see one of my subtitles floating 500px away from the rest of the code somehow.
Sep. 4th, 2019 05:55 pm (UTC)
SCREAM LOL I'm so glad I could help, however unintentionally LMAO. 💖💖💖
Sep. 5th, 2019 03:45 pm (UTC)
This is so great! I have a question, not sure if it works with this coding though! But is there a way to make the text part of the workers, something that shows just when you hover over their image? So you'd hover over the icon of the person and it would say "This Cutie, manager" instead of next to the image? I've tried a few times and haven't managed to make it work.

Thank you!!
Sep. 5th, 2019 04:28 pm (UTC)
Thank you!! ♥

Unfortunately, entry coding doesn't allow for actual hover functions, but you do still have an option for what you want, and bonus points: It's pretty easy!



We're just removing all the div styling to leave just the image, adding a title to that image so that it shows up when you hover, and then doing some minor tweaks to the image styling to make them sit correctly. So this:

				<!---EMPLOYEE--->
				<div style="background:rgba(255,255,255,0.1);width:150px;display:flex;align-items:center;margin:7px 0 0 0;">
					<img src="ICON" style="height:37px;margin:0 7px 0 0;border-radius:0 40px 40px 0;">
					<span>
						<b>NAME</b><br>
						ROLE
					</span>
				</div>


Becomes this:

				<!---EMPLOYEE--->
				<img src="ICON" style="height:37px;margin:7px 0 0 0;border-radius:0 40px 40px 0;display:block;" title="NAME (ROLE)">
Sep. 5th, 2019 04:33 pm (UTC)
Thank you!!!
Sep. 28th, 2019 03:26 pm (UTC)
This is beautiful! Thank you.

I'm using it here.
Oct. 3rd, 2019 03:16 am (UTC)
Ohhh, I LOVE how you used this!! That's super cool.