• This part of the module is automatically enabled, but it can be disabled if you so desire, by adding the following inside the <script> tags above.
  

  var addFacebox = false;

• Facebox Content (required) - Input text or any HTML into this area.
• Link Text (required) - This is the text (or image HTML) the reader must click on to get the facebox window to open.

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addGrowl = false;

• Growl Title (optional) - Add text here if you want to add a title to the Growl window.
• Growl Content (required) - Input text or any HTML into this area.
• Link Text (required) - This is the text (or image HTML) the reader must click on to get the Growl window to open.
• If you've modified the Growl window, this part of the module will add two additional input areas:
  
  • Note: You will only see this if your new Growl window definitions are ABOVE the forum content box.
  • Growl Icon URL (optional) - Enter the URL to an icon you want to display.
  • Growl Window Width (required) - Input the desired width of the Growl Window. The value must be between 10 and 800.

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addTooltip = false;

• Tooltip Link HREF (optional) - This is the URL you want to send the reader when they click on "Text or Image to Hover". If left blank, it will add a "void" script to prevent the link from sending the reader away from your page.
• Tooltip Link Content (required) - This is the text (or image HTML) the reader must hover over to get the Tooltip to open.
• Tooltip Width (required) - Input the desired width of the tooltip. The value must be between 10 and 800.
• Tooltip Background Color (optional) - Added in v1.2 of this script. You can choose the background color of the tooltip, this is a new option added with the New and Improved tooltips and v1.2 of the tooltip script. The default color is set by the script to the current color.
• Tooltip Text Color (optional) - Added in v1.2 of this script. Choose the tooltip text color here.
• Tooltip Content (required)
  • Input text or any HTML into this area.
  • Note the (###) after the Tooltip Content title. It is part of the advanced tooltips. To use it, add this "external tooltip flag" followed by the div ID contents you want to display in the tooltip - read more about how to use this feature in this thread.

Example:

Click this bar This is the content inside the Hide-Show Box that can be hidden. The icons used can also be changed.

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addHideShow = false;

• Box Icons (required) - Pick the icon set you want displayed showing that the info in the box is either shown (left icon) or hidden (right icon). You can add your own icons by following the instructions below.
• Icon Align (required) - Lets you decide where the icon indicator is show in the box title bar.
• Box Title (optional) - Enter a hide-show box title. You can use HTML here as well - e.g. '<img src="...">'
• Box Content (required) - Input text or any HTML into this area.
• Box Content is initially - Setting this to "Shown" will have the box open when you first get to the post, "Hidden" will hide the contents initially.
• Add Custom Icons - You can add your own custom icons by adding the following script inside the area above
  

  var customHideShowIcons = new Array();
  customHideShowIcons.push (["Hearts","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/smiley_heart.gif","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/smiley_heart_broken.gif"]);
  var selectedHideShowIcon = "Hearts";

  • Don't change the first line, as it sets up a new array
  • You can use this template to add as many icon sets as you want:
    
    customHideShowIcons.push (["Icon Set Name","Open box icon URL","Closed Box icon URL"]);
    
    
    • Replace the text in blue with the icon set name, in the example above it was "Hearts"
    • Replace the text in red with the URL to the icon that is shown when the box is open
    • Replace the text in green with the URL to the icon that is shown when the box is closed.
  
  
  • To make the selection box automatically have this new custom icon set selected, replace the text in blue with the exact name of the icon set. Only one icon set can be selected at a time.
    
    var selectedHideShowIcon = "Icon Set Name";
  
  
• Hide-Show Box CSS - Add this CSS to your site to change the style of the box. Adjust the colors and sizes as you see fit.
  

  <style type="text/css">
  /* Add any custom CSS here */
  .hsBox { background:#555555; width:600px; }
  .hsTitle { color:#ffcc00; font-size:120%; font-weight:bold; padding-left:5px; }
  .hsIcon { padding-left: 5px; }
  .hsBody { background:#333333; color:#dddddd; padding:5px 10px; }
  </style>

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addSpoiler = false;

• Spoiler Title (optional) - Type in the Title of the Spoiler box, if you enter nothing, it defaults to "Spoiler".
• Spoiler Content (required) - Input text or any HTML into this area.
• Choose Click to Show or Hover to Show which is what the user has to do on the spoiler box to view the contents
• If you'd like to change the colors of the spoiler box, add the CSS below into the CSS section above
  

  <style type="text/css">
  /* Add any custom CSS here */
  .spoiler { border: #444444 1px solid; color: #dddddd; }
  .spoilerbody { color: #888888; }
  </style>

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.

  var addProgressBar = false;

• Progress Bar Title (optional) - Adds a title above the bar. No CSS class is defined for this title, but it is made bold.
• Percentage (required) - The percentage of the bar. Enter a number between 0 and 100 - the percentage (%) sign is optional.
• Border Type (required) - Select the type of border you want. Options are "none", "image" or "Text"
  • None - Removes the border from the progress bar
  • Image - Uses the border image, of which there are only two color choices.
  • Text - Just add a colored border line around the progress bar
• Border (required) - When image type is selected, this gives you an option of choosing the black or silver border image. If the text type is chosen, you can select the custom color from the wheel on the right.
• Bar Color (required) - type in the hex color or select the color from the wheel on the right.
• Text Color (required) - type in the hex color or select the color from the wheel on the right.
• Bar Image (required) - Select the style of bar image you want. You can add more options to this by following the instructions in the section below.
  • None - Choosing this option will remove the image. The color of the progress bar will be set by the "Bar Color" 
  • Custom - Choosing this option will open a new input area so you can enter the URL to your bar image. The image can be of any size, but ideally it should be 200 pixels by 15 pixels. If it is larger, only the center portion of the image will be displayed.
  • Striped (default setting) - this is a semi-transparent image that allows the "Bar Color" to show through so you can set this bar to any color
  • Animated - Choosing this will add an animated image to your progress bar. This image is opaque and will not be affected by the "Bar Color"


• Custom Bar Images - You can add your own custom progress bar images by following this example (don't forget the commas!)

  var barImageOptions = {
    "It's Fire Baby!" : "http://www.axiomfiles.com/Files/258012/fire.gif",
    "Water" : "http://www.axiomfiles.com/Files/258012/water.gif"
  };

  • Add this template to add as many bar images as you want. Make sure the last line of the variable doesn't have a comma. See the example above.
    
    "Bar Image Name" : "Bar Image URL",
  
  
  • Replace the text in blue with the Bar Image name, in the example above it is "It's Fire Baby!" and "Water"
  • Replace the text in orange with the URL to the bar image.
  
  
  • To make the selection box automatically have this new progress bar imageselected, replace the text in blue with the exact name of the "Bar Image Name". Only one progress bar image can be selected at a time.
    
    var selectedProgressBarImage = "Bar Image Name";

<script type="text/javascript">
// Add any custom variables here
var customCharCode = new Array();

var charTooltipSize = 100;
 
 customCharCode.push(["Extras","Angry Crab","(&#92;/)Ò_ó(&#92;/)<br>"]);
 customCharCode.push(["Extras","Bunny1","(\\ /)<br>( . .)<br>C('')('')<br>"]);
 customCharCode.push(["Extras","Bunny2"," (\\_/)<br>=('.')=<br>(&quot;)_(&quot;)<br>"]);
 customCharCode.push(["Extras","Cat","  _ _/|<br>  \\'o.0'<br>=(___)=<br>    U<br>"]);
 customCharCode.push(["Extras","Confused Cat","<(o.O)>"]);
 customCharCode.push(["Extras","Happy Cat","<(^.^)>"]);
 customCharCode.push(["Extras","Kirby (left)","<('-'<)"]);
 customCharCode.push(["Extras","Kirby (right)","(>'-')>"]);
 customCharCode.push(["Extras","Scaredy cat","<(@.@)>"]);
 customCharCode.push(["Extras","Sleeping Cat","(=.=)~"]);
</script>
<script src="http://www.axiomfiles.com/Files/258012/mod-special.js" type="text/javascript"></script>

• To find more characters that you could add to this module, check out FileFormat.info. The site lets you search for the symbol you want by name. But realize that not all browsers will support displaying these characters. If you had to, you could always make the character into an image and add it to the custom character code as an image. Make sure you look for the HTML Entity (decimal) which has this format: &#9756;   


• When adding a custom character code to this module, use the following template:
  

  customCharCode.push(["Tab Name","Custom Character Name","Custom Character Code"]);

• The Tab Name can be a tab that already exist in the popup window. If the name doesn't exist, a new tab is added and the code will be added inside. The extras tab (seen in the screen shot) is not part of the module and is actually added by the custom code above.


• The Custom Character Name identifies the code, it can be seen when the character is hovered over in your forums.


• The Custom Character Code can be almost any text.
  
  
  • The escape codes used are from the built-in browser codes to display special characters (but not all fonts or browsers can display them all). For example, the the British pound (£) has an HTML escape code (or entity) of &pound; or &#163; - it has both a named and decimal equivalent. When you type in that code into your HTML, the browser converts it into the symbol. So, if you wanted to add the pound sign into the Miscellaneous tab, use the following code:
    

    customCharCode.push(["Misc","British Pound","&#163;"]);

  • In addition, if you have a symbol that you have converted into an image, you can add it into the menu code as an <img> as follows (using single quotes around the URL):
    

    customCharCode.push(["Misc","British Pound","<img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/special.png'>"]);

    This is a alternative to adding the symbol to your emote module.
  
  
  • You can also add ascii text art into the code, as explained in detail below.
    

    customCharCode.push(["Extras","Bunny2"," (\\_/)<br>=('.')=<br>(&quot;)_(&quot;)<br>"]);

• You can adjust the width of the tooltip that pops up inside the module (when hovering over the symbol) by adjusting the following variable
  

  var charTooltipSize = 100;

  It's set to 100 because the tooltip displays the special character 300% larger than normal... if you add some text art that is too big, then you will need to adjust this width.

• You can also have fun with the code (I added these mostly because I was bored LOL). I will walk you through how to add text art (both single and multi-line)... I got a few of the ones I added to the custom code above from this site.


• First off, you need to know that you can pretty much add any character into the code above except the following... they need to be replaced with their HTML escape code equivalent. I tried to make the script do this, but it doesn't work because the code gets replaced inside the script.
  
  

  Name		Replace with:
  Backslash	\	\\ or \
  Quote	"	"

  
  If the above characters aren't replaced, it will either break the popup window or mess up the code.


• Lets start with Kirby.... the final code looks like this:
  

  customCharCode.push(["Extras","Kirby (right)","(>'-')>"]);

  As you can see, I didn't have to change anything because none of the special characters are inside of it.


• Now we'll try a more complicated piece of art... the final code looks like this (with the special characters replaced):
  

  customCharCode.push(["Extras","Bunny2"," (\\_/)<br>=('.')=<br>(&quot;)_(&quot;)<br>"]);

Start		Add a 2nd backslash		Replace quotes		Add a line break to each line
(\_/) =('.')= (")_(")	→	(\\_/) =('.')= (")_(")	→	(\\_/) =('.')= (&quot;)_(&quot;)	→	(\\_/)<br> =('.')=<br> (&quot;)_(&quot;)<br>



1. Start out with the ascii art (Start) in your favorite text editor... or even the GuildPortal editor.


2. Add an extra backslash to every backslash in the code (there is only one in this particular bunny) or replace the backslash with it's HTML escape code (&#92;). What this does is "escapes" the backslash. So you're escaping an escape flag - it sounds complicated, but in plain english, the backslash tells the browser to ignore the next character it finds. Once it's done, the escape flag character disappears. so if that second backslash wasn't there, it would ignore whatever the next character is, then disappear.


3. Replace all the quotes with the quote escape code (&quot;). Be careful because sometimes it can be hard to distinguish a quote (") from two single quotes (''). But it only makes a difference if you are using a fixed width font versus a proportional font (In a proportional font, an "i" is narrower than a "w"... In a fixed width font like courier, the "i" and "w" are the same width)


4. Add a line break (<br>) at the end of each line of code, include the last line so that you won't immediately add anything on the same line.


5. Now make the code fit into one line, then paste it into the customCharCode variable template, give it a name and choose a tab where you want it to go.


6. Make sure you test it to ensure it looks like the original art your started out with... If you think the text art looks off, you could always add <code> </code> around the text in your post or change the font to "courier".