can i change table button to something like that

APE wrote:Not as far as I know No sorry

It would take a lot of recoding to make it and maybe have to have server side as well and we don't offer server side tools

oh no  i saw it but for another version 

APE wrote:was it on a forumotion forum ?

APE wrote:oh right then yes it can be done BUT sadly I have looked over the download file and can not work out all of the codes used I found the Javascript for it but I think it needs templates and CSS files also

Have you gave @Wecoc a PM asking if there is any way to get the codes used ?

I have tagged Wecoc in this post maybe Wecoc will see it when they log in next.

Code:

/*--------------------------------------------------------------------------
  SCEditor Table Dropdown
  [ This javascript was made for the Forumotion skin Modern redux ]
  Author: Wecoc
  Placement: In all the pages
  --------------------------------------------------------------------------
  This is a rewrite of the Table command which allows to pick the row and column
  size directly. It's mainly based on the table size picker found in Microsoft Word
  Requirements: CSS Edits (Section: SCEditor Edits)
  --------------------------------------------------------------------------*/

$(function(){
  if (!$.sceditor) return;
   
  /* Configuration */
  var lang = { insert: "insert", cancel: "cancel", fill_content: "text" };
  var max_x = 10, max_y = 8; // Set here the max number of columns and rows
  /* Configuration */
  var recent_click = false; // ! Don't change this line
 
  // Define the new dropbox
  $.sceditor.command.set('table', {
    dropDown : function(editor, caller, callback) {
      var div_table = '<div class="cell_table"><div class="cell_picker">';
      for (i = 0; i < max_y; i++) {
        div_table += '<li style="display:block;">';
        for (j = 0; j < max_x; j++) {
          var tstring = "Table (" + (j + 1) + ", " + (i + 1) + ")";
          div_table += '<div class="cell_option" title="' + tstring +
          '" style="display:inline-block; unselectable="on"/>';
        }
        div_table += '</li>';
      }
      div_table += '</div></div>';
      var div_buttons = '<div class="cell_buttons"><input type="button" class="button" value="' + lang.insert +
      '" style="display:inline-block"><input type="button" class="button" value="' + lang.cancel +
      '" style="display:inline-block"></div>';
      var a = $(div_table), b = $(div_buttons); a.append(b);
      // Hover - Paint cells
      $('.cell_option', a).on('hover', function() {
        if (!recent_click) {
          $('.cell_option', a).removeClass("over");
          get_hover_cells(this);
        }
      });
      // Click - Set current one as new value
      $('.cell_option', a).on('click', function() {
        if (!recent_click) {
          $('.cell_option', a).removeClass("picked");
          $(this).addClass("picked");
          recent_click = true;
          setTimeout(function(){ recent_click = false }, 500);
        }
      });
      // Mouse leave - Remove the hover paint cells and paint them again based on the last picked
      $('.cell_picker', a).on('mouseleave', function() {
        $('.cell_option', a).removeClass("over");
        $('.cell_option.picked', a).filter(function(){ get_hover_cells(this) });
      });
      // Click Insert button
      $('input[value=' + lang.insert + ']', b).on('click', function() {
        callback();
        editor.closeDropDown(true);
        return false;
      });
      // Click Cancel button
      $('input[value=' + lang.cancel + ']', b).on('click', function() {
        editor.closeDropDown(true);
        return false;
      });
      editor.createDropDown(caller, 'table', a);
    },
   
    // wysiwyg
    exec : function(caller) {
      var editor = this;
      $.sceditor.command.get('table').dropDown(editor, caller, function() {
        $('.cell_option.picked').filter(function(){
          var result = '[table class="table-content"]', cell = this, parent = cell.parentNode;
          var x = Array.prototype.indexOf.call(parent.childNodes, cell);
          var y = Array.prototype.indexOf.call(parent.parentNode.childNodes, parent);
          for (i = 0; i <= y; i++) {
            result += '[tr class="tr' + i + '"]';
            for (j = 0; j <= x; j++) {
              result += '[td class="td' + j + '"]' + lang.fill_content + '[/td]';
            }
            result += "[/tr]";
          }
          result += '[/table]';
          editor.insert(result, '', true, true, true);
        });
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this;
      $.sceditor.command.get('table').dropDown(editor, caller, function() {
        $('.cell_option.picked').filter(function(){
          var result = '[table class="table-content"]', cell = this, parent = cell.parentNode;
          var x = Array.prototype.indexOf.call(parent.childNodes, cell);
          var y = Array.prototype.indexOf.call(parent.parentNode.childNodes, parent);
          for (i = 0; i <= y; i++) {
            result += '[tr class="tr' + i + '"]';
            for (j = 0; j <= x; j++) {
              result += '[td class="td' + j + '"]' + lang.fill_content + '[/td]';
            }
            result += "[/tr]";
          }
          result += '[/table]';
          editor.insert(result, '', true, true, true);
        });
      });
    },
    tooltip : 'Insert Table'
  });
});

// Paint cells from 0 to x (current column) and from 0 to y (current row)
function get_hover_cells(cell){
  var parent = cell.parentNode;
  var x = Array.prototype.indexOf.call(parent.childNodes, cell);
  var y = Array.prototype.indexOf.call(parent.parentNode.childNodes, parent);
  for (i = 0; i <= y; i++) {
    var row = parent.parentNode.childNodes[i];
    for (j = 0; j <= x; j++) {
      var target = row.childNodes[j];
      $(target).addClass("over");
    }
  }
}

Code:

/* SCEditor Edits */

.color_option { width: 24px; height: 24px; cursor: pointer; }
.color_buttons, .cell_buttons { text-align: center; }
.color_buttons input.button { margin: 8px 8px 0 8px !important; }
.cell_buttons input.button { margin: 8px 8px 0 8px !important; }

.color_option.picked:before {
  content: "\f120";
  position: absolute;
  font-family: Ionicons;
  font-size: 2rem;
  transform: translateX(3px) translateY(3px);
  color: #fff;
  text-shadow: 1px 1px rgba(0,0,0,0.2);
}

.cell_option {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: solid 1px #b0b0b0;
  margin: 1px !important;
}

.cell_option.over { background-color: #ebeadd; border: solid 1px #d3d2c7; }

#preview .postbody table, #preview .postbody td,
div[class*='post--'] .postbody table, div[class*='post--'] .postbody td {
  border: none !important;
  border-spacing: 0;
}

#preview .postbody table.table-content, .postbody table.table-content {
  border: 2px solid #302f4f !important;
}

.table-content td { padding: 4px; }
.table-content { width: 100%; }

.table-content .tr0 {
  background-color: #302f4f;
  color: #fff;
  font-weight: 500;
}