Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > Forum Modules
Mottie (SuperAdmin) 3/23/2009 12:41 AM EST : Forum Modules
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Module: Popup | Media | Extras | Emotes |Wowhead

Forum Modules v1.2

GuildPortal admin site link to the original post

This set of modules was written to make it easier for everyone to post stuff in the forums. It adds icons above the current emoticons. For now, there are two five modules, I'll add more as I find the need, or if someone posts an idea or request.

*UPDATE* I updated the tooltip portion of the popup module to work with the new jQuery tooltips now used by GuildPortal. Please read the instructions below for the updated information.

Popup Module:
  Add Facebox window
  Add Growl Window
  Add Tooltip
  Add Hide-Show Box
  Add Spoiler Box

Media Module:
  Insert YouTube video
  Insert mp3

Extras Module:
  Add Progress Bar

Adding this to your site

This is the easiest part! Just copy the code below and ideally paste it into a free form text/HTML box on your forum page, but it can be put anywhere like your header HTML, footer HTML or Footer. 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-v1-2.js.
<script type="text/javascript">
// Add any custom variables here
</script>
<script src="http://www.axiomfiles.com/Files/258012/mod-popups-v1-2.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/258012/mod-media-v1-1.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/258012/mod-extras-v1-1.js" type="text/javascript"></script>
<link type="text/css" rel="Stylesheet" href="http://www.axiomfiles.com/Files/258012/mod-style.css">
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
<style type="text/css">
/* Add any custom CSS here */
</style>
* NOTE * The links above point to my help-site files. Version 1.0 was hosted elsewhere.

Customizing

  • Everything in this section is optional. You only need to add it if you want to turn off part of a module or modify the colors.
 Overall
  • The window that pops up (facebox) color** 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>
    • The "modFrameCss" adds color to the window, modify the background color and text color (in blue). ** Removed
    • The "modInputCss" adds color to the input area (try to make this a different color, so you can see where to input information). ** Removed
      **Note: In version 1.0 of this module you could modify the style of the module, with the above variables. But the styles weren't being applied on IE and Chrome, so I moved everything into a stylesheet
    • To modify the facebox or module colors, add any CSS between the <style> tags in below the comment "/* Add any custom CSS 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.
-= Popup Module =-

Facebox v1.1
  • 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 v1.1
  • 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:
    • "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 v1.2
  • 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.
Hide-Show Box v1.0
  • 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
    • Add 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";
Spoiler v1.1
  • 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>
-= Media Module =-

YouTube v1.1
  • 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.
Mp3 v1.1
  • 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.
  • The "Word Press" player can be styled to match your site, but I didn't get around to setting this up yet. I haven't worked on it yet since I was thinking about using the same popup color selector that GuildPortal uses, but I don't really like it.

    * Note: When adding an mp3 player in the forums, it may appear that nothing was added (while in design mode ). But if you switch to HTML mode () and back, or once you save the post, it will appear!

  • 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 righ 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;
-= Extras Module =-

Progress Bar v1.0
  • 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://i201.photobucket.com/albums/aa236/Mottie1/testsite/bars/fire.gif",
     "Water" : "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/bars/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";
Edit (4/2/2009): Updated the instructions for version 1.1. And added Hide-show box & Progress bar modules
Edit (6/6/2009): Updated the tooltip portion to version 1.2. Also included are the new tooltip script and links to instructions on how to add that script to your site.
This topic was moved from forum Instructions to forum Archive by Mottie.
This topic was moved from forum Instructions to forum Archive by Mottie.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 3/23/2009 12:44 AM EST : Forum Modules - examples
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

The items in this post are examples of output from the Forum Modules script:

Facebox Link Text

Growl Link Text

Tooltip Text

Spoiler (click to show)

Spoiler (hover to show)

Non-YouTube Video Text

Business Time!


Dr Who


Safety Dance
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Frost-Guard (Member) 3/25/2009 1:46 PM EST : RE: Forum Modules - examples
Frost-Guard
Posts: 947

0
Like

0
Dislike

Is there a Way to add a Myspace one instead of Facebook?

I really like this.
"It's not who you are underneath but what you do that defines you."
TopBottom

Mottie (SuperAdmin) 4/2/2009 5:02 PM EST : RE: Forum Modules - examples
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hey Frost-Guard!

It's actually a module for FaceBOX... it's the name of the script that make this popup window: click here.



Updated the Forum Modules to version 1.1...
  • Added ability to add color to the Word Press music player
  • Added Hide-Show Box module
  • Added Progress Bar module
  • Moved all CSS to an external file that you must link to. I had to do this because of IE and Chrome not liking the CSS I was adding with the script
  • Added icons to all the Facebox popups to make it purdy! mmHmm Hmmm
  • More examples:

Added Color to the Music Player:
Safety Dance (again!)

New Modules

Hide-show Box Title
Hide-show Box Content, The colors for this box were inclued in this post, but you can set the style for it in your Custom CSS.

Progress Bar Awesomeness
90%

Water Reserves
35%

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Frost-Guard (Member) 4/3/2009 12:25 PM EST : RE: Forum Modules - examples
Frost-Guard
Posts: 947

0
Like

0
Dislike

*Slaps Forehead*

Doh!  Hahha..Thanks for the Heads up.
"It's not who you are underneath but what you do that defines you."
TopBottom

Mottie (SuperAdmin) 4/21/2009 12:46 AM EST : Forum Modules - Emotes
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Module: Popup | Media | Extras | Emotes |Wowhead

Forum Module - Emotes

This is an update of the Custom Emote scripting that added a bunch of Custom emotes below the built in emoticons. It's basically the same, but it's made so that you can add hundreds of emotes without messing up the look of the page. 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. 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">
 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 deviantARTwhere most of these emotes came from... I tried to leave the name ofthe 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"]);

  • Whenyou hover over the custom emote, a tooltip will pop-up with the emotename and a full sized image. To adjust the size of this tooltip, adjustthe 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;
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 5/22/2009 11:26 AM EST : Forum Module - Wowhead
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Module: Popup | Media | Extras | Emotes |Wowhead

Forum Module - Wowhead

This module allows site users that don't know HTML to add a link to wowhead which includes the item quality color.

Here is a screen shot of the popup window



Adding this to your site

Copythe code below and ideally paste it into a free form text/HTML box onyour forum page, but it can be put anywhere like your header HTML,footer HTML or Footer.
<script type="text/javascript">
// Add any custom variables here
</script>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/mod-wowhead.js"></script>
Customizing
  • This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
    var addWowhead= false;
  • "Name" (required) - Enter the name of the item, spell, quest, achievement, etc here. It will become the link that you hover or click on to go to the wowhead site.
  • "Wowhead Link" (required) - Enter the URL to wowhead here. Example below:
    http://www.wowhead.com/?item=19019
  • "Item Quality" (optional) - Pick the item quality from the drop down box. It defaults to "None"

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 5/23/2009 4:39 AM EST : RE: Forum Module - Wowhead
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Mottie, I'm confused. Is the wowhead for the WoW game?
TopBottom

Mottie (SuperAdmin) 5/23/2009 8:37 AM EST : RE: Forum Module - Wowhead
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Guppy!

LOL yes, Wowhead = database for WoW.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 5/24/2009 2:58 PM EST : RE: Forum Module - Wowhead
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Oh, thanks Mottie 
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%