yuff | Zesty Inventory Code

Skip to Main Content

Entry tags:

Zesty Inventory Code

Hi Everyone! Today I'm bringing you a nifty character sheet and inventory code, based on the menu interface of Tales of Zestiria!

Name

weapons

armor

accessories

items

food

BASICS.

NAME.	Name
NICKNAME.	Nickname
AGE.	XX
OCCUPATION.	Job
ORIENTATION.	Whatever
DATING STATUS.	Status
HEIGHT.	5'9"
BUILD.	Build
HAIR.	Brown and spiked
EYES.	Bright green
PLAYER.	Name
JOURNAL.	Journal
TIME ZONE.	Time Zone

PERSONALITY.
Enter Personality here!

sorey

weapons

WEAPONS.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

armor

ARMOR.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

accessory

ACCESSORIES.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

misc

MISCELLANEOUS ITEMS.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

food

FOOD.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

Code by Yuff

CODE:

<cut><raw-code>
<div style="display: block; margin: auto; width: 650px; height: 465px;">
  

<div style="height: 75px; display: block; width: 650px;">
<div style="width: 350px; height: 70px; display: inline-block; background: url(http://i.imgur.com/LH5iMpz.png) no-repeat; color: #fffaeb; font-size: 300%; text-align: center; font-weight: bold; font-family: 'Book Antiqua', Palatino, serif; padding-top: 7px;"><a href="#main" style="color: #fffaeb; text-decoration: none;">Name</a></div>
    
<div style="display: inline-block; float: right; padding-top: 20px;">
<a href="#weapons"><img src="http://i.imgur.com/60s7msy.png" alt="weapons" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#armor"><img src="http://i.imgur.com/iv639zG.png" alt="armor" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#accessories"><img src="http://i.imgur.com/Nakfyt1.png" alt="accessories" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#misc"><img src="http://i.imgur.com/xzc6hkc.png" alt="items" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#food"><img src="http://i.imgur.com/3rKRbur.png" alt="food" style="margin-right: 10px; border: 1px solid #201302; border-radius: 50px;"></a></div></div>

<div style="display: flex; width: 640px; height: 390px; margin: auto; background: url(http://i.imgur.com/UnqGODx.png); justify-content: center; align-items: center; overflow: hidden;"><div style=" margin: auto; width: 560px; height: 320px; overflow: hidden;">
      

<div style="width: 560px; height: 320px; overflow: hidden;">
<a name="main"></a>

<div style="display: inline-block; width: 330px; height: 320px; overflow: auto; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%; padding-right: 5px;"><span style="border-bottom: 1px solid #ddd8c5; font-size: 130%; font-weight: bold;">BASICS.</span>

<table style="margin: auto; text-align: left;">
<tr><td>NAME.</td><td>Name</td></tr>
<tr><td>NICKNAME.</td><td>Nickname</td></tr>
<tr><td>AGE.</td><td>XX</td></tr>
<tr><td>OCCUPATION.</td><td>Job</td></tr>
<tr><td>ORIENTATION.</td><td>Whatever</td></tr>
<tr><td>DATING STATUS.</td><td>Status</td></tr>
<tr><td>HEIGHT.</td><td>X'X"</td></tr>
<tr><td>BUILD.</td><td>Build</td></tr>
<tr><td>HAIR.</td><td>Hair</td></tr>
<tr><td>EYES.</td><td>Eyes</td></tr>
<tr><td>PLAYER.</td><td>Name</td></tr>
<tr><td>JOURNAL.</td><td>Journal</td></tr>
<tr><td>TIME ZONE.</td><td>Time Zone</td></tr>
</table>
<br/>

<span style="border-bottom: 1px solid #ddd8c5; font-size: 130%; font-weight: bold;">PERSONALITY.</span><br/>
Enter Personality here!
</div>

<div style="width: 225px; height: 320px; float: right; display: inline-block; overflow: hidden;"><img src="IMAGEURL" alt="name"></div>

</div>

      

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="weapons"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/FDJySYQ.png" alt="weapons"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">WEAPONS.</span></div>

<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="armor"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/yx8sKpA.png" alt="armor"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">ARMOR.</span></div>

<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="accessories"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/UCZkABS.png" alt="accessory"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">ACCESSORIES.</span></div>
        
<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="misc"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/gKRDY0f.png" alt="misc"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">MISCELLANEOUS ITEMS.</span></div>
        
<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="food"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/HFumRQh.png" alt="food"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">FOOD.</span></div>
        
<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

</div></div>

</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

This is based roughly off the menu interface of Tales of Zestiria. All artwork was made by Namco Bandai.

Clicking the icon buttons will get you to different inventory pages. If you want to get back to the main bio page, click on the character's name at the top.

For the bio image, dimensions are ideally a width of 225px and height of 320px, it can be rather finnicky about this as well, so be careful!

To add more items to your inventory, just C&P the "Time" code from START ITEM to END ITEM.

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!

Threaded | Top-Level Comments Only

sTEALING THIS SO HARD, THANK YOU SO MUCH!!!!!

i don't know what i am doing wrong but my image doesn't show up.
Do you at the link from for example imgr in the IMAGURL place or is it somewhere else ??

Edited 2016-11-04 12:16 (UTC)

I'm sorry, but could you clarify that last sentence?

And if possible, could I see your code so I can see what may be going wrong? You can use pastebin for pasting the code!

Hi ,
sorry to bother you, i forgot to delete one letter in the code and the whole thing didn't work anymore.
it was at this line : http://pastebin.com/vJBuptUM
Forgot to delete the last leter of IMAGURL

Thx for responding so fast and again sorry to bother ( should have looked better before i sended you something XD)

Oh okay! I'm glad to hear that you got it figured out! Don't worry about bothering me, I've totally forgotten to delete something before and took forever to noticed. But I checked it myself and it looks great! I hope you enjoy the code!

YOU'RE WELCOME!! I hope you enjoy it Saffy!!

Yo! You have a code error in -START IMAGE-, a colon after the width instead of a semi-colon, which shoves the box underneath the whole code where it's invisible.

Corrected:

Since I'm here anyway I may as way share, I tweaked the code and used it here!

Edited 2018-07-16 06:38 (UTC)

Oh wow, thank you so much! I fixed it up, so hopefully that won't be a problem!

Also I love the tweak! Nicely done and super fitting for Stephanie :>

No problem! I'm glad you approve 8]

I love this code so much and wanted to thank you for making it. I had a fun nightmare re-arranging and re-tooling bits of it but I am happy with how it turned out and wanted to share.

Oh wow, that looks absolutely fantastic!! I love it! I'm so glad you enjoyed the code, this made my day.

Threaded | Top-Level Comments Only