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 - making it easier to add stuff to forum posts
Mottie (MVP) 3/23/2009 12:36 AM EST : Forum Modules - making it easier to add stuff to foru...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Module: Popup | Media | Extras | Emotes | Wowhead

Forum Modules v1.2

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 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 withthe new jQuery tooltips now used by GuildPortal. Please read theinstructions 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 tooltip script (in purple) in case you haven't already added it back (since it was removed from GuildPortal).
<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 test-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;
  • "TooltipLink HREF" (optional) - This is the URL you want to send the readerwhen they click on "Text or Image to Hover". If left blank, it will adda "void" script to prevent the link from sending the reader away fromyour 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.
  • "TooltipBackground Color" (optional) - Added in v1.2 of this script. You canchoose the background color of the tooltip, this is a new option addedwith the New and Improved tooltips and v1.2 of the tooltip script. Thedefault 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 (4/2/2009): Updated again as apparently the <script> tag pointing to the modules was messed up somehow... fixed!
Edit (6/6/2009): Updated the tooltip portion to version 1.2. Alsoincluded are the new tooltip script and links to instructions on how toadd that script to your site.
TopBottom

Mottie (MVP) 3/23/2009 12:47 AM EST : RE: Forum Modules - making it easier to add stuff to ...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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

Facebox Link Text

Growl Link Text

Tooltip Text (this isn't working in these forums because of the missing tooltip script)

Spoiler (click to show)

Spoiler (hover to show)

Business Time!


Dr Who


Safety Dance


** Note: Ok, everything should be fixed.

TopBottom

Guppy Queen (New Admin) 3/23/2009 11:35 AM EST : RE: Forum Modules - making it easier to add stuff to ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

wow, this is awesome Mottie! Thanks

TopBottom

Mottie (MVP) 4/2/2009 4:52 PM EST : RE: Forum Modules - making it easier to add stuff to ...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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 to get the proper box colors. I had to do this because IE and Chrome did not like the CSS I added using javascript
  • 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%

TopBottom

Guppy Queen (New Admin) 4/7/2009 12:21 AM EST : RE: Forum Modules - making it easier to add stuff to ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Thanks Mottie! 

Question, what is the purpose of the progression bar. It's really cool.
TopBottom

Mottie (MVP) 4/7/2009 8:57 AM EST : RE: Forum Modules - making it easier to add stuff to ...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Guppy!

LOL... ummm, my actual thought about the progress bar was maybe posting about donations to the site... In Age of Conan, you have guild members donate items to help build your city, so I guess that's another way to show progress.

One nice thing about these modules, in case you haven't figured it out yet, is that if you copy the code the module adds to the editor and paste it into any free form text/HTML box and it will still work.
TopBottom

Guppy Queen (New Admin) 4/7/2009 2:31 PM EST : RE: Forum Modules - making it easier to add stuff to ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Cool. Just wondering if these progress bars will move on their own or if we will have to manually change the % if we need to.
TopBottom

Mottie (MVP) 4/7/2009 5:15 PM EST : RE: Forum Modules - making it easier to add stuff to ...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Guppy!

If you want to manually change the percentage, you'll have to do it in two places (colored blue and red below):
<strong>Progress Bar Awesomeness</strong><br><div style="background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/bars/barbg-black.png) no-repeat scroll 0pt 0pt; width: 216px; height: 25px; position: relative; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><span style="background: rgb(112, 14, 129) url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/bars/bar.png) repeat scroll center center; overflow: hidden; position: absolute; display: block; width: 200px; height: 15px; top: 6px; left: 8px; text-indent: -30px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><em style="background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/bars/bg_cover.png) repeat-x scroll 0pt 0pt; position: absolute; display: block; width: 200px; height: 15px; top: 0px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; left: 90%;"><span style="position: absolute; display: block; top: -0.2em; font-size: 12pt; font-weight: bold; color: rgb(255, 255, 255);">90%</span></em></span></div>
  • The number in blue is the bar positioning percentage. This should remain a percentage of completion.
  • The number in red is the displayed percentage. If you want, you can change this to "5/6" or whatever you want.
  • The problem with manually changing the progress bar is that the spacing of the displayed text changes with the bar percentage. For example, if you set the bar to 0%, the text displayed must be shifted to the right of the end of the bar. At 10%, it's still not inside the actual bar and therefore is still shifted. After about 20%, the text position doesn't move until you reach 100%. So I still think your best bet would be to just make a new bar if it doesn't look right after you modify it.
TopBottom

Guppy Queen (New Admin) 4/8/2009 2:32 AM EST : RE: Forum Modules - making it easier to add stuff to ...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Very cool Thanks Mottie
TopBottom

Mottie (MVP) 4/21/2009 12:58 AM EST : RE: Forum Modules - making it easier to add stuff to ...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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;
TopBottom

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