[Tut] How to Add your MyCodes to the Editor Bar?

[shinekwt]

Post HTML Suite Plugin's DEMO

*** If you are looking for an affordable hosting with great support quality, click here! ***

How to Add your MyCodes to the Editor Bar

Hi guys, this is the easiest way to add your mycodes (like hide tab, youtub tab etc) to the message toolbar, let's go:

We will need to edit these files:

- /jscripts/editor.js
- /jscripts/editor_themes/Office_2007/stylesheet.css

Step #1

Open the editor.js in notepad and search for:

Quote:[Highlight]this.options.lang.title_php}

and add a colon [,] after that. You will get like this:

Quote:[Highlight]this.options.lang.title_php},

Next, add this template line below the entire line:

Quote:[Highlight]{type: 'button', name: 'name', sprite: 'sprite', insert: 'code', title: 'alt text or tittle'}

And fill it with the following:

- name = the name of your personal code (isn't neccesary to be equal as your mybb name in the list)
- sprite = the sprite code (used to modify the css sheet)
- code = the code that will wrap the text. ([i'm talking about this] [/i'm talking about this])
- title = the alt text that will apear if you put the mouse over the picture

for example, to put a Hide code:

Quote:[Highlight]{type: 'button', name: 'hide', sprite: 'hide', insert: 'hide', title: 'Hide the Download Links'}

Save and upload the file.

Step #2

Open the stylesheet.css in Notepad and in the end of the text add these:

Quote:[Highlight].messageEditor .toolbar_button .toolbar_sprite_spritename {
background: url(images/sprite+ext) no-repeat;
}

and replace:

spritename = the sprite name that we defined in the editor code, remember? ( sprite: 'spoiler')
sprite+ext = your sprite plus extension.

And, for the hide for example:

Quote:[Highlight].messageEditor .toolbar_button .toolbar_sprite_hide {
background: url(images/hide.gif) no-repeat;
}

Save and upload.

Step #3

Well, finally, get your icon and upload into the folder: /jscripts/editor_themes/Office_2007/images/
____

Well, with this method, we can get a nicely custom text toolbar, this is my result:



Additional Notes:
To activate the office 2007 editor, Go to
Templates & Style > Select your theme name > Edit Theme Properties > Select the Editor Style