3B Knowledge

Custom Styling Forms

Revision as of 23:01, 16 December 2024 by Admin (talk | contribs) (Created page with "== Intro == 3B Forms adds the capability to add your own custom CSS styling to a form through the usage of the Form Style object. The added custom styling will apply within the form builder and the generated form. == Usage == Adding custom CSS styles allows you to achieve the following (and much more): -       Adding your company’s custom font style, color, spacing or other font related properties -       Adding support for emojis, custom glyphicons and other...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Intro

3B Forms adds the capability to add your own custom CSS styling to a form through the usage of the Form Style object. The added custom styling will apply within the form builder and the generated form.

Usage

Adding custom CSS styles allows you to achieve the following (and much more):

-       Adding your company’s custom font style, color, spacing or other font related properties

-       Adding support for emojis, custom glyphicons and other icons

-       Extending the application interface to brand it or white-label it

How To

In order to add custom CSS, you need to create a Form Style record, which you can access from the 3B Forms Application (or simply search for “Form Styles” in the app launcher drop down).

When you have navigated to the object list view, you can click on the “New” button which will display the new record form. The important field here is “Body” where you will be entering the CSS custom styles that you want to be applied to a form.

Once you have created a new Form Style, you can use it on any form, new and old. To apply a Form Style to a form, select the created Form Style record on the Form record.

Theming

3B Forms comes with a custom theme builder. You can create themes, save and upload pre-defined themes. Simply navigate to the theme tab to get started.

You can also create custom themes by creating a theme JSON that modifies the default styling:

{

    "themeName": "default",

    "colorPalette": "light",

    "isPanelless": false,

    "backgroundImage": "",

    "backgroundOpacity": 1,

    "backgroundImageAttachment": "scroll",

    "backgroundImageFit": "cover",

    "cssVariables": {

        "--sjs-corner-radius": "4px",

        "--sjs-base-unit": "8px",

        "--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)",

        "--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",

        "--sjs-border-default": "rgba(0, 0, 0, 0.16)",

        "--sjs-border-light": "rgba(0, 0, 0, 0.09)",

        "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",

        "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",

        "--sjs-general-backcolor-dim-light": "rgba(249, 249, 249, 1)",

        "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",

        "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",

        "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",

        "--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",

        "--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",

        "--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",

        "--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",

        "--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",

        "--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",

        "--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",

        "--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)",

        "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",

        "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",

        "--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)",

        "--sjs-border-inside": "rgba(0, 0, 0, 0.16)",

        "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",

        "--sjs-special-green": "rgba(25, 179, 148, 1)",

        "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",

        "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",

        "--sjs-special-blue": "rgba(67, 127, 217, 1)",

        "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",

        "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",

        "--sjs-special-yellow": "rgba(255, 152, 20, 1)",

        "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",

        "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",

        "--sjs-article-font-xx-large-textDecoration": "none",

        "--sjs-article-font-xx-large-fontWeight": "700",

        "--sjs-article-font-xx-large-fontStyle": "normal",

        "--sjs-article-font-xx-large-fontStretch": "normal",

        "--sjs-article-font-xx-large-letterSpacing": "0",

        "--sjs-article-font-xx-large-lineHeight": "64px",

        "--sjs-article-font-xx-large-paragraphIndent": "0px",

        "--sjs-article-font-xx-large-textCase": "none",

        "--sjs-article-font-x-large-textDecoration": "none",

        "--sjs-article-font-x-large-fontWeight": "700",

        "--sjs-article-font-x-large-fontStyle": "normal",

        "--sjs-article-font-x-large-fontStretch": "normal",

        "--sjs-article-font-x-large-letterSpacing": "0",

        "--sjs-article-font-x-large-lineHeight": "56px",

        "--sjs-article-font-x-large-paragraphIndent": "0px",

        "--sjs-article-font-x-large-textCase": "none",

        "--sjs-article-font-large-textDecoration": "none",

        "--sjs-article-font-large-fontWeight": "700",

        "--sjs-article-font-large-fontStyle": "normal",

        "--sjs-article-font-large-fontStretch": "normal",

        "--sjs-article-font-large-letterSpacing": "0",

        "--sjs-article-font-large-lineHeight": "40px",

        "--sjs-article-font-large-paragraphIndent": "0px",

        "--sjs-article-font-large-textCase": "none",

        "--sjs-article-font-medium-textDecoration": "none",

        "--sjs-article-font-medium-fontWeight": "700",

        "--sjs-article-font-medium-fontStyle": "normal",

        "--sjs-article-font-medium-fontStretch": "normal",

        "--sjs-article-font-medium-letterSpacing": "0",

        "--sjs-article-font-medium-lineHeight": "32px",

        "--sjs-article-font-medium-paragraphIndent": "0px",

        "--sjs-article-font-medium-textCase": "none",

        "--sjs-article-font-default-textDecoration": "none",

        "--sjs-article-font-default-fontWeight": "400",

        "--sjs-article-font-default-fontStyle": "normal",

        "--sjs-article-font-default-fontStretch": "normal",

        "--sjs-article-font-default-letterSpacing": "0",

        "--sjs-article-font-default-lineHeight": "28px",

        "--sjs-article-font-default-paragraphIndent": "0px",

        "--sjs-article-font-default-textCase": "none",

        "--sjs-general-backcolor-dim": "rgba(243, 243, 243, 1)",

        "--sjs-primary-backcolor": "rgba(25, 179, 148, 1)",

        "--sjs-primary-backcolor-dark": "rgba(20, 164, 139, 1)",

        "--sjs-primary-backcolor-light": "rgba(25, 179, 148, 0.1)",

        "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",

        "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",

        "--sjs-special-red": "rgba(229, 10, 62, 1)",

        "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)"

    },

    "headerView": "basic"

}

You can also apply an out of model styling by simply inspecting the HTML structure of the rendered form and creating custom CSS overrides in the Form Style record.

Tips & Tricks

Longer CSS Stylesheets[edit | edit source]

You are limited with the number of characters that you can add to the Body field of a Form Style record, if you need to add longer custom stylesheets, you may want to use the @import CSS declarative and import CSS stylesheets from external sources (say Static Resources/other CDN).

Retrieved from ‘https://3bknowhow.com/index.php?title=Custom_Styling_Forms&oldid=715’