sumo
The end is nigh.
- Jan 18, 2014
- 143
- 102
A couple weeks ago, I created a staff badge generator and intended to release it on a host, but there were complications. So, today I'm simply releasing the source code, and people like @wslgh and @Syntus have offered to host it. Here's your chance!
The source code can be found in the attached files.
This will force all text to become uppercase before the user hits preview, avoiding this issue.
(Note to any hosters: I just noticed that there's a typo on the generator. "usuable" should, of course, be "usable". I typed that up within 5 seconds and didn't check for speed errors.)
(Note to any hosters: you may want to periodically empty out the output folder or create a better system for how badges are generated)
Once again, feel free to edit and host this as you wish. There are many ways that this tool can be improved.
The source code can be found in the attached files.
You must be registered for see images attach
You must be registered for see images attach
You must be registered for see images attach
Step 1: You simply add an empty template to the
An empty template should look like this:
Step 2: Define the new template in the CSS folder, which is located at
The
Step 3: Making the new type selectable
You'd head on over to
If you are adding a new badge template, you must copy and paste one of those, then edit it to your new badge type name.
Step 4: Whilst still in
Here, you will simply add a new option for each new template.
bg_img folder
You must be registered for see images attach
An empty template should look like this:
You must be registered for see images attach
Step 2: Define the new template in the CSS folder, which is located at
public/css/app.css.
You must be registered for see images attach
The
.okay parent class is so that javaScript knows what to capture. Your new badge type must be a child of this class. The top and left attributes are simply the alignment of the custom text on the badge. If a badge is a different size, you will need to reconfigure this. It's only trial and error, nothing difficult.Step 3: Making the new type selectable
You'd head on over to
index.php and scroll down until you reach the canvas. You are looking for this piece of code:
You must be registered for see images attach
If you are adding a new badge template, you must copy and paste one of those, then edit it to your new badge type name.
Step 4: Whilst still in
index.php, you'll scroll down until you reach this section:
You must be registered for see images attach
Here, you will simply add a new option for each new template.
Go to the
And change it to
index.php source code, and find this line:
You must be registered for see images attach
And change it to
Code:
<input pattern="[A-Za-z]{5}" onkeyup="this.value = this.value.toUpperCase();" required title="Must be 5 letters." id="textbox" type="text" name="name" placeholder="Habbo"/>(Note to any hosters: I just noticed that there's a typo on the generator. "usuable" should, of course, be "usable". I typed that up within 5 seconds and didn't check for speed errors.)
(Note to any hosters: you may want to periodically empty out the output folder or create a better system for how badges are generated)
Once again, feel free to edit and host this as you wish. There are many ways that this tool can be improved.
Last edited:
