Thursday, July 17, 2008

Genie: Using hanging indentation for TipContent in MyEditScreens.config

The How To tips on the Loans Check Items In and Check Items Out pages use numbered steps. Changing the steps to use hanging indentation is as simple as using an HTML ordered list (<ol>). However, by default an ordered list has inherent indentation that causes the tips to wrap more than necessary.

I used a style= in my <ol> tag to specify a margin-left value with less indentation. See the screenshot and sample MyEditScreens.config snippet below.



<EditTips ShowIcon="true" Title="How To Check Out" ImageURL="Images/xp_bulb.gif"
TipContent="&lt;ol style=&quot;margin-left:25px;&quot;&gt;&lt;li&gt;&lt;p&gt;Enter the borrower name or number.&lt;/li&gt;&lt;br&gt;&lt;br&gt;
&lt;li&gt;Type or scan item bar codes into the Items box, each on a separate line. &lt;/li&gt;&lt;br&gt;&lt;br&gt;
&lt;li&gt;Select a loan term from the Term of Loan drop-down list.&lt;/li&gt;&lt;br&gt;&lt;br&gt;
&lt;li&gt;Click the &lt;b&gt;Check Out&lt;/b&gt; button.&lt;/li&gt;&lt;/ol&gt;"/>

Note: I used two <br> instead of <p>stuff</p> because it resulted in less vertical space between steps, and was easier than tracking down the line-spacing style for the <p> tag.

No comments: