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.<\/p>\n
Update 2012-05-08<\/strong>: There is a usable-with-the-patch-command patch available<\/a> that incorporates all of these changes and more. See the README at the base of the github repo<\/a> for more details on what’s in that patch.\n<\/p><\/blockquote>\n
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:<\/p>\n
\r\nbody {\r\n background: #FFF;\r\n font-family: 'Courier New', 'Trebuchet MS', Arial, Verdana, sans-serif;\r\n font-size: small;\r\n margin: 0px;\r\n padding: 0px;\r\n}\r\n<\/pre>\nThe “light editing” I did was to push ‘Courier New’ onto the front of the font-family. \u00a0I also changed it so that the edit window background would be white instead of grey by changing the background color.<\/p>\n
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:<\/p>\n
\r\n\/\/ Set our own custom css (sets white background and mono-space font)\r\nFCKConfig.EditorAreaCSS = FCKConfig.BasePath + '..\/..\/..\/custom_textarea.css';\r\n<\/pre>\nThis did accomplish the task that I had set for myself, which was changing the default font displayed by FCKEditor when editing text. \u00a0However, 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. \u00a0It turns out that this didn’t work though. \u00a0I can’t decide if this is a bug in TestLink or not, but these defaults don’t get applied when the text is displayed.<\/p>\n
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. \u00a0Font editing works, but you have to explicitly change the font option while editing to make it work.<\/p>\n
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. \u00a0In 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.<\/p>\n
To achieve this I first added two new classes to gui\/themes\/default\/css\/custom.css. \u00a0This 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.<\/p>\n
\r\ndiv.c_actions, div.c_expected_results {\r\n font-family: 'Courier New', Courier, monospace;\r\n}\r\n<\/pre>\nThen I added the class to inc_steps.tpl and tcStepEdit.tpl.<\/p>\n
\r\n--- inc_steps.tpl.dist 2011-08-22 21:08:21.000000000 -0500\r\n+++ inc_steps.tpl 2011-09-26 09:42:25.000000000 -0500\r\n@@ -53,10 +53,10 @@\r\n size="{#STEP_NUMBER_SIZE#}"\r\n maxlength="{#STEP_NUMBER_MAXLEN#}">\r\n {include file="error_icon.tpl" field="step_number"}\r\n <\/span>{$step_info.step_number}\r\n <\/td>\r\n- <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {\/if}>{$step_info.actions}<\/td>\r\n- <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {\/if}>{$step_info.expected_results}<\/td>\r\n+ <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {\/if}><div class="c_actions">{$step_info.actions}<\/div><\/td>\r\n+ <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {\/if}><div class="c_expected_results">{$step_info.expected_results}<\/div><\/td>\r\n {if $session['testprojectOptions']->automationEnabled}\r\n <td {if $edit_enabled} style="cursor:pointer;" onclick="launchEditStep({$step_info.id})" {\/if}>{$gui->execution_types[$step_info.execution_type]}<\/td>\r\n {\/if}\r\n<\/pre>\n\r\n--- tcStepEdit.tpl.dist 2011-09-22 10:27:23.000000000 -0500\r\n+++ tcStepEdit.tpl 2011-09-26 09:43:47.000000000 -0500\r\n@@ -211,8 +211,8 @@\r\n {\/if}\r\n {else}\r\n <td style="text-align:left;"><a href="{$hrefEditStep}{$step_info.id}">{$step_info.step_number}<\/a><\/td>\r\n- <td ><a href="{$hrefEditStep}{$step_info.id}">{$step_info.actions}<\/a><\/td>\r\n- <td ><a href="{$hrefEditStep}{$step_info.id}">{$step_info.expected_results}<\/a><\/td>\r\n+ <td ><a href="{$hrefEditStep}{$step_info.id}"><div class="c_actions">{$step_info.actions}<\/div><\/a><\/td>\r\n+ <td ><a href="{$hrefEditStep}{$step_info.id}"><div class="c_expected_results">{$step_info.expected_results}<\/div><\/a><\/td>\r\n {if $session['testprojectOptions']->automationEnabled}\r\n <td><a href="{$hrefEditStep}{$step_info.id}">{$gui->execution_types[$step_info.execution_type]}<\/a><\/td>\r\n {\/if}\r\n<\/pre>\nThese aren’t exactly what my diffs look like since I removed the links from the display text<\/a> last week, but I believe it will work.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading