Changing the appearance of the SalesLogix horizontal Separator Web Control

The SalesLogix Web client offers a SalesLogix control called a Horizontal Separator that draws a horizontal line in a cell on a quick form.  The control can also have a Caption property defined which places a label at the start of the horizontal separator.

The control, when loaded onto a deployed page looks like this:

Now if we look at the actual deployed page we can see this is rendered by the browser like so:

<table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″>
<colgroup>
<col>
<col width=”100%”>
</colgroup>
<tbody>
<tr>
<td nowrap=””>
<span id=”ctl00_MainContent_ContactDetails_QFHorizontalSeparator”>Separator</span>
</td>
<td>
<hr>
</td>
</tr>
</tbody>
</table>

So the control is actually rendering out as an imbedded table control with 2 cells on a single line, one cell is a Span with an embedded text string and the other cell is a HTML hr tag.  So we can see the controls get rendered without any style classes or anything. 

So how can we change the appearance of the text?  Well since the caption defined on the quick form is basically just injected onto the deployed page on the browser we can change the Caption from being just a plain string, to having HTML markup surrounding our string.  I prefer to use CSS styles instead of older markups to stay compatible with HTML 4.01 Strict / XHTML 1.0 Strict protocols.  here is a sample of what we can change out Horizontal Controls Caption property to:

<p style=’font-size:20px;font-weight:bold;color:red;’>Separator</p>

Now this will get rendered on the page like so:

There you have it!  A rather simple way of customizing the look of these separators.