Tessisamess

Information

Hey guys! Today it's time for something I've been wanting to do for ages—a customizable apartment guide! Unlike most of my codes, you'll put this one together in pieces, starting with your base, then choosing a floorplan for each floor, and finally your tenant styling. If you have more than roughly 90 characters to house, I recommend using the Simple Text tenant formatting to ensure you don't run out of space in your entry, but this code should give you a lot of mileage before you hit the character limit.

If you're using more than one building's floorplan in the same entry, I also recommend renaming the anchors before adding too much to a building's floorplan. So, if you have two different apartment buildings and two copies of this code, I'd recommend renaming with the building name before the numbers in the anchors and links; example: a name="buildingname-1" for the first floor's anchor and a href="#buildingname-1" for its corresponding nav link.

Enjoy! 💖

Step 1: Base

This is the base code for all floorplan configurations. Paste this and start choosing your options!
<lj-raw><div style="margin:0 auto;width:600px;text-align:center;font-family:calibri,sans-serif;font-size:11px;text-transform:uppercase;line-height:1;color:#111;"> <!--FLOORS--> <div style="height:750px;overflow:hidden;background:#ddd;"> <!--HOME - DELETE IF COVER IMAGE ISN'T NEEDED--> <a name="0"></a> <div style="height:100%;overflow:hidden;background:url(BG_IMG)center;background-size:cover;"></div> <!-- COPY/PASTE YOUR CHOSEN FLOORPLAN HERE PASTE ONCE FOR EACH FLOOR OF YOUR BUILDING REMEMBER TO CHANGE THE a name FOR EACH FLOOR TO MAKE SURE YOUR NAVIGATION (below) WORKS DELETE THIS MESSAGE WHEN PASTING YOUR CONTENT ---> </div> <!--NAV--> <div style="margin:10px 0 0 0;letter-spacing:2px;line-height:2;"> <a href="#0" style="text-decoration:none;color:#111;"><b>TITLE</b></a> | <a href="#1" style="text-decoration:none;color:#111;">FIRST FLOOR</a> | <a href="#2" style="text-decoration:none;color:#111;">SECOND FLOOR</a> | <a href="#3" style="text-decoration:none;color:#111;">THIRD FLOOR</a> | <a href="http://tessisamess.insanejournal.com/136136.html" style="text-decoration:none;color:#111;">CODING</a> </div> </div></lj-raw>

Step 2: Floorplan

Choose the floorplan that works best for your needs and paste it into the base code. After choosing your tenant style, copy/paste the floorplan as many times as needed, once for each floor.

Floorplan #1 | Floorplan #2 | Floorplan #3 | Floorplan #4 | Floorplan #5

Step 3: Tenants

Choose your preferred style for each room, then paste into the appropriate areas.

Simple Text | Styled Icons

Editing Guide

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

FONTS

calibri,sans-serif - All text

IMAGES

https://i.imgur.com/M9sfHcW.png - Default icon (styled tenants)

OTHER

opacity:0.06; - Hallway text
opacity:0.2; - Room number text (styled icons)

COLORS

#fff

Room background

#f6f6f6

Hallway background

#eee

Floorplan link background (styled tenants)

#ddd

Borders

#111

All text

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!