info sheet: mosaic

[efficio]

DAENERYS TARGARYEN Every time a new Targaryen is born, the gods toss the coin in the air and the world holds its breath to see how it will land. A SONG OF ICE AND FIRE PLAYER NAME: Name JOURNAL: journal PLURK: plurk TIMEZONE: GMT+/-X

OVERVIEW A general overview of what your character's life/personality/whatever is. Try to make it a short blurb, just a paragraph or two. There'll be a place to get into detail about it later. For now, keep it to the basics, how you would describe the character to a friend who wanted a brief rundown. This is what it looks like if you have two paragraphs. If this gets too long, a scroll box will appear so you can keep writing without sacrificing the look of the code. If your blurb is too short and it looks weird, get rid of the <div style="height: 175px; overflow: auto; padding-right: 10px;"> right before the text OVERVIEW GOES HERE. PERSONALITY This is where you can really get into detail about your character's personality. You can just copy and paste the personality section from your application here or write an entirely new one. It's all up to you! This section should be longer than the overview section, which should only touch on the basic premise of your character. Ideally, this should be greater than 2 paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet neque. Aliquam id libero ut dolor suscipit molestie eget non risus. Nam ultricies, felis vitae ultrices auctor, est est iaculis nisl, et varius tellus nunc id tortor. Fusce in finibus velit. Nulla facilisi. Morbi rutrum porta sodales. Etiam accumsan, arcu et auctor fermentum, mi lectus pretium metus, non ultricies lectus sem vitae tortor. Sed suscipit est at malesuada tempor. Duis venenatis risus eros. Suspendisse potenti. Morbi blandit arcu fringilla, mollis mauris a, convallis sem. Pellentesque sit amet enim nisi. Nullam laoreet dui quis elit lacinia sodales. Nulla et facilisis metus. In ornare fermentum nibh, ut tempus leo. Praesent feugiat est consequat massa facilisis, lacinia porta orci congue. Maecenas vitae placerat velit, sit amet sagittis enim. Donec et urna ut tellus aliquet semper. Nullam feugiat turpis non nibh efficitur, et pulvinar purus congue. Ut in nibh felis. Aliquam erat volutpat. Ut pretium erat et laoreet condimentum. Integer tempus, nisi sed tempus maximus, elit urna facilisis justo, nec imperdiet leo mi vel dolor. Praesent sollicitudin mauris vitae ex malesuada, non maximus nibh rutrum. Morbi accumsan ligula ut nunc eleifend, sed rhoncus augue feugiat. Sed arcu ligula, maximus sed ipsum ut, condimentum feugiat leo. Donec blandit volutpat dui, in laoreet enim. Etiam sagittis condimentum orci ac pellentesque. Sed cursus, risus quis hendrerit pharetra, enim eros cursus odio, in mattis sem sapien vitae enim. Etiam a augue dapibus nunc sodales sagittis. Pellentesque diam arcu, placerat in nisi eu, fringilla malesuada nulla. Donec et sem convallis, viverra tellus a, tincidunt ante. Curabitur accumsan neque vitae pretium congue. Suspendisse quis purus blandit odio efficitur tincidunt. Pellentesque commodo vestibulum nulla at malesuada. Cras quis quam ex. ABILITIES If your character has any special skills or abilities, note them here. If they're completely useless, you can note that here as well. Anything ranging from super-strength to medical knowledge to puppetry skills can go here. Praesent feugiat est consequat massa facilisis, lacinia porta orci congue. Maecenas vitae placerat velit, sit amet sagittis enim. Donec et urna ut tellus aliquet semper. Nullam feugiat turpis non nibh efficitur, et pulvinar purus congue. Ut in nibh felis. Aliquam erat volutpat. Ut pretium erat et laoreet condimentum. Integer tempus, nisi sed tempus maximus, elit urna facilisis justo, nec imperdiet leo mi vel dolor. Praesent sollicitudin mauris vitae ex malesuada, non maximus nibh rutrum. Morbi accumsan ligula ut nunc eleifend, sed rhoncus augue feugiat. Sed arcu ligula, maximus sed ipsum ut, condimentum feugiat leo. Donec blandit volutpat dui, in laoreet enim. Etiam sagittis condimentum orci ac pellentesque. Sed cursus, risus quis hendrerit pharetra, enim eros cursus odio, in mattis sem sapien vitae enim. Etiam a augue dapibus nunc sodales sagittis. Pellentesque diam arcu, placerat in nisi eu, fringilla malesuada nulla. Donec et sem convallis, viverra tellus a, tincidunt ante. Curabitur accumsan neque vitae pretium congue. Suspendisse quis purus blandit odio efficitur tincidunt. Pellentesque commodo vestibulum nulla at malesuada. Cras quis quam ex.

