Latest News:
Latest Mods: Latest Tutorials:


 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Add your MyCodes to the Bar.
Author Message
mephistox
Junior Member


Posts: 21
Joined: Jun 2010
Reputation: 0
Post: #1
Add your MyCodes to the Bar.
Hi, this is the easiest way to add your mycodes to the message toolbar, let's go:

We will need:

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

Step #1

Go to the editor.js and search for:

Quote:this.options.lang.title_php}

and add a colon after that. You will get something like this:

Quote:this.options.lang.title_php},

Next, add this template line below the entire line:

Code:
{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 spoiler code:

Code:
{type: 'button', name: 'spoiler', sprite: 'spoiler', insert: 'spoiler', title: 'Hide the text in a box'}

Save and upload the file.


Step #2

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

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

and reeplace:

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

And, for the spoiler for example:

Code:
.messageEditor .toolbar_button .toolbar_sprite_spoiler {
background: url(images/spoiler.gif) no-repeat;
}

Save and upload.


Step #3

Well, finally, get your sprite 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:

[Image: dfdfdb.png]


Have fun and enjoy!!
(This post was last modified: 07-10-2010, 10:37 AM by mephistox)
07-10-2010, 10:32 AM


Andraž Rihtar
Theme designer


Posts: 1,901
Joined: Aug 2009
Reputation: 8
Post: #2
RE: Add your MyCodes to the Bar.
Wonderful tutorial!

/moved to correct section

Andraž Rihtar - Ex-Support Team Member
07-11-2010, 09:05 AM
coder
Member


Posts: 92
Joined: Apr 2010
Reputation: 1
Post: #3
RE: Add your MyCodes to the Bar.
What do we actuall put in place for the "code" (- code = the code that will wrap the text. ([i'm talking about this] [/i'm talking about this])

This >>> [test][/test] ?
07-18-2010, 08:19 AM
asgard
Premium User


Posts: 5
Joined: Aug 2010
Reputation: 0
Post: #4
RE: Add your MyCodes to the Bar.
thank you I can try now to do it
08-18-2010, 02:33 AM
Don+
Member


Posts: 56
Joined: Aug 2010
Reputation: 0
Post: #5
RE: Add your MyCodes to the Bar.
Nice tutorial, Thanks
08-21-2010, 10:04 AM
DinoMGD
Junior Member


Posts: 6
Joined: Mar 2011
Reputation: 0
Post: #6
RE: Add your MyCodes to the Bar.
Thanks! (:
03-23-2011, 10:33 AM
 




User(s) browsing this thread: 2 Guest(s)