![]() Using a fixed node path equivalent, like "div.cx-webchat > div.cx-body > div.cx-transcript > div.cx-message-group > div.cx-message" creates a dependency on the HTML node type and structure. cx-message" is all that is needed to target message bubbles inside WebChat. Using classnames allows for the HTML structure to be changed without breaking selectors. WarningWidgets primarily relies on classnames for CSS selectors, rather than fixed node path selectors. ![]() When you create your own themes, you can only use the following CSS properties: In a later step, you will register this theme classname in your configuration. There are no restrictions or limitations. Name your theme's classname anything you wish. Thus, the combined class selector indicates styles that will be applied only when your custom theme is active in the configuration object. cx-widget class and appending the theme's classname to it. Themes are applied by searching for all elements with the. cx-theme-dark is the class name created for the dark theme. The outermost container of every widget or standalone UI element has this class and is used to identify UI elements that belong to Genesys Widgets. cx-widget is the base class for the entire Genesys Widgets UI. In the dark theme template file, the first class selector is defined as: ImportantBy default, theme templates override the styles of all of your Genesys Widgets-but you can also make changes that only affect a specific widget, as described below. "clear" #5081E1 // Interactive icon color 1 (attach files, delete file, #4AC764 // Positive Color (confirmation, availability, usually #F53131 // Negative Color (error, exception, usually #F8A740 // Warning Color (warning, pending, offline, usually yellow or #FDFDFD // Icon color for primary #222529 // Main border // Button // Button // Button // Alert/error #758384 // Form controls default #75A8FF // Form input focus outline / autocomplete hover background #DAE6FC // Outline color for primary buttons Sample theme template filesĬlick the following links to automatically download the sample template files: * Color Palette #33383D // Main Background #444A52 // Form #222529 // Button #5081E1 // Button primary gradient #4375D6 // Button primary gradient #CCCCCC // Button disabled / scrollbar #212529 // Native scrollbar track #A3A8AE // Scrollbar #FDFDFD // Main text #98A7B8 // footer #FDFDFD // Button default & primary / autocomplete text hover #FDFDFD // Hyperlink #C5CCD6 // Placeholder #F53131 // Alert/error #FDFDFD // Base icon #8C8C8C // Secondary icon color (multitone #000000 // Icon shadow color (multitone #000000 // Icon secondary shadow color (multitone #98A7B8 // Window control icon #98A7B8 // Form input icon overlay color (e.g.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |