Cast Your Wizard Spellz:
How to view and use Wizard Spellz NFTs
Learn to use your Spellz!
Part of the value proposition of owning a Wizard Spell NFT is that you can modify your animation and do whatever you want with it.
In order to help people accomplish this, we have created some guides with pictures and videos.
How to view your Wizard Spellz and other CNFTs
To view all your CNFTs, you need your Cardano receiving address.
Don’t worry, the address is not private information and no one can use it to steal from you.
Simply visit https://pool.pm/your-cardano-address
You will see all of the NFT Collections in your wallet. Watch this video to view the process!
Basics of modifying your Spellz
To get your feet wet, try right clicking the Spell example to the right and choosing “Inspect” from the context menu. If you don’t see it, you may need to enable developer mode in your browser.
From here, you can see the code that comprises the Spell and begin to play around with changing colors and more.
On the left you see the HTML code, and on the right you will see the CSS. The main HTML we care about is the <div class="a"> tag and everything inside of it. Try clicking the divs inside and adjusting some of the properties on the right to see what happens.
Remember this is all temporary. If you refresh your page, the changes will return to normal.
How to save your Wizard Spellz as .html files to your hard drive
If you want to view your Spell offline or make permanent changes, you’ll need to save it to your hard drive.
Don’t be scared by all the text, we’re just trying to be detailed… the pictures on the right are basically the whole process.
- Visit your wallet on Pool.pm as described above.
- On the Spell, right click the spell and select “View frame source”
- Depending on your browser, the text may vary.
- Select all of the code (ctrl+A). Copy it to your clipboard (ctrl+C).
- For Mac users, ctrl will be replaced with cmd.
- Visit CodeBeautify and paste (ctrl+V) the Spellz code into the left input. Click “Beautify HTML”.
- DirtyMarkup.com was used in the video. It handles CSS & HTML separately, so you must start with the CSS tab and then paste to the HTML tab as shown in the video.
- If you are inclined, you can also use the Beautify extension for VS Code. That’s what I tend to do.
- Copy the Output on the right (ctrl+A, ctrl+C)
- Paste it into a text editor. You can use the raw text editor that comes with your operating system (Notepad for Windows, TextEdit for Mac). If you’ll do this a lot, consider using Microsoft Visual Studio Code, an excellent code editor available on all platforms (or any other text editor built for code).
- Save the file, making note to save with a .html file extension. You must to select “All Files” from the Save as Type dropdown on Windows.
- You may now open your Spell in any browser to view offline, and open the file in a text/code editor to make changes.
Record your Wizard Spellz NFTs as a Video File
The best way to show off your Spell is usually with a Video, or with a GIF (make gif from a video).
A full text & screenshots walkthrough is coming soon, for now please reference this video.
How to turn a video file into a GIF
Sometimes platforms won’t let you upload a video file, and this is often the case for user avatars. Here is how you can turn a Spellz video you recorded into a GIF.
A full text & screenshots walkthrough is coming soon, for now please reference this video.
Turn your Wizard Spellz into a PFP (Avatar)
This video puts together all the basics we’ve covered so far to create an animated user profile picture (PFP) or avatar.
A full text & screenshots walkthrough is coming soon, for now please reference this video.
Combine Spellz with image based NFTs
(or any other images)
Thinking of casting a Spell on your sweet new MOB? Here’s what you would do.
- Visit your wallet on Pool.pm.
- Open the NFT you want to cast a Spell on within Pool.pm. Right click the image, and select “Save image as” to save the image to your hard drive.
- Keep track of the filename and where you save it. We’ll assume it’s called
mob.png
- Keep track of the filename and where you save it. We’ll assume it’s called
- Save the Wizard Spell you want to cast to your hard drive in the same location you saved the NFT you want to cast it on.
- Open the Wizard Spell in a text editor such as Notepad or VS Code.
- Change the background color: You’ll probably want a background color other than white. You can use a color picker or gradient generator to pick a background you like. We’ll just use
#36393Fas it matches the background color of Discord in Dark mode.- Add to the
body { }selector:background: #36393F;
- Add to the
Now that you’ve got the basics set up, there are a few different routes you can take.
Simple: Replace Spell Core with your NFT
This will remove your Spell Core’s existing background colors and animation, replacing them with the image of your NFT of choice.
- Inside of the
.c { }selector, the Spell will already have a background set. We can replace everything in betweenbackground:and;with our image, or just override it by writing a new rule underneath the old one. In this example we’ll override it. - Inside of the .c { } selector, we will add two new style rules. We’re assuming you saved your NFT as “mob.png” in the same folder as your Spell’s .html file.
background: url(mob.png) no-repeat;background-size: cover;
Intermediate: Add Your NFT as a New Layer In Between Spell Core And Rings
In this way you can preserve your Spell Core’s colors and animation while still displaying your NFT over the area.
A full description & video is coming soon!