Advanced tricks

How do I add custom buttons to my Add/Edit Item page?

Scenario:
"I want to add more buttons to the standard button bar in the admin area. How do I do this?"

Solution:
The solution is a "core hack", i.e. you will need to edit some of the core Nucleus files inside your /nucleus/ directory.

WARNING: You will need to make this changes again if you make an upgrade of your Nucleus installation.

Original forum thread (thanks, ikeizer, NeoCon Hitman!):
http://forum.nucleuscms.org/viewtopic.php?t=258

Method:

  1. Go to your /nucleus/javascript/ directory and open the edit.js for editing. Create the function you'd like to add. For example, let's add two buttons. The first one will insert a table that aligns it's contents to the left. The second one aligns its content to the left:

    function leftTableThis() { insertAroundCaret("
    <table width="auto" cellspacing="0" cellpadding="0" align="left"><tr><td align="center" valign="top" class="small">","</td></tr></table>
    "); }
    function rightTable() { insertAroundCaret("
    <table width="auto" cellspacing="0" cellpadding="0" align="right"><tr><td align="center" valign="top" class="small">","</td></tr></table>
    "); }

    Save the changes you've made to edit.js.

  2. Next, go to your Global Settings and see what your Javascript Toolbar Style setting is.
  3. Open pagefactory.php inside the /nucleus/libs/ directory.

    If your "Javascript Toolbar Style" is "Disabled":
    Follow this FAQ on how to enable your item formatting bar

    If your "Javascript Toolbar Style" is "Simple (Non-IE)":
    Find this code:

    case "2":
    echo '<div class="jsbuttonbar">';
     
    $this->_jsbutton('bold',"boldThis()",'');
    etc.

    If your "Javascript Toolbar Style is "Full Toolbar (IE)":
    Find this code:

    case "2":
    echo '<div class="jsbuttonbar">';
     
    $this->_jsbutton('cut','cutThis()',_ADD_CUT_TT . " (Ctrl + X)");
    etc.
  4. Add the following code snippet (it consists of 2 lines) to this file, where you want the two buttons to appear:
    $this->_jsbutton('lefttable',"leftTable('body')",_ADD_LEFT." ");
    $this->_jsbutton('righttable',"rightTable('body')",_ADD_RIGHT." ");

    Make sure you add it underneath the right "case" snippet, otherwise you won't see your new buttons!
  5. Now you need to add _ADD_LEFT and _ADD_RIGHT to the language file(s) (located at /nucleus/language/) you use on your site.
  6. The fourth and final step is the creation of your new buttons. They should be .gif images and named after the first part of the line you inserted into pagefactory.php. So in our example: button-lefttable.gif and button-righttable.gif. Upload these to /nucleus/images and you're done!
section: Advanced tricks | submitted by roel on 2004.Dec.15 | 6231 views

item rate
Total votes: 16 - Rating: 7.94

Please tell us how useful this answer was to you (0 = useless, 10 = very very helpful):

10