MyBB Community Forums

Full Version: How to change the Width/Height of your text editor (Template edit) (Easy)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
OK so im going to show you how to change the width of your text editor with a simple template edit you will not need access to your web server however you will need access to your admin control panel and your sites themes templates.


Step 1

Go to your Admin CP, then Templates & Style > Templates > Your Themes Templates.

Step 2

Now the templates we will need to open are:

New Thread Templates > newthread
New Reply Templates > newreply
Private Messaging Templates > private_send
Edit Post Templates > editpost
User Control Panel Templates > usercp_editsig
Calendar Templates > calendar_addevent
Calendar Templates > calendar_editevent
Moderator Control Panel Templates > modcp_editprofile


Step 3

In each of the templates we have open find this code:
<textarea name="message" id="message" rows="20" cols="70" tabindex="3">{$message}</textarea>

Step 4

Now to change the width of the editor change the number "70" of this cols="70" to your desired number if you choose to increase the number your width of the editor will increase and if you decrease the number the width of the editor will decrease.

Now to change the height of the editor change the number "20" of this rows="20" to your desired number if you choose to increase the number your height of the editor will increase and if you decrease the number the height of the editor will decrease.

Now save your template!

Step 5

Now your text editor width and height will have changed please repeat Step 4 for all the templates listed in Step 2 Please note that if you change theme you will have to do this again as it is a template edit for the theme and not the actual editor.

Extra Steps:
(2012-10-30, 08:53 PM)tamnguyen949 Wrote: [ -> ]with tooltip Smile

find:
<input type="text" class="textbox" name="subject"     size="40" maxlength="85" value="{$subject}" tabindex="1" />

replace:
<input name="subject" type="text" onKeyDown="limitText(this.form.subject,this.form.countdown,85);" 
onKeyUp="limitText(this.form.subject,this.form.countdown,85);" size="60" maxlength="85" value="{$subject}">
<font size="1">
You have <input readonly type="text" name="countdown" size="3" value="85"> characters left.</font>
</form>
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>
Guess 400+ of you used this tutorial and never commented thanks a bunch.
No credit to effone for this? Huh
effone? what for?
I recall he gave you the code on IcyBoards when you asked for support.
Proof? i think you will find i found this and told him about it.
Guys come on. Its a pretty basic tutorial. Relax.
Excellent Tutorial..Thanx
with tooltip Smile

find:
<input type="text" class="textbox" name="subject"     size="40" maxlength="85" value="{$subject}" tabindex="1" />

replace:
<input name="subject" type="text" onKeyDown="limitText(this.form.subject,this.form.countdown,85);" 
onKeyUp="limitText(this.form.subject,this.form.countdown,85);" size="60" maxlength="85" value="{$subject}">
<font size="1">
You have <input readonly type="text" name="countdown" size="3" value="85"> characters left.</font>
</form>
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>
Pages: 1 2