The TIBCO Platform is a real-time, composable data platform that will bring together an evolving set of your TIBCO solutions - and it's available now!
A chart showing the TIBCO Platform vision
Jump to content
Articles
Read more about TIBCO use cases, product features, capabilities and more
  • 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 an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...