MyBB Source

everyBB - The forum owners community

4,000 Members! | Small Policy Change

Latest Releases: Valid Referrals - Bonus - Mark Thread Read

 
 
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
MyBux: 4
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


Svizy
Support Team

Support

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

/moved to correct section

Svizy - MyBBSource Support Team
07-11-2010 09:05 AM
coder
Member


Posts: 60
Joined: Apr 2010
Reputation: 0
MyBux: 2
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
 





Web Design | Web Design Jobs