Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5

[TUT] How to edit the post reply / new thread box
24-10-2010, 02:57 AM (This post was last modified: 24-10-2010 03:01 AM by howtothings.)
Post: #1
[TUT] How to edit the post reply / new thread box
[TUT] How to edit the post reply / new thread box

This is a tutorial on how to edit the post reply box, the box that you type in when you make a post. Also known as the messageEditor or editor.

You're going to need to edit the following files
  • jscripts/editor.js
  • inc/languages/english/global.lang.pgp
  • inc/functions.php

I'm going to show you how to add a "spoiler" button and a drop down menu.

Spoiler button

1) Open editor.js (You can use a program like gedit or notepad ++)

2) Search for the following code.

[code=javascript]{type: 'button', name: 'align_justify', sprite: 'align_justify', insert: 'align', extra: 'justify', title: this.options.lang.title_justify},[/code]
And underneath it, enter the following code.

[code=javascript]{type: 'separator'},
{type: 'button', name: 'spoiler', insert: 'spoiler', image: 'spoiler.png', title: 'Insert spoiler tags'}[/code]
3) Save editor.js then upload it to your server.

4) You're also going to have to create an image for the spoiler button and upload it to /jscripts/editor_themes/default/images

Name the image spoiler.png, the dimensions are 23x22 pixels.

You should now have a fully functioning spoiler button.

Now, onto the harder part.

Adding a dropdown menu

1) open editor.js

2) Search for

[code=javascript]{type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},[/code]
3) Underneath it, add

[code=javascript]{type: 'dropdown', name: 'geshi', insert: 'code', title: this.options.lang.geshi, options: this.geshi},[/code]
* insert: 'code' is what will be inserted when you click later on.
* Also, Where mine says "geshi" you can put whatever you want but remember to name it the same thing in the next step.

4) Now, search for

[code=javascript]// An array of font sizes to be shown.[/code]
Underneath that, make your own set. Mine looks like this:

// An array of geshi / programming syntax to be shown.
this.geshi = new Object();
this.geshi["asm"] = "asm";[/code]
Remember what you put for geshi before? that relates to this, make sure you've named them the same!

// is a comment
this.geshi["asm"] is what will be displayed when you click the writing. ( = "asm";)

Outcome = [code= asm] [/code]

You can add as many as you want here, just keep the same format.

5) Save and upload editor.js

6) Open global.lang.php

7) Search for

[code=php]$l['editor_size'] = "Text Size";[/code]
8) Below it, enter the following

[code=php]$l['editor_geshi'] = "Syntax";[/code]
Syntax is the writing that will appear by default in the box, when nothing has been chosen.

9) Save and upload global.lang.php

10) Open functions.php

11) Search for

12) Underneath it, add

13) Save and upload functions.php

You should now have a fully function drop down box.

The final result

[Image: replybox9.png]

[Image: replybox6.png]

[Image: engrish25.png]
21-08-2011, 12:03 AM
Post: #2
RE: [TUT] How to edit the post reply / new thread box
I've just referenced this thread after the upgrade replaced my customisations and realised I've missed a bit out that goes with this! (atleast for me). Here's how to change the colour of the writing in the drop downs.

Open up:

.messageEditor .toolbar_dropdown .editor_dropdown_label
For the main text eg. "Font", "Text Size", and "Syntax". Add desired CSS. (color: #000000Wink

.messageEditor .editor_dropdown_menu
For the colour of the items within the drop down.

[Image: engrish25.png]

Forum Jump:

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