One of the major advantages of using the DataFlex WebApp Framework is that it takes away the need to master all the techniques that are involved with the creation of web applications. In case of the styling it does this by providing a set of themes that provide great looks your application. So, without knowledge outside of DataFlex, one can write good looking applications. But taste and functional needs can be reasons to go outside of what the framework delivers by default. Customizing the looks is done using Cascading Styles Sheets (CSS) which is an industry standard used all over the web. This series of blogs will not be a CSS training as there are already numerous great resources available for that (for example, http://www.w3schools.com/css/).
Both files usually use the same selectors, and it is the order in which they are included that determines which rules are applied. The Theme.css is always included after the System.css, so if the selectors are equal, the rules of the theme override those of the system. The third and last include file is Application.css. This file is empty when creating a new workspace and this is where minor styling customizations and styles for extensions of the framework can be placed, especially when using one of the default themes, as it is good to keep small customizations separate to ease the process of migrating to a newer version.
If the customizations get too big then you should consider making your own theme. The process of making your own theme is simple by just copying one of the existing theme folders and renaming it into the name of your theme. The Df_ prefix is reserved for the standard themes and we do not guarantee that the studio will not overwrite your changes if the theme name starts with Df_.
<div class="WebControl WebForm Web_Enabled" data-dfobj="oVendor.oWebMainPanel.oVendorAddress" style="float: left; clear: left; margin-left: 0%; width: 100%;">
<div class="WebCon_Inner WebCon_LeftLabel">
<label for="_df_53" style="text-align: right;">Street:</label>
<div style="-webkit-user-select: text;">
<input type="text" name="oVendorAddress" value="" id="_df_53" placeholder="" title="Street Address." class="dfData_Text" maxlength="30" style="-webkit-user-select: text;">
The example above shows the HTML structure for a cWebForm with all of the CSS classes and inline styles applied to it. The elements outside of the <div class="WebFrm_Wrapper" are all generated by the cWebBaseControl class and are the same for other controls (like cWebButton, cWebCheckbox). These elements are used to render the label (psLabel, peLabelPosition, ..) and for the control positioning (piColumnIndex and piColumnSpan). The positioning properties mainly translate into the inline styles applied on the outermost div element. Looking at the outermost div element we see that controls always have the WebControl CSS class applied and Web_Enabled (or Web_Disabled) is available depending on pbEnabled.
<div class="WebContainer WebPanel Web_Enabled" data-dfobj="oDemoTreeView.oLeftPanel" tabindex="-1" style="position: absolute; top: 0px; left: 0px; bottom: 0px; width: 400px;">
<div class="WebCon_Sizer" style="min-height: 865px;">
<!-- This is where HTML of controls inside the panel goes -->
<div style="clear: both;"></div>
<div class="WebPanel_DividerVertical" style="right: 0px;"></div>
The example above shows the HTML structure of a cWebPanel with all the CSS classes and inline styles applied to it. Instead of WebControl we now see the WebContainer class being applied to the outermost element. The only thing containers have in common is that they all can contain controls or panels. All different types of containers have their own logic for positioning themselves.