INFORMATION CANONPOINT: Canon Point AGE: Age HEIGHT: 0'0" BUILD: Build HAIR: Hair EYES: Eyes APPEARANCE: Link STATUS: Relationship Status OCCUPATION: Occupation RESIDENCE: Residence PERMISSIONS BACKTAGGING: Y/N 4TH-WALLING: Y/N THREADJACKING: Y/N MIND READING: Y/N FIGHTING: Y/N ROMANCE: Y/N INJURY: Y/N KILLING: Y/N

( efficio )

info sheet: mosaic Here's another info sheet like my first one, but a bit more ambitious. There are a few different options! The default is the TNR Mosaic, previewed above. The second is the TNR Plain, which looks like this (click for larger image): The only difference is that the icon mosaic on the top left is replaced with a regular rectangular image. If you'd like to use a gif instead, this is the code you should probably use. There's also Helvetica Mosaic and Helvetica Plain if you'd prefer a sans-serif font, which is just the same codes scaled properly for a different font. Customization is pretty simple, given that this is a mostly B&W code. If using the Mosaic code, replace USERPIC 1 through USERPIC 15 with links to — you guessed it — the icons you wish to appear in the mosaic. If using the Plain code, replace LEFT PICTURE URL with the URL of the picture you'd like to appear in the top left. All the following instructions are the same regardless of the version you use. Replace CHARACTER NAME with your character's name, FLAVOR TEXT with whatever text you'd like to appear under the name (I used a quote), and CANON NAME with the canon your character is from. Replace OVERVIEW GOES HERE with a short, 1-2 paragraph blurb about your character, PERSONALITY GOES HERE with a longer personality, and ABILITIES GO HERE with a blurb about your character's abilities. Lastly, replace RIGHT PICTURE URL with the picture you'd like to appear in the bottom right corner. Everything else is extremely self-explanatory! I tried to make the code as user-friendly as possible even though I tend to be an extremely messy coder, and I hope it worked! Dreamwidth gets a little funky when I try to put this code in one entry more than once for some reason, possibly because it's like a million freaking characters, so the codes are down below in the comments section! The code is fairly complicated, so please please please let me know if anything isn't working right and I'll do my best to help you out!

Comments

(frozen comment) CODES

[efficio]

(frozen comment) TNR

[efficio]

