Mod Table Assistance

I have installed a Mod Table for threads and i wanted to know how do i get to look like this......


Here is the code......

Code:

jQuery(function(){
  _userdata.user_level && jQuery(function() {
    /* mod tables */
    jQuery('body').append('<div id="fa_modtable" class="select" style="visibility:hidden;width:auto;text-align:left;"><div class="modOption" id="MTable1">Locked</div><div class="modOption" id="MTable2">Archived</div><div class="modOption" id="MTable3">Information</div>');
    jQuery('.sceditor-group:last-child').after('<div class="sceditor-group" id="fa_modtools"><a class="sceditor-button" title="Mod Tables" onclick="selectWysiwyg(this, \'fa_modtable\');"><div style="background:url(http://i56.servimg.com/u/f56/18/45/41/65/modera10.png) no-repeat center;"></div></a></div>');
    /* mtable functions */
    jQuery('#MTable1').click(function() { /* Solved */
      jQuery('#text_editor_textarea').sceditor('instance').insertText('[table class="notice-locked"][tr][td]Thread Lock:','[/td][/tr][/table]');
    });
    jQuery('#MTable2').click(function() { /* Denied */
      jQuery('#text_editor_textarea').sceditor('instance').insertText('[table class="notice-archived"][tr][td]Thread Archived:','[/td][/tr][/table]');
    });
    jQuery('#MTable3').click(function() { /* Information */
      jQuery('#text_editor_textarea').sceditor('instance').insertText('[table class="notice-info"][tr][td]Text for Information here','[/td][/tr][/table]');
    });
    /* hide list onclick */
    jQuery('.modOption').click(function() { jQuery('#fa_modtable').css('visibility','hidden'); });
  });
});

Hello,
Is there any css installed for it? If so, may you post it up? What is the url to your forum?

-Brandon

I have no CSS for the mod tool.

Death Battles

Interesting, it would be css that would probably be needed to style it.

-Brandon

I knew it and I'm not good at that lol.

Indeed, you'll need CSS to style each table class. For example, add the following to your stylesheet :

Code:

.notice-locked {
  color:#FFF;
  font-weight:bold;
  background:#FF5858;
  border-radius:3px;
  margin:3px;
  padding:3px;
}

.notice-archived {
  color:#FFF;
  font-weight:bold;
  background:#FF5858;
  border-radius:3px;
  margin:3px;
  padding:3px;
}

.notice-info {
  color:#FFF;
  font-weight:bold;
  background:#07A0DD;
  border-radius:3px;
  margin:3px;
  padding:3px;
}

After that, you just need to change the background color and add an image for each table.

How do i get images?

You can make them, request them, or find them on the web. Here's such a site which offers various images : http://www.iconarchive.com/

Ange Tuteur wrote:You can make them, request them, or find them on the web. Here's such a site which offers various images : http://www.iconarchive.com/

Ah yes Ange, Icon archive, great site! That is where I get all the images for the sections on my forum. Great stuff there .

Lol I mean how do I add images to the codes.

In the script where you see these two tags :

Code:

[tr][td]

add another cell between them, like this :

Code:

[td][/td]

and then insert the image tags + image URL so you get this :

Code:

[td][img]URL[/img][/td]

or it would look like the following in the script for a better example.

Code:

insertText('[table class="notice-locked"][tr][td][img]URL[/img][/td][td]Thread Lock:','[/td][/tr][/table]');

URL being the URL of your image.

Solved! Thanks again!

You're welcome.

Topic archived