Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Forum Modules!
Mottie (MVP) 7/26/2009 3:41 AM EST : Forum Modules!
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Module: Popup | Media | Extras | Specials | Emotes

Forum Modules v2.0

This set of modules was written to make it easier for everyone to post stuff in the forums. This is the updated version that works with the new forum editor. Sadly, adding these modules to the content box editor in the popup window and new window is proving to be more difficult - so it may not get added to anywhere but the forum editor.

This module adds icons directly into the Forum editor (see image below). I've updated all the previous versions, except for the wowhead module as the new one Aaron made is much better 

 Popup Module:  Media Module:  Extras Module:  Specials Module:  Emotes Module:
  Add Facebox window
  Add Growl Window
  Add Tooltip
  Add Hide-Show Box
  Add Spoiler Box
  Insert YouTube video
  Insert mp3
  Add Progress Bar
  Add Special Characters
  Add Custom Emotes

Adding this to your site

This is the easiest part! Just copy the code below and paste it into a free form text/HTML box ABOVE your forum content box or into the custom Banner HTML - To reiterate, this code must be above the forum box in order to work. I've included the updated tooltip script (in purple) in case you haven't already added it - this would be the the new tooltip script described in this post and designed to work with mod-popups-v2-0.js (you also need to make sure the tooltip CSS is included from that post).
<script type="text/javascript">
// Add any custom variables here
</script>
<script src="http://www.axiomfiles.com/Files/258012/mod-popups.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/258012/mod-media.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/258012/mod-extras.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/258012/mod-emote.js" type="text/javascript"></script>
<link href="http://www.axiomfiles.com/Files/258012/mod-style.css" type="text/css" rel="Stylesheet">
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
<style type="text/css">
/* Add any custom CSS here */
</style>

Complete Code (click to view)

Important Note!

  • If you use these modules while the editor is in plain text/BBCode editor mode, anything you add will end up at the bottom of the page.

Customizing

  • Everything in the following posts is optional. You only need to add it if you want to turn off part of a module or modify a specific part of the module like the default colors.
Overall
  • The window that pops up (facebox) can be modified by adding a few lines of javascript, include this along with the script above (if you want to modify anything):
    <script type="text/javascript">
    // Add any custom variables here
    var addFacebox = true;
    </script>
    • To modify the facebox or module colors, add any CSS between the <style> tags in below the comment "/* Add any custom CSS here */". You can see the CSS for these modules here.

    • The "addFacebox" variable is set to true in the example, but setting it to true isn't required as it is automatically enabled, setting it to false will disable this part of the module. I've included it here as an example. Read the section for the module you want to turn off for the code you need to add to disable it.
Edit (7/28/2009): Added a Hide-Show box with the complete code - wow, don't try adding code in there like I did, what a pain! LOL
Edit (8/2/2009): Updated the script to show how to add the special characters modules with custom code.
Edit (1/31/2010): Updated to work with the new editor version.
TopBottom

Mottie (MVP) 7/26/2009 3:42 AM EST : Popup Module
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Popup Module v2.0

Facebox v2.0
Example: Click here to open a Facebox window
  • 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.
Growl v2.0
Example: Click here to open a Growl message
  • 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.
Tooltip v2.0
Example: Hover over this link to see the tooltip
  • 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.
Hide-Show Box v2.0
Example:
Click this bar
  • 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>
Spoiler v2.0
Example:
Spoiler (click to show)
  • 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>
TopBottom

Mottie (MVP) 7/26/2009 3:42 AM EST : Media Module
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Media Module v2.0