TNR MOSAIC:
<raw-code><center><table style="font-family: times new roman;font-size: 13px;"><tbody><tr> <!-- LEFT COLUMN START!--> <td style="vertical-align: top;"><center><div style="width: 235px;height: 300px;overflow: hidden;"> <!-- LEFT PICTURE START !--> <!-- USERPIC ROW ONE START !--> <img src="USERPIC 1" style="overflow: hidden; clip-path: polygon(40% 0, 0 0, 0 100%);"> <img src="USERPIC 2" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -100px;"> <img src="USERPIC 3" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 4" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 5" style="overflow: hidden; clip-path: polygon(100% 0, 100% 100%, 60% 100%); margin-left: -100px;"> <!-- USERPIC ROW ONE END!--> <!-- USERPIC ROW TWO START!--> <img src="USERPIC 6" style="overflow: hidden; clip-path: polygon(0 0, 0% 100%, 40% 100%);"> <img src="USERPIC 7" style="overflow: hidden; clip-path: polygon(60% 0, 0 0, 40% 100%, 100% 100%); margin-left: -100px;"> <img src="USERPIC 8" style="overflow: hidden; clip-path: polygon(60% 0, 0 0, 40% 100%, 100% 100%); margin-left: -40px;"> <img src="USERPIC 9" style="overflow: hidden; clip-path: polygon(60% 0, 0 0, 40% 100%, 100% 100%); margin-left: -40px;"> <img src="USERPIC 10" style="overflow: hidden; clip-path: polygon(60% 0, 100% 100%, 100% 0); margin-left: -100px;"> <!-- USERPIC ROW TWO END !--> <!-- USERPIC ROW THREE START!--> <img src="USERPIC 11" style="overflow: hidden; clip-path: polygon(40% 0, 0 0, 0 100%);"> <img src="USERPIC 12" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -100px;"> <img src="USERPIC 13" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 14" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 15" style="overflow: hidden; clip-path: polygon(100% 0, 100% 100%, 60% 100%); margin-left: -100px;"> <!-- USERPIC ROW THREE END!--> <!-- LEFT PICTURE END!--></div><br> <!-- CHARACTER PROFILE START !--> <div style="width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><span style="font-family: times new roman;font-size: 20px;text-transform: uppercase;line-height: 20px;letter-spacing: 5px;"> CHARACTER NAME </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: times new roman;font-size: 12px;font-style: italic;line-height: 12px;letter-spacing: 1px;"> FLAVOR TEXT </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: times new roman;font-size: 20px;text-transform: uppercase;line-height: 20px;letter-spacing: 5px;"> CANON NAME </span></div><br> <!-- CHARACTER PROFILE END !--> <!-- PLAYER PROFILE START !--> <div style="font-family: times new roman;text-align: left;width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PLAYER</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <span style="font-weight: bold;letter-spacing: 3px;">NAME:</span> Name<br> <span style="font-weight: bold;letter-spacing: 3px;">JOURNAL:</span> <user name="journal"><br> <span style="font-weight: bold;letter-spacing: 3px;">PLURK:</span> <user name="plurk" site="plurk.com"><br> <span style="font-weight: bold;letter-spacing: 3px;">TIMEZONE:</span> GMT+/-X</div> <!-- PLAYER PROFILE END !--> <! -- MIDDLE COLUMN START !--> <td style="vertical-align: top;"> <!-- OVERVIEW START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">OVERVIEW</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> OVERVIEW GOES HERE </div></div><br> <!-- OVERVIEW END !--> <!-- PERSONALITY START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERSONALITY</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 250px;overflow: auto;padding-right: 10px;"> PERSONALITY GOES HERE </div></div><br> <!-- PERSONALITY END !--> <!-- ABILITIES START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">ABILITIES</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> ABILITIES GO HERE </div></div> <!-- ABILITIES END !--> <!-- MIDDLE COLUMN END !--> <!-- RIGHT COLUMN START !--> <td style="vertical-align: top;"><div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">INFORMATION</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 190px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">CANONPOINT:</span> Canon Point<br> <span style="font-weight: bold;letter-spacing: 3px;">AGE:</span> Age<br> <span style="font-weight: bold;letter-spacing: 3px;">HEIGHT:</span> 0'0"<br> <span style="font-weight: bold;letter-spacing: 3px;">BUILD:</span> Build<br> <span style="font-weight: bold;letter-spacing: 3px;">HAIR:</span> Hair<br> <span style="font-weight: bold;letter-spacing: 3px;">EYES:</span> Eyes<br> <span style="font-weight: bold;letter-spacing: 3px;">APPEARANCE:</span> <a href="APPEARANCE IMG">Link</a><br> <span style="font-weight: bold;letter-spacing: 3px;">STATUS:</span> Relationship Status<br> <span style="font-weight: bold;letter-spacing: 3px;">OCCUPATION:</span> Occupation<br> <span style="font-weight: bold;letter-spacing: 3px;">RESIDENCE:</span> Residence</div></div><br> <!-- INFORMATION END !--> <!-- PERMISSIONS START !--> <div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERMISSIONS</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 152px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">BACKTAGGING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">4TH-WALLING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">THREADJACKING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">MIND READING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">FIGHTING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">ROMANCE:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">INJURY:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">KILLING:</span> Y/N</div></div><br> <!-- PERMISSIONS END !--> <!-- RIGHT PICTURE START !--> <div style="width: 270px;height: 270px;overflow: hidden;"><img src="RIGHT PICTURE URL" width="270"></div> <!-- RIGHT PICTURE END !--> <!-- RIGHT COLUMN END !--> </tr></tbody></table> <!-- CREDIT START, PLEASE DON'T REMOVE !--> <div style="font-size: 10px;font-weight: 100;font-family: times new roman;text-shadow: #ccc 1px 1px 1px;text-align: right;letter-spacing: 5px;">( <a href="http://showcased.dreamwidth.org/" style="text-decoration: none;color: #000;">efficio</a> )</div> <!-- CREDIT END, PLEASE DON'T REMOVE !--> </raw-code>

TNR PLAIN:
<raw-code><center><table style="font-family: times new roman;font-size: 13px;"><tbody><tr> <!-- LEFT COLUMN START!--> <td style="vertical-align: top;"><center><div style="width: 235px;height: 300px;overflow: hidden;"> <!-- LEFT PICTURE START !--> <img src="LEFT PICTURE URL" width="235"> <!-- LEFT PICTURE END!--></div><br> <!-- CHARACTER PROFILE START !--> <div style="width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><span style="font-family: times new roman;font-size: 20px;text-transform: uppercase;line-height: 20px;letter-spacing: 5px;"> CHARACTER NAME </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: times new roman;font-size: 12px;font-style: italic;line-height: 12px;letter-spacing: 1px;"> FLAVOR TEXT </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: times new roman;font-size: 20px;text-transform: uppercase;line-height: 20px;letter-spacing: 5px;"> CANON NAME </span></div><br> <!-- CHARACTER PROFILE END !--> <!-- PLAYER PROFILE START !--> <div style="font-family: times new roman;text-align: left;width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PLAYER</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <span style="font-weight: bold;letter-spacing: 3px;">NAME:</span> Name<br> <span style="font-weight: bold;letter-spacing: 3px;">JOURNAL:</span> <user name="journal"><br> <span style="font-weight: bold;letter-spacing: 3px;">PLURK:</span> <user name="plurk" site="plurk.com"><br> <span style="font-weight: bold;letter-spacing: 3px;">TIMEZONE:</span> GMT+/-X</div> <!-- PLAYER PROFILE END !--> <! -- MIDDLE COLUMN START !--> <td style="vertical-align: top;"> <!-- OVERVIEW START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">OVERVIEW</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> OVERVIEW GOES HERE </div></div><br> <!-- OVERVIEW END !--> <!-- PERSONALITY START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERSONALITY</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 250px;overflow: auto;padding-right: 10px;"> PERSONALITY GOES HERE </div></div><br> <!-- PERSONALITY END !--> <!-- ABILITIES START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">ABILITIES</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> ABILITIES GO HERE </div></div> <!-- ABILITIES END !--> <!-- MIDDLE COLUMN END !--> <!-- RIGHT COLUMN START !--> <td style="vertical-align: top;"><div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">INFORMATION</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 190px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">CANONPOINT:</span> Canon Point<br> <span style="font-weight: bold;letter-spacing: 3px;">AGE:</span> Age<br> <span style="font-weight: bold;letter-spacing: 3px;">HEIGHT:</span> 0'0"<br> <span style="font-weight: bold;letter-spacing: 3px;">BUILD:</span> Build<br> <span style="font-weight: bold;letter-spacing: 3px;">HAIR:</span> Hair<br> <span style="font-weight: bold;letter-spacing: 3px;">EYES:</span> Eyes<br> <span style="font-weight: bold;letter-spacing: 3px;">APPEARANCE:</span> <a href="APPEARANCE IMG">Link</a><br> <span style="font-weight: bold;letter-spacing: 3px;">STATUS:</span> Relationship Status<br> <span style="font-weight: bold;letter-spacing: 3px;">OCCUPATION:</span> Occupation<br> <span style="font-weight: bold;letter-spacing: 3px;">RESIDENCE:</span> Residence</div></div><br> <!-- INFORMATION END !--> <!-- PERMISSIONS START !--> <div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><center><span style="font-family: times new roman;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERMISSIONS</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 152px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">BACKTAGGING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">4TH-WALLING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">THREADJACKING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">MIND READING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">FIGHTING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">ROMANCE:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">INJURY:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">KILLING:</span> Y/N</div></div><br> <!-- PERMISSIONS END !--> <!-- RIGHT PICTURE START !--> <div style="width: 270px;height: 270px;overflow: hidden;"><img src="RIGHT PICTURE URL" width="270"></div> <!-- RIGHT PICTURE END !--> <!-- RIGHT COLUMN END !--> </tr></tbody></table> <!-- CREDIT START, PLEASE DON'T REMOVE !--> <div style="font-size: 10px;font-weight: 100;font-family: times new roman;text-shadow: #ccc 1px 1px 1px;text-align: right;letter-spacing: 5px;">( <a href="http://showcased.dreamwidth.org/" style="text-decoration: none;color: #000;">efficio</a> )</div> <!-- CREDIT END, PLEASE DON'T REMOVE !--> </raw-code>

