Style

The Style object contains a collection of specific style settings that can be used to customize the UI of the hub, The settings are injected into the HubEmbedOptions object before being used in the hub method.

The style object is in effect a simple JavaScript array with specific items (enumerated below). The settings tightly follow the same settings as classic CSS.

Styling Groups

• The "tab" styles affect the the hub's tab section at the top of the UI
• The "buttons" affect the small function buttons in the top right of the hubs UI
• The "tiles' affect the tiled content contained within a given hub tab
• The "picker" affects the pop-up widget picker for content and functionality that allows users to build their hub space.
• The "container" is the broad, background canvas of the hub itself

Example

The following instantiates the style object and then uses in the hub method to instantiate the hub on a hosting page with the custom choices.

const container = document.getElementById('embed-container'); const customStyles = { 'tabs.nonSelectedTab.color': 'black', 'tabs.nonSelectedTab.backgroundColor': '#e1e1e1', 'tabs.nonSelectedTab.fontSize': 12, 'tabs.nonSelectedTab.fontWeight': 500, 'tabs.selectedTab.color': '#498c5b', 'tabs.selectedTab.backgroundColor': '#ffffff', 'tabs.selectedTab.fontSize': 12, 'tabs.selectedTab.fontWeight': 500, 'tabs.border': '1px solid #e1e1e1', 'tabs.backgroundColor': '#e1e1e1', 'tabs.addTabIconColor': '#d2d6d9', 'tabs.deleteTabIconColor': 'gray', 'tabs.iconColor': '#8599A8', 'buttons.color': 'gray', 'buttons.secondaryColor': '#006699', 'buttons.hoverColor': '#003366', 'tiles.backgroundColor': '#ffffff', 'tiles.titleColor': '#353d42', 'tiles.boxShadow': '1px 1px 1px 1px rgba(0, 0, 0, 0.19)', 'tiles.addWidgetPrimaryColor': '#8599A8', 'tiles.addWidgetSecondaryColor': '#328EC1', 'picker.backgroundColor': '#ffffff', 'picker.tabs.nonSelectedTab.color': 'red', 'picker.tabs.nonSelectedTab.backgroundColor': '#f2f2f2', 'picker.tabs.nonSelectedTab.fontSize': 12, 'picker.tabs.nonSelectedTab.fontWeight': 500, 'picker.tabs.selectedTab.color': '#353d42', 'picker.tabs.selectedTab.backgroundColor': '#f2f2f2', 'picker.tabs.selectedTab.fontSize': 12, 'picker.tabs.selectedTab.fontWeight': 500, 'picker.tabs.border': '2px solid #d2d6d9', 'picker.tabs.backgroundColor': '#f2f2f2', 'picker.tabs.addTabIconColor': '#d2d6d9', 'picker.tabs.deleteTabIconColor': 'gray', 'picker.tabs.iconColor': '#8599A8', 'container.border': '#8599A8', 'canvas.backgroundColor': '#e1e1e1', }; embedClient.hub(container, { theme: "light", editable: true, style: customStyles, showTabs: true, responsiveness: "compact", }).then(hub => { }); });