Branding

Branding - Importing and Exporting

You can customize the look and feel of your Cloud Elements UI.  To help modify a branded UI, use the following example curl commands to export your current settings for backup or transfer, and import or restore settings to your account.

Save or Export your Cloud Elements Branding

This is valuable in being able to quickly capture your current branding to use as a template in other workspaces.  The JSON format allows you to easily share internally and upload to a public repo.

HEADERS
AuthorizationUser {{userSecret}}, Organization {{orgSecret}}
Content-Typeapplication/json
Example Request
curl --location --request GET "https://api.cloud-elements.com/elements/api-v2/branding" \
--header "Authorization: User {{userSecret}}, Organization {{orgSecret}}" \
--header "Content-Type: application/json"

 Restore or Import your Cloud Elements Branding


Made a mistake and want to quickly revert back? Use the below example to reset your branding and see all available fields to import new branding across accounts.

HEADERS
AuthorizationUser {{userSecret}}, Organization {{orgSecret}}
Content-Typeapplication/json
Example Request
curl --location --request PUT "https://api.cloud-elements.com/elements/api-v2/organizations/branding" \
--header "Authorization: User {{userSecret}}, Organization {{orgSecret}}" \
--header "Content-Type: application/json" \
--data "{
\"headerFont\": \"\\\"Museo Sans\\\", museo-sans\",
\"headerColor\": \"#4d82bf\",
\"bodyFont\": \"\\\"Open Sans\\\", open-sans\",
\"bodyColor\": \"#333333\",
\"logo\": \"\",
\"favicon\": \"\",
\"themePrimaryColor\": \"#4d82bf\",
\"themeSecondaryColor\": \"#44c8f5\",
\"themeHighlightColor\": \"#761299\",
\"buttonPrimaryBackgroundColor\": \"#4d82bf\",
\"buttonPrimaryTextColor\": \"#ffffff\",
\"buttonSecondaryBackgroundColor\": \"#44c8f5\",
\"buttonSecondaryTextColor\": \"#ffffff\",
\"buttonDeleteBackgroundColor\": \"#FF4E4E\",
\"buttonDeleteTextColor\": \"#ffffff\",
\"logoBackgroundColor\": \"#44c8f5\",
\"topBarBackgroundColor\": \"#ffffff\",
\"navigationBackgroundColor\": \"#172330\",
\"contextBackgroundColor\": \"#edf1f2\",
\"cardHeaderColor\": \"#4d82bf\",
\"cardBackground\": \"#ffffff\",
\"cardMenuBackground\": \"#d1d1d1\",
\"cardMenuLinkColor\": \"#172330\",
\"navigationLinkBackground\": \"#172330\",
\"navigationLinkForeground\": \"#ffffff\",
\"navigationLinkBackgroundHover\": \"#303a47\",
\"navigationLinkForegroundHover\": \"#ffffff\",
\"navigationLinkBackgroundActive\": \"#101922\",
\"navigationLinkForegroundActive\": \"#44c8f5\",
\"topBarNavigationColor\": \"#172330\",
\"tableHeaderBackground\": \"#172330\",
\"tableHeaderForeground\": \"#ffffff\",
\"tableBodyBackground\": \"#ffffff\",
\"tableBodyForeground\": \"#333333\",
\"intercomEnabled\": false,
\"pendoEnabled\": true,
\"documentationUrl\": \"https://docs.cloud-elements.com/home\",
\"navigationIconPosition\": \"top\",
\"navigationIconSize\": \"20px\",
\"navigationLabelSize\": \"9px\",
\"navigationWidth\": \"80px\",
\"elementSingularTerm\": \"element\",
\"elementPluralTerm\": \"elements\",
\"formulaSingularTerm\": \"formula\",
\"formulaPluralTerm\": \"formulas\",
\"vdrSingularTerm\": \"virtual data resource\",
\"vdrPluralTerm\": \"virtual data resources\",
\"instanceSingularTerm\": \"instance\",
\"instancePluralTerm\": \"instances\",
\"companyTerm\": \"Cloud Elements\",
\"componentsBorderColor\": \"#d1d1d1\",
\"topBarTitleColor\": \"#172330\",
\"navigationItemBorderColor\": \"#172330\",
\"navItems\": [
{
\"label\": \"Admin\",
\"icon\": \"settings\",
\"route\": \"/admin\",
\"order\": 8,
\"privilegeKey\": \"viewAdminPanel\"
},
{
\"label\": \"Deploy\",
\"icon\": \"rocket\",
\"route\": \"/deploy\",
\"order\": 7,
\"privilegeKey\": \"manageUiBranding\"
},
{
\"label\": \"Security\",
\"icon\": \"security\",
\"route\": \"/security/settings\",
\"order\": 6,
\"privilegeKey\": \"modifySecurity\"
},
{
\"label\": \"Activity\",
\"icon\": \"chart\",
\"route\": \"/activity\",
\"order\": 5
},
{
\"label\": \"Formulas\",
\"icon\": \"formulas\",
\"route\": \"/formulas\",
\"order\": 4,
\"privilegeKey\": \"viewFormulas\"
},
{
\"label\": \"Virtual Data Resources\",
\"icon\": \"transformations\",
\"route\": \"/virtual-data-resources\",
\"order\": 3
},
{
\"label\": \"Instances\",
\"icon\": \"instances\",
\"route\": \"/instances\",
\"order\": 2,
\"privilegeKey\": \"viewElements\"
},
{
\"label\": \"Elements\",
\"icon\": \"elements\",
\"route\": \"/elements\",
\"order\": 1,
\"privilegeKey\": \"viewElements\"
}
],
\"videoId\": \"224702198\",
\"topNavBarHidden\": false,
\"userProfileHidden\": false,
\"cloudElementsAuthMasked\": false
}"




Branding Your Experience

You can change the colors, fonts, buttons, images, and other components of the UI on the Branding page. As you make changes, they appear in the examples on the page. 

Take a quick walkthrough on our Branding page.

To access Branding, click Deploy on the left-side navigation.