(frozen comment) HELVETICA

[efficio]

HELVETICA MOSAIC:
<raw-code><center><table style="font-family: helvetica;font-size: 12px;"><tbody><tr> <!-- LEFT COLUMN START!--> <td style="vertical-align: top;"><center><div style="width: 235px;height: 300px;overflow: hidden;"> <!-- LEFT PICTURE START !--> <!-- USERPIC ROW ONE START!--> <img src="USERPIC 1" style="overflow: hidden; clip-path: polygon(40% 0, 0 0, 0 100%);"> <img src="USERPIC 2" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -100px;"> <img src="USERPIC 3" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 4" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 5" style="overflow: hidden; clip-path: polygon(100% 0, 100% 100%, 60% 100%); margin-left: -100px;"> <!-- USERPIC ROW ONE END!--> <!-- USERPIC ROW TWO START!--> <img src="USERPIC 6" style="overflow: hidden; clip-path: polygon(0 0, 0% 100%, 40% 100%);"> <img src="USERPIC 7" style="overflow: hidden; clip-path: polygon(60% 0, 0 0, 40% 100%, 100% 100%); margin-left: -100px;"> <img src="USERPIC 8" style="overflow: hidden; clip-path: polygon(60% 0, 0 0, 40% 100%, 100% 100%); margin-left: -40px;"> <img src="USERPIC 9" style="overflow: hidden; clip-path: polygon(60% 0, 0 0, 40% 100%, 100% 100%); margin-left: -40px;"> <img src="USERPIC 10" style="overflow: hidden; clip-path: polygon(60% 0, 100% 100%, 100% 0); margin-left: -100px;"> <!-- USERPIC ROW TWO END !--> <!-- USERPIC ROW THREE START!--> <img src="USERPIC 11" style="overflow: hidden; clip-path: polygon(40% 0, 0 0, 0 100%);"> <img src="USERPIC 12" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -100px;"> <img src="USERPIC 13" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 14" style="overflow: hidden; clip-path: polygon(40% 0, 100% 0%, 60% 100%, 0% 100%); margin-left: -40px;"> <img src="USERPIC 15" style="overflow: hidden; clip-path: polygon(100% 0, 100% 100%, 60% 100%); margin-left: -100px;"> <!-- USERPIC ROW THREE END!--> <!-- LEFT PICTURE END!--></div><br> <!-- CHARACTER PROFILE START !--> <div style="width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><span style="font-family: helvetica;font-size: 15px;text-transform: uppercase;line-height: 15px;letter-spacing: 5px;"> CHARACTER NAME </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: helvetica;font-size: 11px;font-style: italic;line-height: 11px;letter-spacing: 1px;"> FLAVOR TEXT </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: helvetica;font-size: 15px;text-transform: uppercase;line-height: 15px;letter-spacing: 5px;"> CANON NAME </span></div><br> <!-- CHARACTER PROFILE END !--> <!-- PLAYER PROFILE START !--> <div style="font-family: helvetica;text-align: left;width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PLAYER</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <span style="font-weight: bold;letter-spacing: 3px;">NAME:</span> Name<br> <span style="font-weight: bold;letter-spacing: 3px;">JOURNAL:</span> <user name="journal"><br> <span style="font-weight: bold;letter-spacing: 3px;">PLURK:</span> <user name="plurk" site="plurk.com"><br> <span style="font-weight: bold;letter-spacing: 3px;">TIMEZONE:</span> GMT+/-X</div> <!-- PLAYER PROFILE END !--> <! -- MIDDLE COLUMN START !--> <td style="vertical-align: top;"> <!-- OVERVIEW START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">OVERVIEW</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> OVERVIEW GOES HERE </div></div><br> <!-- OVERVIEW END !--> <!-- PERSONALITY START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERSONALITY</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 250px;overflow: auto;padding-right: 10px;"> PERSONALITY GOES HERE </div></div><br> <!-- PERSONALITY END !--> <!-- ABILITIES START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">ABILITIES</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> ABILITIES GO HERE </div></div> <!-- ABILITIES END !--> <!-- MIDDLE COLUMN END !--> <!-- RIGHT COLUMN START !--> <td style="vertical-align: top;"><div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">INFORMATION</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 190px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">CANONPOINT:</span> Canon Point<br> <span style="font-weight: bold;letter-spacing: 3px;">AGE:</span> Age<br> <span style="font-weight: bold;letter-spacing: 3px;">HEIGHT:</span> 0'0"<br> <span style="font-weight: bold;letter-spacing: 3px;">BUILD:</span> Build<br> <span style="font-weight: bold;letter-spacing: 3px;">HAIR:</span> Hair<br> <span style="font-weight: bold;letter-spacing: 3px;">EYES:</span> Eyes<br> <span style="font-weight: bold;letter-spacing: 3px;">APPEARANCE:</span> <a href="APPEARANCE IMG">Link</a><br> <span style="font-weight: bold;letter-spacing: 3px;">STATUS:</span> Relationship Status<br> <span style="font-weight: bold;letter-spacing: 3px;">OCCUPATION:</span> Occupation<br> <span style="font-weight: bold;letter-spacing: 3px;">RESIDENCE:</span> Residence</div></div><br> <!-- INFORMATION END !--> <!-- PERMISSIONS START !--> <div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERMISSIONS</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 152px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">BACKTAGGING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">4TH-WALLING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">THREADJACKING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">MIND READING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">FIGHTING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">ROMANCE:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">INJURY:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">KILLING:</span> Y/N</div></div><br> <!-- PERMISSIONS END !--> <!-- RIGHT PICTURE START !--> <div style="width: 270px;height: 270px;overflow: hidden;"><img src="RIGHT PICTURE URL" width="270"></div> <!-- RIGHT PICTURE END !--> <!-- RIGHT COLUMN END !--> </tr></tbody></table> <!-- CREDIT START, PLEASE DON'T REMOVE !--> <div style="font-size: 10px;font-weight: 100;font-family: helvetica;text-shadow: #ccc 1px 1px 1px;text-align: right;letter-spacing: 5px;">( <a href="http://showcased.dreamwidth.org/" style="text-decoration: none;color: #000;">efficio</a> )</div> <!-- CREDIT END, PLEASE DON'T REMOVE !--> </raw-code>

