Customizing the Look of Brazos UI Controls

Follow

Overview

Customizing the Brazos UI can be easily done on a global scale to give your processes a unique or branded look and cross-task consistency (See the Technote “Customizing Brazos UI Style and Logo”). However, sometimes you are are going to want to style specific controls in a non-global manner or to apply stylings not covered in the CSS generation tool. There are several approaches for making targeted changes. Styling of the Brazos Button will be used as an example.

 

Example: Big, Purple Buttons

  1. Create a custom Coach View but leave the coach empty.
  2. Under the Behavior > Inline CSS editor add the following code:
    .myCustomButton button.btn.btn-default {
    padding: 25px 25px;
    font-size: 125%;
    font-family: serif;
    border: solid mediumpurple 1px;
    background-color: purple;
    }
  3. Add the CSS Coach View to the bottom of a coach containing a Brazos UI button with the Configuration option “Display Style” set to “Default.”
  4. Select the button in the coach. Under Properties > HTML Attributes click on Add Class. For the Class Name enter “myCustomButton”.
  5. Save changes and run the service. The button you assigned the custom class to should now be bigger, square (width will expand to accommodate text, however), and purple:

Nearly any control can be customized using these steps. Replace the selectors, added class name, and CSS code as appropriate for the element you are styling.

 

Background and In Depth Explanation

Short Refresher on Cascading, Selectors, and BPM Page Structure

Styling specific elements requires an understanding of how cascading works, how selectors can be combined, and how BPM and Brazos UI structure web pages. Many resources are available that go into cascading and selectors so only a brief review will be given.

Cascading

Making changes to element styling follows a hierarchy of priorities. Styles referenced at multiple levels will be overwritten in order of priority. Linked style sheets can be thought of as a global style and take their precedence in order of listing, with later styles overwriting earlier styles. Internal styles placed on the page (between <style> tags in the <head>) are local to the page and will overwrite changes in linked style sheets. The highest priority styles are in-line as a style attribute of the elements themselves and consequently only affect a single element.

Caution: Due to the complexity of page structures, a style you think should display may itself be overridden by another style on the page. Page inspection tools such as that found in Firebug for Firefox are very helpful in tracking down style override issues. If you find that a properly written style is not being applied correctly you may need to use a more specific combination of selectors.

In the square purple button example, the buttons are originally styled by linked style sheets that define how a default button should look. The addition of the "Inline" CSS from the custom Coach View is actually a misnomer: CSS added in this way appears as Internal styling. Due to the specificity of the selectors, we are confident it will override the built-in Brazos UI style sheets.

Selectors

Selectors also follow a hierarchy that can be thought of as an element's address or lineage. Page-wide stylings of every element on a page can be applied by simply using the tag as the selector (but as mentioned above may run into override problems). Targeted styling requires the use of element IDs and/or classes. These can be strung together and combined with element selectors to give as much or as little specificity as required.

In the example above “.myCustomButton button.btn.btn-default” specifies only the buttons on the page that contain all of those selectors (see the example at the end of this article). “button” refers to the element itself while “btn” and “.btn-default” are classes added automatically for the default-styled Brazos UI Button.

BPM Page Structure

The most direct way to style a subset of elements is through the use of IDs and/or classes. However, it is often not possible to apply an ID or class directly to an element placed in a Coach or Coach View. The unique IDs or classes applied to controls are actually set to enclosing <div> tags. Stylings set to a <div> may or may not fall through to style the child elements so it is usually necessary to combine the ID or class of the div with the element to properly target the styling.

In the button example above, in order to style and select only the button with the custom class, “.myCustomButton” needed to be combined with the button-specific selectors. Less restrictive selectors may also produce similar results (“.myCustomButton button” should also work), but be careful when not utilizing custom classes.

Tying CSS to a Screen

There are two main ways to add the actual CSS style code to a coach.

Page Level

Adding CSS to the page-level is simple but not entirely straightforward. BP3's preferred method is:

  1. Create a new Coach View. Name it something indicative of its purpose such as “Custom CSS Styling” (but be specific if possible so multiple styles can be differentiated).
  2. Leave the coach view Layout empty.
  3. Navigate to the Behavior tab. You have two options for including CSS code here.
    • Included Scripts – These come from Managed Files. A CSS file uploaded and made available through the Files menu (as a Web File) can be added to the coach view.
    • Inline CSS – With this option CSS code is entered directly into the associated editor. This is the option shown the above example.
  4. Add this custom Coach View to the bottom of any Coach to which you wish to apply its associated stylings.

