Starshine
Destructive Bunny
gaia_nitemareleft HoC Card Creator gaia_nitemareright
Update! A new version of the Card Generator is up for Google Chrome browsers. This version has auto save, so no more screenshot + cropping in paint! Thank Shadow the Kitty for working on this if you run into him 4laugh
Thanks to Shadow the Kitty and his awesome coding skills emotion_kirakira Now all you have to do is go to the HoC Card Generator Card Generator page, type in all your info, print screen, crop and upload for everyone to share.
How much easier is that! 4laugh
Select Card Generator for:
Firefox / Chrome
When it comes to the URL needed for the card's image, if you are wanting to use your current avatar go to the Avatar Export page and copy the headshot URL.
If you want to use an existing HoC unit go to Shintouyu's icon thread, right click on the image your want and copy the image URL.
The headshot avatar image is sized 48 x 48 pixels, the unit images are 70 x 70 pixels, and the HoC card stretches/shrinks them to 63 x 63 pixels. If that bothers you just make your own 63 x 63 pixel images xp
A tip for the cooldown, if you don't want your special to have any cooldowns don't put 0 into the field! This way the clock icon and the 0 number won't show up at all ;D
If you do accidentally hit something, delete it, hit the space bar once, then delete the space, and everything will be cleared again 3nodding
If you do make some cards I'd love to see it! mrgreen
The old guide where there is a lot of codes.
I've had people ask me how I made the card in my sig, which was done in photoshop. Not everyone has photoshop however, and you don't even need it to make a card!
My card :3
Requirements:
A computer
Notepad or similar programs
Internet connection
First open the notepad program, and copy and paste the following block of code into it. Save the file as card.htm and make sure you select all files for file type so that it saves as a webpage and not a text file.)
HoC Card Creator!
<link rel="stylesheet" type="text/css" href="http://w.cdn.gaiaonline.com/src/_/e143bb5df5304ae98988a03a4dabca2e-1341-57/src/css/nimbus/common.css" media="screen">
<div id="card-contents-container"><div class="cardinfo">
</---Emblem, card border, card name, Lv. #--->
<div class="CODE for emblem, eg. faction Kingdom"></div>
<div class="CODE for card border, eg. rarity-legen-wait-for-it-dary"></div>
<span class="title">ENTER card name, eg. Starshine</span><br>
<span class="rarity">ENTER level, eg. Lv. 5
</---Here are the 5 stars, replace "star-on" with "star-off" to reduce card level--->
<span class="star-on"></span><span class="star-on"></span><span class="star-on"></span><span class="star-on"></span><span class="star-on"></span></span><br>
</---Faction and unit type, image URL, mana cost, HP, accuracy, damage, speed, row--->
<span class="type">ENTER faction, eg. Kingdom, ENTER unit type, eg. Attuner scout unit</span><br><span class="headshot-frame"></span>
<img class="headshot" src="ENTER your URL for the image of this card" height="63px" width="63px">
<span class="mana">ENTER mana cost, eg. 52</span><div class="offset-properties ">
<span class="prop-name">HP</span> <span class="prop-value">ENTER numercial HP value</span><br>
<span class="prop-name">Accuracy</span> <span class="prop-value">ENTER accuracy value</span><br>
<span class="prop-name">Damage</span> <span class="prop-value">ENTER numercial damage value</span><br>
<span class="prop-name">Speed</span> <span class="prop-value">ENTER numercial speed value</span><br>
<span class="prop-name">Row</span> <span class="prop-value">ENTER numercial row value</span><br></div>
</---Start property info--->
<span class="property-name">Property</span>
<span class="property-value">ENTER property, eg. Ranged</span><br>
</---End property info, delete this block if you don't want a property!--->
</---Section divider--->
<hr clear="all">
</---Start of special 1 block, copy block and duplicate to add more specials, don't forget to use the divider inbetween!--->
<div class="special"><div class="special-box">
<div class="special-cost">ENTER AP cost, eg. 20</div>
</---Cooldown info, delete if not needed--->
<div class="special-cooldown">ENTER cooldown, eg. 2</div><div class="cooldown-icon"></div>
</div>
</---Special's description--->
<p>ENTER special decription, eg. This unit sings karaoke in a terrible voice causing a random opposing unit to flee from battle.</p></div>
</---End of special 1 block--->
</---The end of the card! Don't delete the last div ;D --->
</div>
<link rel="stylesheet" type="text/css" href="http://w.cdn.gaiaonline.com/src/_/e143bb5df5304ae98988a03a4dabca2e-1341-57/src/css/nimbus/common.css" media="screen">
<div id="card-contents-container"><div class="cardinfo">
</---Emblem, card border, card name, Lv. #--->
<div class="CODE for emblem, eg. faction Kingdom"></div>
<div class="CODE for card border, eg. rarity-legen-wait-for-it-dary"></div>
<span class="title">ENTER card name, eg. Starshine</span><br>
<span class="rarity">ENTER level, eg. Lv. 5
</---Here are the 5 stars, replace "star-on" with "star-off" to reduce card level--->
<span class="star-on"></span><span class="star-on"></span><span class="star-on"></span><span class="star-on"></span><span class="star-on"></span></span><br>
</---Faction and unit type, image URL, mana cost, HP, accuracy, damage, speed, row--->
<span class="type">ENTER faction, eg. Kingdom, ENTER unit type, eg. Attuner scout unit</span><br><span class="headshot-frame"></span>
<img class="headshot" src="ENTER your URL for the image of this card" height="63px" width="63px">
<span class="mana">ENTER mana cost, eg. 52</span><div class="offset-properties ">
<span class="prop-name">HP</span> <span class="prop-value">ENTER numercial HP value</span><br>
<span class="prop-name">Accuracy</span> <span class="prop-value">ENTER accuracy value</span><br>
<span class="prop-name">Damage</span> <span class="prop-value">ENTER numercial damage value</span><br>
<span class="prop-name">Speed</span> <span class="prop-value">ENTER numercial speed value</span><br>
<span class="prop-name">Row</span> <span class="prop-value">ENTER numercial row value</span><br></div>
</---Start property info--->
<span class="property-name">Property</span>
<span class="property-value">ENTER property, eg. Ranged</span><br>
</---End property info, delete this block if you don't want a property!--->
</---Section divider--->
<hr clear="all">
</---Start of special 1 block, copy block and duplicate to add more specials, don't forget to use the divider inbetween!--->
<div class="special"><div class="special-box">
<div class="special-cost">ENTER AP cost, eg. 20</div>
</---Cooldown info, delete if not needed--->
<div class="special-cooldown">ENTER cooldown, eg. 2</div><div class="cooldown-icon"></div>
</div>
</---Special's description--->
<p>ENTER special decription, eg. This unit sings karaoke in a terrible voice causing a random opposing unit to flee from battle.</p></div>
</---End of special 1 block--->
</---The end of the card! Don't delete the last div ;D --->
</div>
To those not used to it, it might look confusing, but it's really very simple. Where the text says CODE, refer to the code list below and select the one you want. For example, if I wanted a blue border for a rare card, I'd replace CODE for card border, eg. rarity-legen-wait-for-it-dary with rarity-rare
Where it says ENTER, replace the text with whatever you want. For example, if I wanted to make a Succubus card I'd replace ENTER card name, eg. Starshine with Succubus.
You'll notice that after where I say ENTER level, eg. Lv. 5, there's this bit of code repeated 5 times.
<span class="star-on"></span>
This displays the little stars on the card. Right now there are 5 blue stars meaning the card is Lv. 5. If you want to change the card to Lv. 3 just replace the last two star-on with star-off.
CODE for emblem: (This changes the sigil at the bottom of the card)
Kingdom: faction Kingdom
Dragons: faction Dragons
Demons: faction Demons
CODE for card border:
Lv. 1 cards have no borders, just deleted the text in the field and leave it blank.
Lv. 2 Green: rarity-uncommon
Lv. 3 Blue: rarity-rare
Lv. 4 Purple: rarity-epic
Lv. 5 Gold: rarity-legen-wait-for-it-dary
When it comes to the URL needed for the card's image, if you are wanting to use your current avatar go to the Avatar Export page and copy the headshot URL.
If you want to use an existing HoC unit go to Shintouyu's icon thread, right click on the image your want and copy the image URL.
The headshot avatar image is sized 48 x 48 pixels, the unit images are 70 x 70 pixels, and the HoC card stretches/shrinks them to 63 x 63 pixels. If that bothers you just make your own 63 x 63 pixel images xp
The next code is the horizontal divider bar, use as needed to separate the properties from the specials, and the specials from each other.
<hr clear="all">
Okay and now you are done. Save your notepad webpage, go to the folder it's saved in and open the card.htm file with your internet browser. (Note, the card borders don't show up in some versions of internet explorer.)
Ta-dah! Print screen, crop and upload for everyone to share.
If you do make some cards I'd love to see it! mrgreen
This is the end of the guide! If you are having trouble post your code and I'll try and see what's broken.
Liked this guide? Want more guides? Here's all the guides you could ever ask for, and more.