HELVETICA PLAIN:
<raw-code><center><table style="font-family: helvetica;font-size: 12px;"><tbody><tr> <!-- LEFT COLUMN START!--> <td style="vertical-align: top;"><center><div style="width: 235px;height: 300px;overflow: hidden;"> <!-- LEFT PICTURE START !--> <img src="LEFT PICTURE URL" width="235"> <!-- LEFT PICTURE END!--></div><br> <!-- CHARACTER PROFILE START !--> <div style="width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><span style="font-family: helvetica;font-size: 15px;text-transform: uppercase;line-height: 15px;letter-spacing: 5px;"> CHARACTER NAME </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: helvetica;font-size: 11px;font-style: italic;line-height: 11px;letter-spacing: 1px;"> FLAVOR TEXT </span> <hr style="width: 100px;margin-top: 15px;margin-bottom: 10px;"> <span style="font-family: helvetica;font-size: 15px;text-transform: uppercase;line-height: 15px;letter-spacing: 5px;"> CANON NAME </span></div><br> <!-- CHARACTER PROFILE END !--> <!-- PLAYER PROFILE START !--> <div style="font-family: helvetica;text-align: left;width: 215px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PLAYER</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <span style="font-weight: bold;letter-spacing: 3px;">NAME:</span> Name<br> <span style="font-weight: bold;letter-spacing: 3px;">JOURNAL:</span> <user name="journal"><br> <span style="font-weight: bold;letter-spacing: 3px;">PLURK:</span> <user name="plurk" site="plurk.com"><br> <span style="font-weight: bold;letter-spacing: 3px;">TIMEZONE:</span> GMT+/-X</div> <!-- PLAYER PROFILE END !--> <! -- MIDDLE COLUMN START !--> <td style="vertical-align: top;"> <!-- OVERVIEW START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">OVERVIEW</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> OVERVIEW GOES HERE </div></div><br> <!-- OVERVIEW END !--> <!-- PERSONALITY START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERSONALITY</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 250px;overflow: auto;padding-right: 10px;"> PERSONALITY GOES HERE </div></div><br> <!-- PERSONALITY END !--> <!-- ABILITIES START !--> <div style="text-align: justify;width: 350px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">ABILITIES</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 150px;overflow: auto;padding-right: 10px;"> ABILITIES GO HERE </div></div> <!-- ABILITIES END !--> <!-- MIDDLE COLUMN END !--> <!-- RIGHT COLUMN START !--> <td style="vertical-align: top;"><div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"> <center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">INFORMATION</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 190px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">CANONPOINT:</span> Canon Point<br> <span style="font-weight: bold;letter-spacing: 3px;">AGE:</span> Age<br> <span style="font-weight: bold;letter-spacing: 3px;">HEIGHT:</span> 0'0"<br> <span style="font-weight: bold;letter-spacing: 3px;">BUILD:</span> Build<br> <span style="font-weight: bold;letter-spacing: 3px;">HAIR:</span> Hair<br> <span style="font-weight: bold;letter-spacing: 3px;">EYES:</span> Eyes<br> <span style="font-weight: bold;letter-spacing: 3px;">APPEARANCE:</span> <a href="APPEARANCE IMG">Link</a><br> <span style="font-weight: bold;letter-spacing: 3px;">STATUS:</span> Relationship Status<br> <span style="font-weight: bold;letter-spacing: 3px;">OCCUPATION:</span> Occupation<br> <span style="font-weight: bold;letter-spacing: 3px;">RESIDENCE:</span> Residence</div></div><br> <!-- INFORMATION END !--> <!-- PERMISSIONS START !--> <div style="text-align: left;width: 250px;background-color: #fff;padding: 10px;box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"><center><span style="font-family: helvetica;font-size: 17px;text-transform: uppercase;letter-spacing: 5px;">PERMISSIONS</span> <hr style="width: 100px;margin-top: 5px;margin-bottom: 10px;"></center> <div style="height: 152px;overflow: auto;padding-right: 10px;"><span style="font-weight: bold;letter-spacing: 3px;">BACKTAGGING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">4TH-WALLING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">THREADJACKING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">MIND READING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">FIGHTING:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">ROMANCE:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">INJURY:</span> Y/N<br> <span style="font-weight: bold;letter-spacing: 3px;">KILLING:</span> Y/N</div></div><br> <!-- PERMISSIONS END !--> <!-- RIGHT PICTURE START !--> <div style="width: 270px;height: 270px;overflow: hidden;"><img src="RIGHT PICTURE URL" width="270"></div> <!-- RIGHT PICTURE END !--> <!-- RIGHT COLUMN END !--> </tr></tbody></table> <!-- CREDIT START, PLEASE DON'T REMOVE !--> <div style="font-size: 10px;font-weight: 100;font-family: helvetica;text-shadow: #ccc 1px 1px 1px;text-align: right;letter-spacing: 5px;">( <a href="http://showcased.dreamwidth.org/" style="text-decoration: none;color: #000;">efficio</a> )</div> <!-- CREDIT END, PLEASE DON'T REMOVE !--> </raw-code>

