Sig Maker

**aquascaper** · 02-21-2015, 12:23 PM

Ever wanted to make your very own signature? This tool will help you place all of those images together into one aesthetically-pleasing product.

Here's an example of a sig created using the maker:
Name: sig.jpg
Views: 488
Size: 89.1 KB

To use, simply paste the following code into a document with a .html extension and open it in any browser or html viewer!

Code:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Arcane Legends Forum Signature Maker</title>
		<meta charset="utf-8">
	</head>
	<style>
		#spacing:after {
  			content: " ";
  			position: absolute;
  			z-index: -1;
  			top: 0px;
  			left: 0px;
  			right: 0px;
  			bottom: 0px;
 			border: 1px solid white;
		}
	</style>
	<body style="background-color:lightgrey;">
		<br/>
		<div id="title" style="text-align:center; font-size:25px;">Aquascaper's Arcane Legends Forum Signature Maker</div>
		<div id="javascriptalert" style="text-align:center; font-size:20px; display:block;">(please enable Javascript to start)</div>
		<br/>
		<div id="sig" style="display:none;">
			<img src="." alt="background image" style="display:none; width:500px; height:100px; position:fixed; left:100px; top:100px;" id="background">
			<img src="." alt="opaque background image" style="display:none; width:500px; height:100px; position:fixed; left:100px; top:100px; opacity:0.2;" id="opaque">
			<img src="." alt="border image" style="display:none; width:500px; height:100px; position:fixed; left:100px; top:100px;" id="border">
			<img src="." alt="name image" style="display:none; width:300px; position:fixed; left:200px; top:100px;" id="name">
			<img src="." alt="character image" id="character" style="display:none; width:100px; position:fixed; left:80px; top:100px; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg);">
			<img src="." alt="logo image" id="logo" style="display:none; height:75px; position:fixed; left:500px; top:113px;">
			<div id="spacing" style="width:500px; height:100px; position:fixed; left:70px; top:70px; border-style:solid; border-color:lightgrey; border-width:30px;"></div>
		</div>
		<div id="options" style="position:fixed; top:250px; left:100px; display:none;">
			<div id="background-options">
				Background (500x100 px): 
				<input type="file" id="background-file"/>
			</div>
			<br/>
			<div id="opaque-background-options">
				Opaque background (500x100 px): 
				<input type="file" id="opaque-background-file"/>
			</div>
			<br/>
			<div id="border-options">
				Border (500x100 px - image with opacity): 
				<input type="file" id="border-file"/>
			</div>
			<br/>
			<div id="name-options">
				Name: 
				<input type="file" id="name-file"/>
			</div>
			<br/>
			<div id="character-options">
				Character: 
				<input type="file" id="character-file"/>
			</div>
			<br/>
			<div id="logo-options">
				Logo: 
				<input type="file" id="logo-file"/>
			</div>
		</div>
		<script>
			document.getElementById("javascriptalert").style.display = "none";
			document.getElementById("sig").style.display = "block";
			document.getElementById("options").style.display = "block";
			
			document.getElementById('background-file').onchange = function (evt) {
    			var tgt = evt.target || window.event.srcElement,
        		files = tgt.files;
    			if (FileReader && files && files.length) {
       				var fr = new FileReader();
        			fr.onload = function () {
            			document.getElementById("background").src = fr.result;
            			document.getElementById("background").style.display = "block";
       				}
        			fr.readAsDataURL(files[0]);
    			} else {
        			alert("Upload failed.");
   				}
   			}
			document.getElementById('opaque-background-file').onchange = function (evt) {
    			var tgt = evt.target || window.event.srcElement,
        		files = tgt.files;
    			if (FileReader && files && files.length) {
       				var fr = new FileReader();
        			fr.onload = function () {
            			document.getElementById("opaque").src = fr.result;
            			document.getElementById("opaque").style.display = "block";
       				}
        			fr.readAsDataURL(files[0]);
    			} else {
        			alert("Upload failed.");
   				}
   			}	
   			document.getElementById('border-file').onchange = function (evt) {
    			var tgt = evt.target || window.event.srcElement,
        		files = tgt.files;
    			if (FileReader && files && files.length) {
       				var fr = new FileReader();
        			fr.onload = function () {
            			document.getElementById("border").src = fr.result;
            			document.getElementById("border").style.display = "block";
       				}
        			fr.readAsDataURL(files[0]);
    			} else {
        			alert("Upload failed.");
   				}
   			}		
			document.getElementById('name-file').onchange = function (evt) {
    			var tgt = evt.target || window.event.srcElement,
        		files = tgt.files;
    			if (FileReader && files && files.length) {
       				var fr = new FileReader();
        			fr.onload = function () {
            			document.getElementById("name").src = fr.result;
            			document.getElementById("name").style.display = "block";
       				}
        			fr.readAsDataURL(files[0]);
    			} else {
        			alert("Upload failed.");
   				}
   			}
   			document.getElementById('character-file').onchange = function (evt) {
    			var tgt = evt.target || window.event.srcElement,
        		files = tgt.files;
    			if (FileReader && files && files.length) {
       				var fr = new FileReader();
        			fr.onload = function () {
            			document.getElementById("character").src = fr.result;
            			document.getElementById("character").style.display = "block";
       				}
        			fr.readAsDataURL(files[0]);
    			} else {
        			alert("Upload failed.");
   				}
   			}
			document.getElementById('logo-file').onchange = function (evt) {
    			var tgt = evt.target || window.event.srcElement,
        		files = tgt.files;
    			if (FileReader && files && files.length) {
       				var fr = new FileReader();
        			fr.onload = function () {
            			document.getElementById("logo").src = fr.result;
            			document.getElementById("logo").style.display = "block";
       				}
        			fr.readAsDataURL(files[0]);
    			} else {
        			alert("Upload failed.");
   				}
   			}
		</script> 
	</body>
</html>

Have fun! - aquascaper

coming soon: more customizations

**nevercan** · 02-21-2015, 02:06 PM

Wel your example sig looks kinda good but i dont understand anything what you have posted underneath it

**Astrea** · 02-21-2015, 06:30 PM

Hi, aqua

I cant use a border when i upload it it shows whole picture with white blank on bottom so my background is being covered. Can you tell me how to make borders? Also about opaque background kinda confuse of it.

**aquascaper** · 02-22-2015, 12:09 PM

Originally Posted by Astrea

Hi, aqua

I cant use a border when i upload it it shows whole picture with white blank on bottom so my background is being covered. Can you tell me how to make borders? Also about opaque background kinda confuse of it.

Try uploading a png with transparency.

If you are hoping for a non-rectangular background, your best bet is to keep the outer area one color and crop after screenshotting.