YouTube v2.0
  • This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
    var addYouTube = false;
  • Video Name (optional) - Puts the Video Name above the embedded video
  • Video URL (required) - Find the URL of the video and paste it into this area (example: http://www.youtube.com/watch?v=wN0oDnoc3-c&fmt=)
  • If you enter a non-YouTube address, you'll just end up with a link to the video. And in this case the Video Name will be required.
  • Video Size (optional) - This resizes the video by letting you chose a size between 25% and 200% of the original video size ( 425px X 344px ).
  • Shadow Color** (optional) - Set this color to the darker colors found at the top and bottom of the video frame
  • Highlight Color** (optional) - Set this color to the lighter colors found in the middle and the player bar of the video frame
  • Border (optional) - Adds a border around the video (if checked)
  • Play in HD (optional) - Attempts to play the video in high definition if available (if checked)
  • Allow Fullscreen (optional) - Allows users to play the video in full screen mode if they desire  (if checked)
  • Autoplay (optional) - Makes the video automatically play once the page has loaded (if checked)
  • Loop (optional) - Makes the video loop (if checked)
  • Show Related Videos (optional) - Shows related videos inside the player once the video is done playing (if checked)
  • Custom Colors - You can add your own default colors to the YouTube Module by adding the following variables.
    var youTubeColor1 = "#000000";
    var youTubeColor2 = "#dddddd";
    ** Note: When you select a new color in the YouTube module, it's supposed to update the colors in the preview window, but it's not working. I didn't want this minor bug to hold up putting these modules back out there.
Mp3 v2.0
  • This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
    var addMp3 = false;
  • mp3 Player - You can choose to use either the "Google" mp3 player or the "Word Press" mp3 player.
  • mp3 Title (optional) - Enter the Title and/or Artist for the song you want to insert.
  • mp3 URL (required) - Enter the URL to your mp3 here. It doesn't check for the ".mp3" end, in case these players happen to play other formats.
  • Custom Word Press Player Colors - The player has twelve colors you can customize. Click on the "Color Legend" box to see the image below. There are only nine labels in the image below, the three additional colors are seen when hovering over the right side of the player.



    • To add your own default colors that match the theme of your site (for those users that don't bother changing the colors or if you plan on disabling the color selector), you can add and modify any of the variables below:

      var mp3Bkgd = "#cce4ff"
      var mp3LeftBkgd = "#357dce"
      var mp3RightIconghtBkgd = "#af2910"
      var mp3RightIconghtBkgdHover = "#f06a51"
      var mp3LeftIcon = "#f2f2f2"
      var mp3RightIcon = "#f2f2f2"
      var mp3RightIconHover = "#333333"
      var mp3Text = "#1d4572"
      var mp3Silder = "#357dce"
      var mp3LoaderBar = "#303030"
      var mp3Track = "#969696"
      var mp3Border = "#ffffff"

    • Once you have the color set to match your site theme, you can turn on the color selection display. To disable the color selection for ALL users (this includes admin), add this variable. The variable is automatically set to true if you don't add this line:

      var allowMp3ColoringByAll = false;

      If you want the admin to be able to adjust the color, add this line as well. This variable only works if the above variable is set to false. Also, this variable is automatically set to false if you don't add this line:

      var allowMp3ColoringByAdmin = true;
TopBottom

Mottie (MVP) 7/26/2009 3:43 AM EST : Extras Module
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Extras Module
Progress Bar v2.0
Example:
50%
  • 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";
TopBottom

Mottie (MVP) 7/26/2009 3:43 AM EST : Emotes Module
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Emote Module v2.0

The current forum editor has a button that allows you to add emotes into your post, but it is limited to the custom emotes you add through the control panel. This module allows the admin to easily include hundreds of emotes and the user to have easy access to them. Below is a screen shot of the pop up window (facebox).


Adding this to your site

This is basically the same as the old script, you add all your emotes as well as the tooltip & emote size. Then add the link to the emote forum module script (it may already be included if you copied the code from the first post). Add this along with the other forum module script links which should all be on your forums page in a free form text/HTML box - add this while in HTML mode.

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

 var tooltipSize = 75;
 var emoteSize = 20;

 emotes.push(["I agree","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/iagree.gif"]);
 emotes.push(["blink","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/blink.gif"]);
 emotes.push(["BOOM!","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_explosion__rvmp_by_bad_blood.gif"]);
 emotes.push(["It's broken","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/oh_noes_broken_picture_by_dutchie17.gif"]);
 emotes.push(["Bunny Dance","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/Bunnicon__dancebunnydance_.gif"]);
 emotes.push(["burp","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/burp.gif"]);
 emotes.push(["clap","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_clap__revamp_by_Kermodog.gif"]);
 emotes.push(["cry","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_crying__rvmp_by_bad_blood.gif"]);
 emotes.push(["ducky","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_Duck_Ride__by_Shicken05.gif"]);
 emotes.push(["Glompage","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_GLOMPAGE__by_Zikes.gif"]);
 emotes.push(["Hadoken","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/hadoken_reamke_by_bad_blood.gif"]);
 emotes.push(["After your Heart","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_afteryourownheart__by_arrioch.gif"]);
 emotes.push(["Hugs","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/back_hug.gif"]);
 emotes.push(["n00b","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/n00b_by_de_Mote.gif"]);
 emotes.push(["No poking!","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_dontpoke__by_Chimpantalones1.gif"]);
 emotes.push(["Panic","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_panic__by_zacthetoad.gif"]);
 emotes.push(["Poke fight","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_Pokefight_.gif"]);
 emotes.push(["popcorn","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/popcorn_pops_by_bad_blood.gif"]);
 emotes.push(["ppbbtt","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/__P_by_ThaisD.gif"]);
 emotes.push(["shocked","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/shocked032.gif"]);
 emotes.push(["slap","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/slap.gif"]);
 emotes.push(["STFU","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_stfu__by_Kermodog.gif"]);
 emotes.push(["thwak","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/thwak.gif"]);
 emotes.push(["typer happy","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_typerhappy__by_de_Mote.gif"]);
 emotes.push(["wakey wakey","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_Jumping_On_Sleepy__by_Shicken05.gif"]);
 emotes.push(["wave","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/wave.gif"]);
</script>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/mod-emote.js"></script>

Customizing

  • To find more emotes, check out this site called deviantART where most of these emotes came from... I tried to leave the name of the artist in the filename to give them credit where I could.

  • When adding more emotes, the emote name can include spaces. The text is case-sensitive. Add more emotes using this template:

    emotes.push(["emote name","URL to emote"]);

  • When you hover over the custom emote, a tooltip will pop-up with the emote name and a full sized image. To adjust the size of this tooltip, adjust the width with this variable:

    var tooltipSize = 75;

  • The displayed custom emotes are resized for display. Adjust the height and width with this variable:

    var emoteSize = 20;
Edit (1/31/2010): Updated to work with the new editor version.
TopBottom

Eph (MVP) 7/26/2009 7:01 PM EST : RE: Emotes Module
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Spectacular work my master... err yeah awesomesauce Mottie. Got all codes up, and running on one site so far. Very pleased to say, whatever changes you made to facebox code also works for me while logged in.

So I used your module to get the code I need in the forums, then took it out, and put it in welcome boxes, free form htmls, etc, that I had the old codes in that did not work.

That coupled with the changes Aaron made to gallery, small news item popups, everything is poping up nicely now.

Thanks you guys.

One question, any idea how I can change the background of the new gallery pop-up so it matches my site better, and not just white?

Also, is there a way to make it so when you expand the popup box it does not attach itself to the top of the page?


TopBottom

Mottie (MVP) 7/27/2009 3:06 AM EST : RE: Emotes Module
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Eph!

I posted a fix in this thread for you
TopBottom

Eph (MVP) 7/28/2009 1:18 AM EST : RE: Emotes Module
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Thanks Mottie, I had already put the code on my site about 10 min after you posted here.

Works good, don't know the diff between these faceboxes, and the old ones, but these work all the time.

Rock on Mottie!

Eph
TopBottom

Guppy Queen (New Admin) 7/28/2009 1:03 PM EST : RE: Emotes Module
Guppy Queen
Posts: 41034
Zomgawsh Poster

I love you Mottie
TopBottom

Mottie (MVP) 8/2/2009 8:27 PM EST : Forums Modules
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Special Characters Module v1.0 

There isn't a button in the forum editor to allow you to add special characters, so this module was made to make it easy! It only includes a few of the common special characters because of browser compatibility (*cough* IE is very limited)... (e.g. © ® ), but it also includes a little something extra 

*Note: There is also an odd thing that I noticed about this module when using Google Chrome. When you click on a symbol to add into the forum post, the symbol becomes selected. So if you start typing or try to add more than one special character, it gets replaced. A simple solution would be to just press the right arrow key on your keyboard after adding a new special character (this works even with the popup window still open).


Adding this to your site

Ideally, add the following code into the free form text/HTML content box with the other module scripts. If this is the only module you are adding, put it in the banner HTML or into a free form text/HTML content box ABOVE the forum content box.
<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>
Customizing

  • 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.

ASCII Text Art

  • 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 &#92;
    Quote
    " &quot;

    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".
Edit (1/31/2010): Updated to work with the new editor version
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%