[wehappyfew]

Dude. This is amazing. *_*

[efficio]

Thank you! I'm glad you like it ♥

[squidded]

This is so gorgeous! Very ambitious, but such a lovely over all code.

Great work!!!

[efficio]

Thank you, I really appreciate your kind words c:

[assertiveness]

This is great, saving for later c:

[efficio]

Thanks, I'm glad you like it! c:

[onehandwonder]

Hello! I'm using your gorgeous code over here, and I love it, but the spacing between the columns is a bit off, for some reason, and I can't for the life of me figure out how to fix it.

I'm thinking it might just be a layout thing, but idk, so I thought I'd ask :3

[efficio]

Ah, yep, that would be a layout issue. The easiest way to fix this would be to disable custom comment pages, but another relatively simple fix would be to ctrl + F <td style="vertical-align: top;"> (there are three in the code) and on the first one, add padding-right: ??px; — I'm not sure the exact way the layout is set up so you'll need to mess around with it a little bit — and on the last one add padding-left: ??px;. So it would end up looking like, for example, <td style="vertical-align: top;padding-right: 40px;">. I'd try maybe 15px or something first, since there appears to be like no space between the columns at all.

Let me know if this helps! If not, I can look for other ways to fix it.

[onehandwonder]

Ok, wow, turning off the custom comment pages totally fixed it, and I would never have thought of that, lol.

