Themes, Styles and Custom CSS

Owned by Christopher Dawes
Jan 10, 2020
2 min read

Have you ever looked at the layout or your form/application and wonder how you can make it better suit your needs?   You can change it!  You can make a great many changes by tweaking the CSS of an object. 

There are 3 ways to change the look of your application:

  1. Use the Style/Theme Editor, it enables you to make style changes without the need to understand or write CSS.  Click the Style tab, select a theme and then click Customize to change how it looks. Changes will be applied to all forms within the application. This should be the first place you look to make style changes.

  2. Add a URL that points to a .css file on the web to the application.  Changes will be applied to all forms within the application.You may define any CSS class or override existing classes to completely customize the look of your forms.  To add the file URL, click on the Settings tab, click Files, click the Add button. Make sure you select the css file in the Custom CSS dropdown on the Style tab, otherwise the styles will not be usable. 
    Note: an application may only have one .css file and it must be selected on the Style tab for the classes to be applied.    

    You must add the class name to the Custom CSS class names property of any item where you want the style to be applied.

     

  3. Add an HTML item and define the style directly.  This approach will only apply the style to the form where it is defined.

    Define style directly within an HTML area

    <style>    .lfMn.lotusui30 .lotusBanner {   display:none; } .lfMn.lfSingleFormArea .lfFormTitleBar {   display:none; }    </style>

This page is dedicated to the types of changes that I have seen and that you might want to use in your own applications. Don't forget to check out our documentation on Creating Custom Styles to better understand how the forms are structured and all of the CSS classes that you may override.