Widget Appearance

customize the look and feel of elements to match the design of your site intelliprove widgets support visual customisation, which allows you to match the design of your site with the themeoverrides option the layout of each widget stays consistent, but you can modify colors and fonts configure your widget appearance docid 2kl5bnrb 6uicqrfaqsig if needed, fine tune individual widgets by overriding widget appearance docid 2kl5bnrb 6uicqrfaqsig customer theming the widgets share the same customer theming as configured for the plug in by default they will visually match with the rest of the design for more information on how the customer theming is configured, refer to the customisation docid\ rjgsa73gtgnctkq9ufeug theming variables the appearance of each individual widget can be fine tuned by overriding the customer level theming variables colors each individual color in the customer theme can be overridden for an individual widget by passing the themeoverrides object when intelliwidgets js sdk docid\ dekcuoaphrmczxe caj5v set the color value for a theme variable to the color hex code, prefixed with "#" dark themed widgets are made possible by setting the dark mode flag and swapping the brand secondary and brand tertiary const themeoverrides = { "dark mode" false, "brand primary" "#3a79ff", "brand secondary" "#10183a", "brand tertiary" "#ffffff", "support 500" "#092187", "support 300" "#dbe1f6", "support 100" "#f7f9fd", "functional primary 500" "#ff3a5d", "functional secondary 500" "#f5b71e", "functional tertiary 500" "#62e38e" } transparent background color the intelliprove widgets have a transparent background the color of the enclosing container shines through color changes only apply to the foreground colors fonts the intelliprove widgets automatically inherit the font family from the css of the enclosing container this script configures the font family for the whole website body 👉 set global font / set font for the entire page / body { font family 'arial', sans serif; / specify the font family / }