Be aware that the “Inline CSS” is a misnomer. When the page is constructed, this code is actually added between <style> tags in the page <head> which is considered Internal Styling.

The BP3 Brazos UI Examples Process Application also contains similar instructions. To find it, run the main demo service and navigate to the Customize Style page. The page that opens when clicking the Generate button has instructions for incorporating the customized CSS stylings selected.

Inline

Though we advise against this method, any control which can display HTML can be styled by using the “style” attribute. However, this often will not directly style the control itself so is not likely to give you expected results.

  • Since Brazos UI builds HTML components to structure screen views, some String fields can properly interpret HTML tags. For example, while the Output Text control can be explicitly set to display HTML (the “Is HTML” configuration option), its Label will properly display HTML as well. Inline styling can therefore be added directly to any place that interprets HTML. This styling is limited to the field itself and you should always test this since not every field of every control will process HTML correctly (table headers will, but the label of the Button control will not, for example).
  • All controls have an “HTML Attributes” override under the Properties tab. Inline styling can be done here by clicking the “Add Attribute” button, setting the name to “style” and entering a list of semicolon separated attribute:value pairs. Note that despite the display in the Override, the style attribute will properly include quotes in the HTML of the page (e.g. style=background-color:purple becomes style=“background-color:purple;”). The pitfall with this option is that the HTML attributes are applied to a containing <div> element of the control. This means that unless the styling of a div has an impact on its child elements you will not see the expected changes in the control itself.
    • For example, applying the styles for the big, purple button in this way results in a button that looks like the default, but has padding around the button and is contained in a <div> element with a purple background. Only the text-family falls through to the actual button itself as can be seen in the following image: 

The Inline method of applying HTML styling has a number of limitations. It is therefore recommended that Page Level styling be applied through the use of a customized coach view. Using an Included Script or the “Inline” (Internal) CSS does not matter. It is also considered better practice to separate page structures from page styling rather than intermingling the two.

Keep It Tidy

Beyond the above considerations of how to get CSS into your application, also keep an eye towards understandability and maintainability. Some day, either you or someone else is going to need to investigate and modify your Coaches. If you keep your CSS organized, annotated, and easily locatable then you'll be helping out everyone. Another reason we recommend using a custom Coach View to deliver CSS is that you can place that Coach View in the same location on every Coach that needs it. While it may make some intuitive sense to closely tie CSS to the control it is modifying by using the Inline method, you don't later want to be in a situation of having to hunt for where a troublesome CSS rule lives. If instead you always put your CSS Coach Views at the bottom of the Coach layout, then anyone can both quickly see if customized CSS is being applied to a Coach and they know where to go to modify or fix it.

 

Leveraging Selectors

Using element selectors alone will style all elements on the page. Likewise, many classes are used for general built-in styling purposes (such as “btn”) and are therefore present on all of a given element on the page. There is one way to uniquely label subsets of elements on a page.

HTML Attributes – Every control can have a class added via the Properties > HTML Attributes panel. Click the “Add Class” button and choose a descriptive name. This class is added to a container <div>.

Note that you cannot apply an ID using the HTML Attributes options. Container <div> elements are automatically assigned unique IDs and elements are not allowed to have more than one ID.

Since custom classes are applied to <div> elements rather than directly to the control element, direct styling of specific controls requires chaining selectors to include the <div> class and its inner element to be styled. This can be seen in the button example where the custom “.myCustomButton” class selector is used along with “button” (the element itself) and “.btn.btn-default” (Brazos UI added button classes) to specifically target only the default-styled Brazos UI buttons on the page that have the “myCustomButton” class. See the table below for examples of how broadly or specifically page elements can be targets. Note that the stock IBM button is not selected since it does not have the Brazos UI "btn" class.

Selectors

Targets

button.btn

All Brazos UI buttons

button.btn.btn-default

Only Brazos UI buttons that are styled as Default

.myCustomButton button.btn.btn-default

Only Brazos UI buttons that are styled as Default and also have the custom class “myCustomButton” assigned. See image below.

 

(Note that the button expands width to accommodate the longer text since it was resized using the padding attribute)

Have more questions? Submit a request

Comments

Powered by Zendesk