Getting more room in UBB.threads style editor

This is probably one of the first things I do on a new Threads installation, because I like to see more of the style information when I’m in the style editor.

Take a look below at the image and see how much horizontal realestate is wasted (click the image for full size):

With the increasing popularity of wider monitors, it’s only natural to want to use the additional space, so what we’re going to do here is modify one file (templates/admin/editstyle.tmpl) and make the textarea boxes larger.

As is with any modification, you should backup your files before doing anything. I run a local development server, so it serves as my backup method. I simply have two copies of the site on the local hard drive. The first one is the pristine, out of the box latest UBB.threads install and the second one is the one I play with.

When I’m satisfied with any changes, I upload to the online site to genuflect at the changes :D

This change is really quite simple and the difference and benefit will be obvious too. We’re going to change the textarea cols and rows numbers to larger values. Here’s an example of the first line of code we want to change:

<textarea cols="30" rows="8" name="{$data['class']}"  onfocus="updateHelp('$key')">{$style_vars[$data['class']]}</textarea><br />

The cols=”30″ and rows=”8″ is our target. I chose 60 and 10, respectively for the cols and rows values.

You’ll find a total of six occurrences of ‘<textarea cols=”xx” rows=”yy”‘ in the file, so I will just list the resulting values in order of their occurrence. You can copy the code to your clipboard by hovering over the syntax highlighted area and using the pop over toolbar that appears.

This is what they are before the change:

<textarea cols="30" rows="8" name="{$data['class']}"  onfocus="updateHelp('$key')">{$style_vars[$data['class']]}</textarea><br />
<textarea name="{$data['class']} a:link" rows="3" cols="20">{$style_vars["{$data['class']} a:link"]}</textarea>
<textarea name="{$data['class']} a:visited" rows="3" cols="20">{$style_vars["{$data['class']} a:visited"]}</textarea>
<textarea name="{$data['class']} a:active" rows="3" cols="20">{$style_vars["{$data['class']} a:active"]}</textarea>
<textarea name="{$data['class']} a:hover" rows="3" cols="20">{$style_vars["{$data['class']} a:hover"]}</textarea>
<textarea name="extra_css" cols="35" rows="15">{$style_vars['extra_css']}</textarea><br />

and here is what I changed them to:

<textarea cols="60" rows="10" name="{$data['class']}"  onfocus="updateHelp('$key')">{$style_vars[$data['class']]}</textarea><br />
<textarea name="{$data['class']} a:link" rows="5" cols="50">{$style_vars["{$data['class']} a:link"]}</textarea>
<textarea name="{$data['class']} a:visited" rows="5" cols="50">{$style_vars["{$data['class']} a:visited"]}</textarea>
<textarea name="{$data['class']} a:active" rows="5" cols="50">{$style_vars["{$data['class']} a:active"]}</textarea>
<textarea name="{$data['class']} a:hover" rows="5" cols="50">{$style_vars["{$data['class']} a:hover"]}</textarea>
<textarea name="extra_css" cols="60" rows="20">{$style_vars['extra_css']}</textarea><br />

Save your changes, upload to your site and enjoy the new headroom!

You can play around with the ‘cols’ (horizontal) and ‘rows’ (vertical) numbers to suit your needs and resolution and keep in mind that only admins see this, so you aren’t doing some sort of global change that might affect all your users. It’s just you!

Extra credit: If you want to go further, investigate squeezing the style preview more to allow for even MORE space for the textareas on the left! I might add to this article later on, if no one supplies the answer in the comments section!

Muttley approves :mutt: