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

January 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

Interactive Map


LIVE PREVIEW


Information

Hey guys! I've been wanting to make one of these for ages, and it's finally here: An interactive location map! This map comes with multiple features, so read on for information on what they are and how to use them! Enjoy! ♥

Please take note that this is not really a code for mobile; such is life with some types of codes! If your game's playerbase is predominantly on mobile most of the time this likely isn't the code for you. (Due to how this code is made there will be no entry version made for it.)

The Coding



How it works!

Paste into a custom style (or off-site equivalent if you don't have a paid account) and get started! Check out the below details if you need extra help setting up your game's interactive map locations!

TYPES OF MAPS
You've got two map options with this code! The first, used in the demo, is #clip-map, which is created using a clip mask. You can visually create your own map shape with Clippy and grab the CSS to replace the default shape CSS in #clip-map quickly and easily!

The second option is #bg-map, for those of you who have an image background you'd like to use as your map instead. Just add the background to the designated area in the root CSS and then change section id="clip-map" to section id="bg-map" instead.

You may also find that the default dimensions aren't working for what you want. To change the clip mask map's dimensions you'll want to edit width:74vw;max-width:1000px;height:94vh; and for the image map's dimensions you'll edit height:94vh;width:94vw; (any measurement units will work, so if you need exact pixels you can go for it!)

ADDING LOCATIONS
Each location's structure is pretty straightforward, but I'll break it down below!
		<button id="loc-1" class="location dining">
			<img src="ICON_URL" class="pin">
			<img src="PHOTO_URL" class="photo">
			<div>
				<h3>Location</h3>
				Location info
			</div>
		</button>
Anything in blue is your content, and anything in red is needed for the map to appear and work correctly. Your location ID is needed for positioning each specific location on the map, and your location class denotes that it takes on the general style of all locations, as well as having an extra class for what type of location category it falls under for map pin color coding purposes.

POSITIONING & COLOR CODING
As mentioned above, each location has an ID and two classes; one class is uniform to all locations (the location class) while the other two control other aspects.

Your location ID controls positioning. Give each location an ID that reflects the specific location rather than a general one (for instance, id="loganscoffee" rather than id="dining") and then position it in the CSS using that ID, for example: #loganscoffee{left:300px;top:143px;} This is the only thing the ID is in charge of, so the only other thing to note is that you can use left, right, top, bottom when positioning (only use one vertical and one horizontal position point per ID.)

Your location's second class is the general type of location that you're adding in rather than the specific location name. I have base options added in, but they'll be very easy to rename and recolor. Your as-is options are: community, city, entertainment, housing, dining, shopping and the class is only to control the color of the pins. If you decide you want all pins to be a uniform color you can disregard using a second class completely and add a background color to .location in /* LOCATIONS - CLOSED */ instead!

NOTES & CAVEATS
You cannot add links to the location blurbs without reformatting the way they're done entirely; sorry about that! The reason they're done the way they are is because the button method opens the expanded content towards the direction with the most available space to view it without any tedious extra positioning needed, and ends up being a cleaner, more intuitive method. It's just one of those trade-offs you have to make sometimes.

Extremely long location information, however, is fine! Once the location information hits a certain height it will default to overflow scrolling so that nothing accidentally cuts off.

Location Images

Here are all location images used for the closed-status map pins, plus a few I didn't use in the demo that you may be likely to need! Icons are all inverted to white via the CSS, so if you're recoloring and need them to be black instead like they are below, you can remove the instance of filter:invert(100%); from the page's CSS. (I recommend re-hosting these images.)

FOOD & DINING
CITY & COMMUNITY
RESIDENTIAL
SHOPPING
SERVICES

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!
Tags:

Comments

From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.