Talk:Toolbar customization

Problem with adding a new section

Hi, Adding buttons work fine, but adding a sections does not work that well. If you add a section, open it and reload the page the textarea will not be fully visible. Is there some easy way to refresh it's height?

Code used:

hookEvent( 'load', function(){
	// To add a toolbar section:
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'sections': {
			'emoticons': {
				'type': 'toolbar', // Can also be 'booklet'
				'label': 'Emoticons'
				// or 'labelMsg': 'section-emoticons-label' for a localized label
			}
		}
	} );


	// To add a group to an existing toolbar section:
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'emoticons',
	'groups': {
			'faces': {
				'label': 'Faces' // or use labelMsg for a localized label, see above
			}
		}
	} );

	// To add a button to an existing toolbar group:
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'emoticons',
		'group': 'faces',
		'tools': {
			'smile': {
				label: 'Smile!', // or use labelMsg for a localized label, see above
				type: 'button',
				icon: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png',
				action: {
					type: 'encapsulate',
					options: {
						pre: ":)" // text to be inserted
					}
				}
			}
		}
	} );
});

Is this a bug? Or maybe I'm doing something wrong. --Nux 02:48, 21 April 2010 (UTC)

Switching from Monobook

If you're just switching from Monobook and looking for a way to keep your mwCustomEditButtonse without too much hassle, see insertVectorButtons.js. This small script almost does it for you by translating the old way to the new way. Ofcourse if you're up for an adventure and/or want to use the more advanced feautures of the new toolbar you'll have to learn the native syntax (see examples here). If you have any questions about it, please let me know on my meta talkpage or the scripts talkpage. --Krinkle / Krinkle 23:13, 14 June 2010 (UTC)

Moving a button

1. How can I move a button from the "advanced" menu to main menu?
2. How can I cancel an empty menu?
3. How can I create a custom menu based on the "special characters" menu? i.e. I'd like to add a new menu named "Codes & templates" where it'll have a submenu: Titles, Templates, Maintenance. Each submene will have a list of codes/templated. for example, Titles will have "==References==\n<references />" and "==See also==\n* item\n* item", while Templates menu will have {{Quote|text}} and {{Otheruses|foo|bar|link}} etc.

Yonidebest 06:07, 23 June 2010 (UTC)

BTW, the currect booklet example gives an error. 213.8.121.230 18:07, 24 June 2010 (UTC)

Moving buttons is not supported very well yet. We do intend to support this in the future. As a workaround, you can look up the button's definition here, add it to the main menu and remove it from the advanced menu.

What exactly do you mean by "canceling" an empty menu? Removing it? Mayve you can try to avoid creating empty menus in the first place?

You can create a special characters menu by creating a booklet, then creating one or more special characters pages in it (first and third booklet examples). These examples work just fine for me, what's the error you get? --Catrope 19:29, 25 June 2010 (UTC)

Re removing an empty group: If all the "Advanced" icons are moved to the main toolbar, the "Advanced" menu will be empty and thus need to be removed too.

The error I receive is: page is not defined, file: [1], row 314, using FF3.5.6. Thank you, Yonidebest 20:21, 25 June 2010 (UTC)

Also, how do I add a vertical line between the groups? I created a new group (with no label) at the end of the advanced section, but there is no line to separate the groups. Yonidebest 20:27, 25 June 2010 (UTC)

Icons for added toolbar buttons

If custom buttons are added to Vector's enhanced toolbar, which icons should they use?

Until bug 23624 is resolved there's no easy way to configure buttons on the enhanced toolbar. The JS wizards of the Hebrew Wikipedia added several buttons to the toolbar - Strikeout (<s></s>) near Bold and Italic, and in the advanced part:

• add formula - <math> n^2 (example)</math>
• text color - <span style="color: ColorName;">colored text</span>
• underline - <u>underlined text</u>
• comment - <!-- hidden comment -->
• center - <center>centered text</center>
• left-to-right text - <div style="direction: ltr;">left-to-right text</div>
• source code - <source lang="text">source code</source>
• tab - adds a tab character
• &nbsp;
• &rlm; (especially useful for RTL projects, although somewhat problematic in itself)

(I actually disagree with some of the additions, but that's not the point of this message.)

The icons that were used for these added buttons were either taken from Monobook or drawn ad hoc.

• Is there a repository of icons for extra buttons?
• If we create some new and better Vector-style icons by ourselves, where should we share them, so all language projects will be able to reuse them easily?
• Is there a style guide for drawing Vector icons? --Amir E. Aharoni 08:44, 15 July 2010 (UTC)

I'd upload them to commons. Many old style buttons are already there, although a new category "Buttons for Vector skin" or so may be desirable. If you create new buttons, you should dual license them GPL to make sure there's no problem in potentially shipping them with mediawiki in the future. Platonides 00:04, 20 July 2010 (UTC)

I had asked the he.wiki graphics guys to create new icons, and they did [2], but as it turns out, it needs to be done with transparent background, as there are diff background colors in the toolbar.

Re gallery, there already is a page for toolbar icons in commons: MediaWiki_edit_toolbar. Obviously more can be created and added to the page. 213.8.121.230 11:11, 20 July 2010 (UTC)

Please update

Please put more information on here. We were promised more information would be available but doesn't look updated at all. If not here, where else are we to turn to for help? :(