Xinha Discussion Forum

dejo

New member

Registered: 2007-10-22

Posts: 1

Toolbar Button Width / Caption

Is it possible to use toolbar button images that are wider than 18px? If so, how? Either that or allow a toolbar button to have a caption?

dragonal

New member

From: Riverside, CA

Registered: 2008-07-14

Posts: 2

Website

Re: Toolbar Button Width / Caption

The quick fix is editing the htmlarea.css file and specifying the width of your image in the htmlarea.js (or your plugin app)

Step 1:

Comment out the width: 18px line in:

.htmlarea .toolbar .button {  
  background: ButtonFace;
  color: ButtonText;
  border: 1px solid ButtonFace;
  padding: 1px;
  margin: 0px;
  /* width: 18px; */
  height: 18px;
}

Step 2:
In the btnList, you will need  to specify the width in the 4th parameter.
For instance, I have a 62px width image for the insert image icon.

insertimage: [ "Insert/Modify Image", ["addimage.gif",0,0,62], false, function(e) { e.execCommand("insertimage"); } ],

dragonal

New member

From: Riverside, CA

Registered: 2008-07-14

Posts: 2

Website

Re: Toolbar Button Width / Caption

Here's the code for the newest version (0.95) I noticed the developers removed the width attribute in btnList in the latest version, so you will have to make some changes to the XinhaCore.js code.

Step 1:
If you are using a skin file, you will need to edit the skin.css. Otherwise edit the Xinha.css file. (same as before)

.htmlarea .toolbar .button
{
  /* width:18px; */
  height:18px;
  padding:1px 2px 2px 1px ;
  border: solid #F1F1F1;
  border-width:1px;
}

Step 2:
In XinhaCore.js, I used the same attributes in btnList as my previous post (the 4th width value is optional with the coding I added)

 
insertimage: [ "Insert/Modify Image", ["addimage.gif",0,0,63], false, function(e) { e.execCommand("insertimage"); } ],

In the function(imgDef,doc), approx line 1950 replace the i_contain.style.width = "18px" line with

  // Dragonal -- custom width of container object
  if (imgDef[3]!=null)
  {
    i_contain.style.width = imgDef[3]+"px";  
  }  
  else
  {
    i_contain.style.width = "18px";
  }

Around line 2000:

        img.style.top  = imgDef[2] ? ('-' + (18 * (imgDef[2] + 1)) + 'px') : '-18px';
        img.style.left = imgDef[1] ? ('-' + (18 * (imgDef[1] + 1)) + 'px') : '-18px';

replace this section with

    // Dragonal -- Custom image width 
    if (imgDef[3]!=null)
    {
        img.style.width = imgDef[3]+"px";
        img.style.top  = "0";
        img.style.left =  "0";  
    }
    else
    {
        img.style.top  = imgDef[2] ? ('-' + (18 * (imgDef[2] + 1)) + 'px') : '-18px';
        img.style.left = imgDef[1] ? ('-' + (18 * (imgDef[1] + 1)) + 'px') : '-18px';
    }

Last edited by dragonal (2008-07-14 15:38:39)