Theming

configuration types of customization to configure the theme of your widgets, there are two levels of customization global theming in admin console this defines a global theme, including brand colors and fonts, which is applied across all widgets by default component level styling for more granular control, individual web components can be styled directly by targeting their html tags looking for additional customization options? mailto\ support\@intelliprove com global css selectors conflicts global css reset rules can unintentionally affect intelliprove web components this commonly happens when a project includes a reset or normalization stylesheet (such as a custom css reset or tailwind’s preflight), which applies baseline styles to all html elements using broad selectors (for example the selector) to prevent conflicts, global reset styles should be reverted for intelliprove components make sure this reset override is applied after any global reset or preflight styles, so it properly restores the component’s intended styling simple example ip session, ip session { 	all revert layer; } tailwind example @import "tailwindcss"; @layer base { 	ip session, 	ip session { 	 all revert layer; 	} } setting your theme ensure you global theming is set up, as it provides the foundation for your theme additional component level styling is optional global theming in admin console intelliprove widgets follow the global styling settings you configure via the intelliprove admin console the layout of each widget remains consistent, but you can modify colors and fonts for more information on how the customer theming is configured, refer to the docid\ rjgsa73gtgnctkq9ufeug component level styling in addition to configuring theming through the global settings in the admin console, you can style individual web components when importing them directly component level overrides are not supported when using the plug and play docid nusbijxigx1tjdubwucs this uses your global theming configuration shared widget styling widgets are self contained components that are designed to function as standalone building blocks they are visually recognizable by their card like appearance and can be styled to fit your design to maintain design consistency, widgets use a shared set of css variables by adjusting these variables, you can update the styling across all widgets simultaneously css variable ip widget border width ip widget border color ip widget border radius ip widget background color ip widget text color ip widget inset md ip widget inset lg styling the html tags each widget can be styled individually since our custom web components use the shadow dom, external styles do not penetrate the internal structure of the component if you need to style nested elements, please mailto\ support\@intelliprove com we can expose additional css variables (which are accessible within the shadow dom) or define part selectors for more granular control