How to use extended border styling (rounded corners)?

Submitted by Hyfinity Support on Wed, 02/09/2011 - 17:40

The extended border styling option is used to provide more impressive border effects on groups within a page. This is done by generating extra markup for the group that can be styled independently. This option is only available for groups that have a Display Method of 'Vertical' or 'Horizontal', and which have the 'Force Table Layout' option turned off. If your required grouped does not meet these constraints, you can easily wrap it in another group and apply the extended border styling to this new group.

http://www.hyfinity.net/wmforum/attachment.php?aid=18

The extra markup generated by the extended border styling option is a set of nested DIVs as shown below, each with a different class applied. These represent each of the 4 edges of the group, and each of the four corners.


<div class="corners" id="test_group"> <!-- This is the actual group container that the specified styling etc. gets applied to -->
  <div class="t">
    <div class="b">
      <div class="l">
        <div class="r">
          <div class="tl">
            <div class="tr">
              <div class="bl">
                <div class="br">
                  <div class="content">
                    <!-- The content of the group will be placed here -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The 'corners' CSS styling used to produce the example shown above is given below. In this case the top and left edges have not been given specific styling.


.corners
{
background : #e5e5e9;
}

.corners .content
{
padding : 20px;
}

.corners .tl
{
background-image : url(../images/corners/tlcorner.gif);
background-position : top left;
background-repeat : no-repeat;
}

.corners .tr
{
background-image : url(../images/corners/trcorner.gif);
background-position : top right;
background-repeat : no-repeat;
}

.corners .bl
{
background-image : url(../images/corners/blcorner.gif);
background-position : bottom left;
background-repeat : no-repeat;
}

.corners .br
{
background-image : url(../images/corners/brcorner.gif);
background-position : bottom right;
background-repeat : no-repeat;
}

.corners .b
{
background-image : url(../images/corners/bedge.gif);
background-position : bottom;
background-repeat : repeat-x;
}

.corners .r
{
background-image : url(../images/corners/redge.gif);
background-position : right;
background-repeat : repeat-y;
}

This example CSS and the associated images are provided by default in each new project. These images can be found within the webapp\images\corners directory within the repository for your project.

By setting up a number of different sets of styling, each using a different class name (instead of 'corners') it becomes easy to apply different borders to different groups simply by entering the appropriate class name in the Group Styling (Class) field within FormMaker.

Attachment

rounded_corners.png