When designing web pages there is often a key consideration regarding browser compliance. There are generally two main choices:
WebMaker can provide both approaches for some features such as "Rounded Box". The "Progressive Enhancement" approach is a great way to slowly phase in more advanced HTML5 and CSS3 capabilities into your web applications. The older browsers simply lose the rounding and shadow effects.
Progressive Enhancement Approach
Rounded Box / Corners
With CSS3 you can apply much simplier styling that does not require additional HTML elements to create attractive visual features. It is often a requirement to get a group of fields to appear within a "rounded box". To add this styling effect simply add the CSS style below to your CSS file attached to the application or page, and then append the style name "roundedBox" to the Group Style on the Field Details screen:
These two styles will add rounded corners to a layout group or bordered group. If the group has a Label Position "Within group container", then it will appear correctly as a top bar to the rounded group.
Shadow effect
If you wish to add a "shadow" effect then add the following style elements into the "roundedBox" style above.
For the methods above there is a useful site that allows you to change the colours and rounded box options on-line, and obtain the style details to cut and paste into the CSS style mentioned above: http://westciv.com/tools/boxshadows/index.html
All Browser Support
The only approach that will work for older non-standard browsers, needs additional HTML markup and images used to give the similar effect. This creates heavier and slower pages, but is the only approach that can be adopted. WebMaker has some predefined images and a style "corners" that can be applied to a layout group. In addition the user needs to check the box on the Field Details to specify that WebMaker needs to generate the additional HTML for the image method. This option is "Extended Border Styling" on the Field Details.
This option is covered in depth on the following FAQ:
http://www.hyfinity.net/wmforum/showthread.php?tid=90
- Progressive Enhancement - Make the base HTML web application compliant across all browsers, but allow some visual features to appear on modern browsers versions if available.
[/*][*] All Browser Support - Make application look identical on all browsers including non-standard browsers such as IE 6, 7 and 8 and Firefox 2.[/*]
WebMaker can provide both approaches for some features such as "Rounded Box". The "Progressive Enhancement" approach is a great way to slowly phase in more advanced HTML5 and CSS3 capabilities into your web applications. The older browsers simply lose the rounding and shadow effects.
Progressive Enhancement Approach
Rounded Box / Corners
With CSS3 you can apply much simplier styling that does not require additional HTML elements to create attractive visual features. It is often a requirement to get a group of fields to appear within a "rounded box". To add this styling effect simply add the CSS style below to your CSS file attached to the application or page, and then append the style name "roundedBox" to the Group Style on the Field Details screen:
.roundedBox
{ -webkit-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-width: 1px; border-color: #BFD4F5;
background-color: #f2f6fc;
-webkit-transition: background-color .4s, -webkit-border-radius .4s
-o-transition-property: border-radius; -o-transition-duration: .4s;
}
.roundedBox .groupLabelBackground{margin-top: 2px;}
These two styles will add rounded corners to a layout group or bordered group. If the group has a Label Position "Within group container", then it will appear correctly as a top bar to the rounded group.
Shadow effect
If you wish to add a "shadow" effect then add the following style elements into the "roundedBox" style above.
-webkit-box-shadow:2px 2px 2px #BFD4F5;
-moz-box-shadow:2px 2px 2px #BFD4F5;
box-shadow:2px 2px 2px #BFD4F5;
For the methods above there is a useful site that allows you to change the colours and rounded box options on-line, and obtain the style details to cut and paste into the CSS style mentioned above: http://westciv.com/tools/boxshadows/index.html
All Browser Support
The only approach that will work for older non-standard browsers, needs additional HTML markup and images used to give the similar effect. This creates heavier and slower pages, but is the only approach that can be adopted. WebMaker has some predefined images and a style "corners" that can be applied to a layout group. In addition the user needs to check the box on the Field Details to specify that WebMaker needs to generate the additional HTML for the image method. This option is "Extended Border Styling" on the Field Details.
This option is covered in depth on the following FAQ:
http://www.hyfinity.net/wmforum/showthread.php?tid=90