H2O 4.0 includes a new control called "Form Style" that is used to alter the styling of your form.  H2O renders the HTML styling code you enter into the Control Script of this control to the form cell you are applying the style to.  To control which cell to apply the style to, simply drag and drop the control into the desired cell using the Forms Layout Designer.  When you select a Form Style control for your form, the Control Script Options will show the Form Styling details as shown in the image below. 

The H2O Script format for this control is: OPTION|STYLE

Note the Pipe (Also known as a vertical bar, the pipe is a computer keyboard key ( | ) ) that seperates the options from your style. The options available for this are below:

  • A = Copy style vertically and horizontally
  • V = Copy style vertically
  • H = Copy style horizontally
  • S = Use style for current cell only

Take a look at the "Styling H2O" form available in the downloads while reviewing this information.  It is the form created with the screen shots displayed. 

For the Styling H2O form I added a text box, DNN Users List control and two Label controls with a Form Style control to start.  I then added (H|style="border-bottom: .5pt solid windowtext;") to the Control Script textbox of the Form Style control.  This script will display a bar at the bottom of the cell for each cell in the row the Form Style control is placed in.  Take a look a the first image below to see what this looks like.  The following examples show what the form looks like when rendering in your DotNetNuke web site by altering the options.  The script used is displayed below the image.

H|style="border-bottom: .5pt solid windowtext;" S|style="border-bottom: .5pt solid windowtext;"
V|style="border-bottom: .5pt solid windowtext;" A|style="border-bottom: .5pt solid windowtext;"
The style script you use can be anything that is valid for an HTML Table cell.  To demonstrate this, I changed the script to (H|style="border-bottom: .5pt solid windowtext;" background="http://www.onyaktech.com/menubar3_bg.gif").  I also added two additional Label controls and placed them at the top of the form using the Forms Designer. The first Label was set to display the text "Welcome..." and the second label contains a few empty spaces and was placed in the last column.  The reason for this is to make the bottom border appear.  With the style used, this border will only appear if content exists in the cell.   When rendered, the form looks like the image to the right.

You can also merge two cells into one by using the ColSpan keywork.  Ex:  H|colspan="2".  For the last example, I'll use the Forms Designer to drag and drop the style control to the second row.  The result is shown below:



Copyright 2009 by OnyakTech
Privacy StatementTerms Of Use