Setting Default Font in TestLink

When I first set up TestLink, one of my first actions was to figure out how to force FCKEditor to use a monospace font. Much of our testing takes place in terminals using a monospace font, and I thought it would be easier to engage with the expected results if they were also in a monospace font. This was a fairly easy thing to do using the TestLink and FCKEditor docs, but since I haven’t written it down before, here are the steps using a monospace font by default in TestLink using FCKEditor.

Update 2012-05-08: There is a usable-with-the-patch-command patch available that incorporates all of these changes and more. See the README at the base of the github repo for more details on what’s in that patch.

First, create a file called custom_textarea.css. I placed this in the root of my install, which probably wasn’t the best place for it. The contents are a lightly edited copy of body class from gui/themes/default/css/testlink.css:

body {
    background:     #FFF;
    font-family:    'Courier New', 'Trebuchet MS', Arial, Verdana, sans-serif;
    font-size:      small;
    margin:         0px;
    padding:        0px;
}

The “light editing” I did was to push ‘Courier New’ onto the front of the font-family. I also changed it so that the edit window background would be white instead of grey by changing the background color.

Then I told FCKEditor to use this CSS as the style for the edit boxes by adding the following line to cfg/tl_fckeditor_config.js:

// Set our own custom css (sets white background and mono-space font)
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + '../../../custom_textarea.css';

This did accomplish the task that I had set for myself, which was changing the default font displayed by FCKEditor when editing text. However, I also assumed that it would, when the text in the editor was saved, cause that saved text to be displayed in a monospace font. It turns out that this didn’t work though. I can’t decide if this is a bug in TestLink or not, but these defaults don’t get applied when the text is displayed.

I spent quite a bit of time looking for the correct knob to fix this in the TestLink docs and the FCKEditor docs, and I couldn’t find one. Font editing works, but you have to explicitly change the font option while editing to make it work.

What I ended up doing was to edit the two Smarty templates used for displaying steps so that each action and step were wrapped in a div I could control, and then changed the style for that div so that the default font was monospaced. In a way this was actually a better solution than a general FCKEditor knob because it allowed me to just change the default font in action/expected results, and not other text, like Summary, that might look better as a variable-width font.

To achieve this I first added two new classes to gui/themes/default/css/custom.css. This could have been done with just one class, but I liked the idea of being able to change the style of actions and results independently in the future.

div.c_actions, div.c_expected_results {
    font-family: 'Courier New', Courier, monospace;
}

Then I added the class to inc_steps.tpl and tcStepEdit.tpl.

--- inc_steps.tpl.dist  2011-08-22 21:08:21.000000000 -0500
+++ inc_steps.tpl       2011-09-26 09:42:25.000000000 -0500
@@ -53,10 +53,10 @@
                                size="{#STEP_NUMBER_SIZE#}"
                                maxlength="{#STEP_NUMBER_MAXLEN#}">
                        {include file="error_icon.tpl" field="step_number"}
                        </span>{$step_info.step_number}
                </td>
-               <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {/if}>{$step_info.actions}</td>
-               <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {/if}>{$step_info.expected_results}</td>
+               <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {/if}><div class="c_actions">{$step_info.actions}</div></td>
+               <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {/if}><div class="c_expected_results">{$step_info.expected_results}</div></td>
                {if $session['testprojectOptions']->automationEnabled}
                <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {/if}>{$gui->execution_types[$step_info.execution_type]}</td>
                {/if}

--- tcStepEdit.tpl.dist 2011-09-22 10:27:23.000000000 -0500
+++ tcStepEdit.tpl      2011-09-26 09:43:47.000000000 -0500
@@ -211,8 +211,8 @@
        {/if}
       {else}
         <td style="text-align:left;"><a href="{$hrefEditStep}{$step_info.id}">{$step_info.step_number}</a></td>
-               <td ><a href="{$hrefEditStep}{$step_info.id}">{$step_info.actions}</a></td>
-               <td ><a href="{$hrefEditStep}{$step_info.id}">{$step_info.expected_results}</a></td>
+               <td ><a href="{$hrefEditStep}{$step_info.id}"><div class="c_actions">{$step_info.actions}</div></a></td>
+               <td ><a href="{$hrefEditStep}{$step_info.id}"><div class="c_expected_results">{$step_info.expected_results}</div></a></td>
         {if $session['testprojectOptions']->automationEnabled}
                  <td><a href="{$hrefEditStep}{$step_info.id}">{$gui->execution_types[$step_info.execution_type]}</a></td>
                {/if}

These aren’t exactly what my diffs look like since I removed the links from the display text last week, but I believe it will work.

#! jetmore

Setting Default Font in TestLink

Leave a Reply Cancel reply