Thank you so much!

[efficio]

I'm glad it worked! ♥

[bicce]

this is gorgeous. snagging to use on this journal.

[efficio]

Thank you, I'm excited to see what you do with it! Felissa's PB is gorgeous!

[bicce]

ty! paulina singer is amazing and it's a travesty she isn't in more things!

[alwayscomeback]

I love this a lot, used it for my active journals. It's GORGEOUS, thank you!

[efficio]

My code being used for a Sokka journal, what an honor! Thank you, I'm glad you liked it c:

[alwayscomeback]

Now all you need is a Zuko journal to use it and you'll have Honour Squared!

[perfectdisaster]

I absolutely love this! Definitely snagging this for use on my active journals :)

[protectoris]

I used the Plain version here since the Mosaic doesn't appear correctly in Firefox.

[suckstobestrange]

Used the plain version myself, here and here with a few tweaks.

I'll probably use it for my other characters too, it's super user-friendly.

[marthastewart]

Hey, quick question. I think this maaay be a stylesheet issue, since I've tested this on my personal journal (too lazy to log out of the RP one now) and it worked, but when I tried this out it shows the mosaic for half a second and then it disappears.

It's over here: Arthur

Any ideas how to fix?

[efficio]

Hi! Looks like that's an issue with your layout. An easy way to fix it would be to turn custom comment pages off.

[marthastewart]

Turned custom comment pages off and it's still acting up :( I guess I'll have to change the theme (or the profile); I can't tell what would be preventing the photos from showing up.

[efficio]

That's odd; it shows up perfectly for me, as seen here. Could it be related to your browser?

[marthastewart]

Hmmmm. I'm using Windows 10 Chrome, at home, and Mac Yosemite Chrome here. (In Safari it has a different problem - the pictures don't have the hidden aspect, they're tiny boxes - but I never use Safari.) What do you use?

[efficio]

I use Windows 7 Chrome. Does it show up properly for the example on this page?

[marthastewart]

it does! Curiouser and curiouser. I'll try tracking down the person who made the layout and see if there's a coding issue there with one of the browsers...

[marthastewart]

Wait - does it show up for you okay at http://marthastewart.dreamwidth.org or only on the entry page itself? It shows up okay for me on the entry page, but not on the journal page.

[efficio]

Ah, only the entry page itself. If you need to, you can just put a cut so people have to view it on the entry page. Otherwise, that would be something you'd need to ask the layout maker about!

[marthastewart]

Problem solved, at least! I'll cut it for now and ask the layout maker if there's a solve. Thanks for all your help <33!!

[nymphic]

thank you for this! i really love this code. using it here with one additional box added in.

[lenabee]

Hey, this is great! I did notice though that the mosaic doesn't seem to work the same in Safari and Firefox as it does in Chrome:

Do you know how/if the code can be altered to work in other browsers?

vs.

I love the Mosaic look, but I'd want it to look the same for everyone if I used it. Many thanks in advance! This is so gorgeous!

[efficio]

Probably the easiest way to make it work there would be to take a screenshot of the mosaic and then use that as the image rather than all the separate icons! Unfortunately, I'm not sure what to do to make it so that the separate icons works on all browsers; I don't think Safari and Firefox have the clip property that makes the mosaic work in the first place.

[motherfuckerburn]

I love this code SFM. Thank you!