Trekking Visualosities

[randomtology]

Hello all! Today we shall boldly go, and bring you a visualosities code based on the OG of fandoms! Star Trek!





LIVE PREVIEW

CODE:
<cut><raw-code> <div style="margin: auto; height: 500px; width: 900px; background: url(http://i.imgur.com/8uTeTk5.png);"> <!--START NAME--> <div style="display: inline-block; float: right; font-family: Impact, Charcoal, sans-serif; color: #f1ef84; width: 235px; height: 20px; margin-right: 45px; margin-top: 18px; font-size: 20px; line-height: 20px; text-transform: uppercase; text-align: center;">CHARACTER NAME</div> <!--END NAME--> <!--START SHIP STATUS--> <div style="display: inline-block; float: left; height: 165px; width: 180px; font-family: Impact, Charcoal, sans-serif; color: #f1ef84; text-transform: uppercase; margin-top: 28px; margin-left: 10px; font-size: 122%;"><div style="display: inline-block"> USS Enterprise NCC </div> <div style="float: right; display: inline-block; text-align: right;">1701 E</div> <img src="http://i.imgur.com/X9Lfkwn.png" alt="Enterprise" style="margin-top: 15px;"> <div style="font size: 115%; margin-top: 5px;"> Status: <span style="color: #1830a7;">Deployed</span></div></div> <!--END SHIP STATUS--> <!--START MENU--> <div style="display: inline-block; float: left; height: 165px; width: 180px; margin-top: 245px; margin-left: -180px; overflow: auto;"> <!--START IMAGE LINK--> <a href="#LINK-NAME"><img src="THUMBNAIL-URL" style="height: 45px; width: 45px; margin: 1px;" alt="IMAGE TITLE"></a> <!--END IMAGE LINK--> </div> <!--END MENU--> <!--START IMAGE AREA--> <div style="display: inline-block; float: right; height: 340px; width: 600px; margin-top: 15px; margin-right: 25px; overflow: hidden;"> <!--START IMAGE--> <div style="height: 340px; width: 600px; overflow: auto; margin: auto;"> <a name="LINK-NAME"></a> <div style="margin: auto;"> <img src="IMAGE-URL" alt="DESCRIPTION" style="display: block; margin-left: auto; margin-right: auto;"></div> <div style="color: #f1ef84; margin-top: 10px; font-family: 'courier new', courier, monospace;"> <p>Information goes here! If you have no text to add, just delete this line. Each new paragraph should be surrounded by "p" tag.</p> </div></div> <!--END IMAGE--> </div> <!--END IMAGE AREA--> <!--START BOTTOM--> <div style="block; clear: both; width: 900px; height: 88px;"><div style="font-family: Impact, Charcoal, sans-serif; display: inline-block; text-transform: uppercase; margin-top: 69px; margin-left: 160px; font-size: 105%;"> <a href="URL" style="color: #969cf1; text-decoration: none;">GAME</a></div> <div style="display: inline-block; font-family: Impact, Charcoal, sans-serif; text-transform: uppercase; width: 125px; height: 45px; margin-left: 198px; text-align: center; font-size: 445%; line-height: 75px;"> <a href="URL" style="color: #969cf1; text-decoration: none;">INFO</a> </div> <div style="display: inline-block; font-family: Impact, Charcoal, sans-serif; text-transform: uppercase; color: #969cf1; float: right; font-size: 105%; margin-top: 69px; margin-right: 155px;"> <a href="URL" style="color: #969cf1; text-decoration: none;">INBOX</a> </div></div> <!--END BOTTOM--> </div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div> </raw-code></cut>

NOTES:

Thanks to the makers of the Star Trek Padd app for the template! You want your iPad or iPhone to look like it came from Star Trek? Check them out!

For the full images, they don't need to be any specific dimensions, but for the sake of the code, don't make their width any bigger than 600px!

Thumbnail images (the ones on the right-hand side) will be resized automatically to 45x45px, but will need to be square shape to look/work properly.

In order to link an image section to a thumbnail, first you want to give a unique name in the a name="LINK-NAME" area of the image. Then in the corresponding image link, make sure to use that exact name in the a href="#LINK-NAME" spot. Don't use any spaces in the name, or it will not work properly!

The Ship section is editable! The default is the Enterprise E, but feel free to change it to another ship's info!

Modifications are totally fine. I'd love to see what you did with it though!

Comments are nice but not necessary. However, please leave the credit line on!

Comments

[nowhere]

i LOVE this! thank you so much for sharing it.

[randomtology]

Thank you!! I hope you enjoy it!

[mousewhisperer]

you have seriously made my day, you have no idea. thank you so much for sharing.

this is amazing and will probably actually motivate me to make visuals for my characters (especially the star trek characters)