You may add CSS styling markup (div and class directives) directly to widget XML statements by using the HTML markup tags as described.
CSS styling markup can be added simply by following these steps:
- Within any
widgetselement, add one or more XML statements with HTML and CSS markup. - Close all HTML markup elements with appropriate end tags.
- Save and close the file.
HTML CSS directives placed within the widgets element of a screen definition are translated into HTML based on conversions built-in to the OFBiz screen handler and Screen widget screen generation tool. Several common HTML elements may be specified directly within the Screen widget definition or on a screenlet's element in this way.
To instruct the Screen widget to create a web page with the following HTML and CSS markup:
<div id="idA" class="classA"> <h1>This is an image </h1> <img src="/images/img.png" height=40 width=40 /> </div>
Add the following within the widgets element of a screen definition:
<widgets> <container style="classA" id="idA"> <label style="h1">This is an image</label> <image src="/images/img.png" height="40" width="40" url-mode="content"/> </container> </widgets>
Note
Note: The XML container element creates a div. The XML style attribute is equivalent to the HTML CSS class attribute. The XML id attribute is equivalent to the CSS id attribute. Attribute values are names of CSS styles as found defined either locally within a FreeMarker template or in an external CSS stylesheet file.
OFBiz also allows for portions of a Screen widget, called a "screenlet", to be defined. Screenlets may have HTML and CSS attributes added directly to the element as shown:
<screenlet style="classA" id="idA" > <platform-specific> <html> <html-template location="mywebpage.ftl"/> </html> </platform-specific> </screenlet>