Introducing the all-new TIBCO Community site!

For current users, please click "Sign In" to reset your password and access the enhanced features. If you're a first-time visitor, we extend a warm welcome—click "Sign Up" to become a part of the TIBCO Community!

If you're seeking alternative community sites, explore ibi, Jaspersoft, and Spotfire.

Jump to content
  • HowTo discover CSS Class Names in Forms


    Vikas Kumar 9

    Business Studio Model-Driven Forms can be styled like any other Webpage, too. CSS Styling is an easy task, but could consume a lot of time if you have very specific requierments. 

    Any Style change should be tested in your target Browser Application, first in Preview mode & and as a second Step in your target Application.
    Remember: there is only one CSS Definition per Browser DOM, it is created out of all CSS Files loaded. So there could be Side-Effects.

    To be able to Test Styles in you target Browser, just copy the Preview URL from the "GWT Preview" (right click, context menu "Properties")

    form_preview.png.7cd9271bbd3274c5fc12546e4a47ce36.png
    And than copy the URL by selecting the string, press CTRL+a (select all), CTRL+c (copy selection)

    copy_url.png.c9bfcbf8569a85bd733237fbeba7d90b.png
    Now the URL can be opened in a 'real' Browser like Chrome or Firefox, and you can press F12 to find the right CSS class paths and names. 

    f12_in_chrome.png.d243c6b8df0b1e2adab4f11c0c310d2e.png
    Hints on CSS Styling

    • Start with Main Form Root Class Name, e.g. "niceForm" for your custom Styling
    • make use custom CSS definitions on specific needs. (e.g. a red Field)
    • make any CSS Definition Path as specific as you can. (with longer Path defintions you can overwrite unwanted defintions)
    • always try to find reuseable CSS path, e.g. component, control, ... instead of pane4
    • use "!important" only if nothing else is working. (this is the last choise)

    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...