[TUT] How to edit the post reply / new thread box - Printable Version +- howtothings.co.uk (https://www.howtothings.co.uk) +-- Forum: Computing (https://www.howtothings.co.uk/forumdisplay.php?fid=4) +--- Forum: Website Development, Implementation and General Webmaster Support (https://www.howtothings.co.uk/forumdisplay.php?fid=9) +--- Thread: [TUT] How to edit the post reply / new thread box (/showthread.php?tid=469)

[TUT] How to edit the post reply / new thread box - Mark - 24-10-2010 [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: [code=javascript] // 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 [code=php]"editor_size",[/code] 12) Underneath it, add [code=php]"editor_geshi",[/code] 13) Save and upload functions.php You should now have a fully function drop down box. The final result RE: [TUT] How to edit the post reply / new thread box - Mark - 21-08-2011 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: ./jscripts/editor_themes/default/stylesheet.css Find .messageEditor .toolbar_dropdown .editor_dropdown_label For the main text eg. "Font", "Text Size", and "Syntax". Add desired CSS. (color: #000000 Find .messageEditor .editor_dropdown_menu For the colour of the items within the drop down.