Welcome to Gaia! ::

Starshine's avatar

Star 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
User Image
I'll show you how to make your own card without photo editing programs.

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>


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.
Drake_XIV's avatar

Malevolent Duelist

5,850 Points
  • Guildmember 100
  • Alchemy Level 1 100
  • PvP 200
Huh, I was looking for something like this. Now I don't have to get all shoddy with Paint or something...
Erynne's avatar

Scurvy Wench

7,800 Points
  • Beta Gaian 0
  • Beta Citizen 0
  • Beta Forum Regular 0
emotion_yatta
Solomon Hellwing's avatar

Malevolent Warlord

10,400 Points
  • Invisibility 100
  • Ultimate Player 200
  • Olympian 200
thanks for this c: but i seem to be having a problem where the avatar headshot is placed outside the little box that's provided for it
EIf King
thanks for this c: but i seem to be having a problem where the avatar headshot is placed outside the little box that's provided for it

Post your code and I'll have a look at it 3nodding
Solomon Hellwing's avatar

Malevolent Warlord

10,400 Points
  • Invisibility 100
  • Ultimate Player 200
  • Olympian 200
ok, i did remove the "faction" section cause i wanted a non-faction unit that may be the problem though >.>

<link rel="stylesheet" type="text/css" href="common.css" media="screen">
<div id="card-contents-container"><div class="cardinfo">


<div class="rarity-rare"></div>
<span class="title">Elf King</span><br>
<span class="rarity">3<span class="star-on"></span><span class="star-on"></span><span class="star-on"></span><span class="star-off"></span><span class="star-off"></span>
<br><span class="type">Herald</span><br>


<span class="headshot-frame"></span>
<img class="headshot" src="http://a2.cdn.gaiaonline.com/gaia/members/ava/85/e8/7704ea1b55e885_48x48.gif" height="63px" width="63px">
<span class="mana">40</span>

<div class="offset-properties "><span class="prop-name">HP</span>
<span class="prop-value">280</span><br>
<span class="prop-name">Accuracy</span>
<span class="prop-value">90</span><br>
<span class="prop-name">Damage</span>
<span class="prop-value">55</span><br>
<span class="prop-name">Speed</span>
<span class="prop-value">352</span><br>
<span class="prop-name">Row</span>
<span class="prop-value">2</span><br>
</div><span class="property-name">Property</span>

<span class="property-value">Defender 10</span><br>
<hr clear="all"><div class="special"><div class="special-box">
<div class="special-cost">20</div>
<div class="special-cooldown">1</div>
<div class="cooldown-icon"></div></div>
<p>This Unit gets the following stat boosts depending on its allies Faction in the current battle until the end of this battle; Avalon: +5 to Accuracy, Hellspawn: + 10 to Damage, Flameborn: +10 to Speed.</p></div>
</div><br clear="all"></div>
EIf King

Try this, I missed a </span> in the original code, sorry >w<

<link rel="stylesheet" type="text/css" href="common.css" media="screen">
<div id="card-contents-container"><div class="cardinfo">


<div class="rarity-rare"></div>
<span class="title">Elf King</span><br>
<span class="rarity">3<span class="star-on"></span><span class="star-on"></span><span

class="star-on"></span><span class="star-off"></span><span class="star-

off"></span></span>
<br><span class="type">Herald</span><br>


<span class="headshot-frame"></span>
<img class="headshot"

src="http://a2.cdn.gaiaonline.com/gaia/members/ava/85/e8/7704ea1b55e885_48x48.gif"

height="63px" width="63px">
<span class="mana">40</span>

<div class="offset-properties "><span class="prop-name">HP</span>
<span class="prop-value">280</span><br>
<span class="prop-name">Accuracy</span>
<span class="prop-value">90</span><br>
<span class="prop-name">Damage</span>
<span class="prop-value">55</span><br>
<span class="prop-name">Speed</span>
<span class="prop-value">352</span><br>
<span class="prop-name">Row</span>
<span class="prop-value">2</span><br>
</div><span class="property-name">Property</span>

<span class="property-value">Defender 10</span><br>
<hr clear="all"><div class="special"><div class="special-box">
<div class="special-cost">20</div>
<div class="special-cooldown">1</div>
<div class="cooldown-icon"></div></div>
<p>This Unit gets the following stat boosts depending on its allies Faction in the

current battle until the end of this battle; Avalon: +5 to Accuracy, Hellspawn: + 10

to Damage, Flameborn: +10 to Speed.</p></div>
</div><br clear="all"></div>
Solomon Hellwing's avatar

Malevolent Warlord

10,400 Points
  • Invisibility 100
  • Ultimate Player 200
  • Olympian 200
Baby Starshine
EIf King

Try this, I missed a </span> in the original code, sorry >w<

&link rel="stylesheet" type="text/css" href="common.css" media="screen"&
<div id="card-contents-container"><div class="cardinfo">


<div class="rarity-rare"></div>
<span class="title">Elf King</span><br>
<span class="rarity">3<span class="star-on"></span><span class="star-on"></span><span

class="star-on"></span><span class="star-off"></span><span class="star-

off"></span></span>
<br><span class="type">Herald</span><br>


<span class="headshot-frame"></span>
<img class="headshot"

src="http://a2.cdn.gaiaonline.com/gaia/members/ava/85/e8/7704ea1b55e885_48x48.gif"

height="63px" width="63px">
<span class="mana">40</span>

<div class="offset-properties "><span class="prop-name">HP</span>
<span class="prop-value">280</span><br>
<span class="prop-name">Accuracy</span>
<span class="prop-value">90</span><br>
<span class="prop-name">Damage</span>
<span class="prop-value">55</span><br>
<span class="prop-name">Speed</span>
<span class="prop-value">352</span><br>
<span class="prop-name">Row</span>
<span class="prop-value">2</span><br>
</div><span class="property-name">Property</span>

<span class="property-value">Defender 10</span><br>
<hr clear="all"><div class="special"><div class="special-box">
<div class="special-cost">20</div>
<div class="special-cooldown">1</div>
<div class="cooldown-icon"></div></div>
<p>This Unit gets the following stat boosts depending on its allies Faction in the

current battle until the end of this battle; Avalon: +5 to Accuracy, Hellspawn: + 10

to Damage, Flameborn: +10 to Speed.</p></div>
</div><br clear="all"></div>


yes c: thank you very much the card is working well now ^^

also, not sure if its everyones case when i clicked the css link it didnt automatically start a download

i had to save is as common.css by copying the code in the url it sent me to in notepad.
i assumed the file name was common.css since that's in the other codes href
EIf King

yes c: thank you very much the card is working well now ^^

also, not sure if its everyones case when i clicked the css link it didnt automatically start a download

i had to save is as common.css by copying the code in the url it sent me to in notepad.
i assumed the file name was common.css since that's in the other codes href

Using firfox, right click save link as works 3nodding If I just click on it I get a pageful of CCS codes, which I can then use the browser to save page as a style sheet.
Solomon Hellwing's avatar

Malevolent Warlord

10,400 Points
  • Invisibility 100
  • Ultimate Player 200
  • Olympian 200
Baby Starshine
EIf King

yes c: thank you very much the card is working well now ^^

also, not sure if its everyones case when i clicked the css link it didnt automatically start a download

i had to save is as common.css by copying the code in the url it sent me to in notepad.
i assumed the file name was common.css since that's in the other codes href

Using firfox, right click save link as works 3nodding If I just click on it I get a pageful of CCS codes, which I can then use the browser to save page as a style sheet.


oh i see xP
RoseRoyal's avatar

Benevolent Hunter

Starshine

HAHAHAHA, I love your 'Nerfed Succubus' card! rofl xd

I guess in her case, her nerf is she had to get a breast reduction... down to size B's eek
Victoria Secrets here she comes! lol
I appreciate your efforts even though I've always had my own card.
Joelthief's avatar

Invisible Player

14,850 Points
  • 50 Wins 150
  • Invisibility 100
  • Elocutionist 200
This is awesome biggrin
Thanks!!
This is cool! Thank you for sharing it. I have a question, though - how did you get the caps font for the HP through property titles? I also can't get my picture in the box, but I think it's a browser error since this happens looking at actual HoC cards too.

User Image - Blocked by "Display Image" Settings. Click to show.

&link rel="stylesheet"

type="text/css" href="common.css"

media="screen"&
<div id="card-contents-

container"><div class="cardinfo">


<div class="faction Dragons"></div>
<div class="rarity-epic"></div>
<span class="title">luhft</span><br>
<span class="rarity">Lv. 4<span

class="star-on"></span><span

class="star-on"></span><span

class="star-on"></span><span

class="star-on"></span><span

class="star-off"></span></span>
<br><span class="type">Dragons,

Unit</span><br>


<span class="headshot-frame"></span>
<img class="headshot"

src="http://a2.cdn.gaiaonline.com/gai

a/members/ava/51/81/38e7c2c5578151_48

x48.gif" height="63px" width="63px">
<span class="mana">69</span>
<div class="offset-properties "><span

class="prop-name">HP</span>
<span class="prop-

value">280</span><br>
<span class="prop-

name">Accuracy</span>
<span class="prop-

value">75</span><br>
<span class="prop-name">Damage</span>
<span class="prop-

value">65</span><br>
<span class="prop-name">Speed</span>
<span class="prop-

value">199</span><br>
<span class="prop-name">Row</span>
<span class="prop-

value">1</span><br></div>
<clear="all">
<span class="property-

name">Property</span>
<span class="property-

value">Forgetfulness. This unit has

a 10% chance to remove scout from

surrounding territories.</span><br>

<hr clear="all">
<div class="special"><div

class="special-box">
<div class="special-cost">40</div>
<div class="special-cooldown">2</div>
<div class="cooldown-

icon"></div></div>
<p>This unit takes her top off. Stuns

all enemies, but only upon first

use.</p></div>
</div><br clear="all"></div>
2_twins in a ball's avatar

Distinct Shapeshifter

Quick Reply

Submit
Manage Your Items
Other Stuff
Get Items
Get Gaia Cash
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games