<h2>Change the brand and theme settings in your workspace experience</h2><br/><div style="overflow-x:auto"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta content="text/html; charset=UTF-8" /><meta name="copyright" content="(C) Copyright 2024" /><meta name="DC.rights.owner" content="(C) Copyright 2024" /><meta name="generator" content="DITA-OT" /><meta name="DC.type" content="task" /><meta name="DC.title" content="Change the brand and theme settings in your workspace experience" /><meta name="abstract" content="Change the brand and theme settings for your workspace experience in UI Builder so that your users can see a consistent look and feel across all pages." /><meta name="description" content="Change the brand and theme settings for your workspace experience in UI Builder so that your users can see a consistent look and feel across all pages." /><meta name="DC.relation" scheme="URI" content="../../../administer/ui-builder/concept/ui-builder-workspace-settings.html" /><meta name="DC.relation" scheme="URI" content="../../../build/custom-application/reference/r_CustomApplicationDevelopment.html" /><meta name="DC.relation" scheme="URI" content="../../../build/applications/concept/customize-your-apps.html" /><meta name="DC.relation" scheme="URI" content="../../../administer/ui-builder/concept/ui-builder-overview.html" /><meta name="DC.relation" scheme="URI" content="../../../administer/ui-builder/concept/create-custom-experience.html" /><meta name="DC.relation" scheme="URI" content="../../../administer/ui-builder/concept/experience-settings.html" /><meta name="DC.creator" content="ServiceNow" /><meta name="DC.date.created" content="2022-08-04" /><meta name="DC.date.modified" content="2022-08-04" /><meta name="page-type" content="app-engine" /><meta name="page-type" content="builder-library" /><meta name="page-type" content="uib" /><meta name="DC.format" content="XHTML" /><meta name="DC.identifier" content="workspace-branding-theming-settings" /><link rel="stylesheet" type="text/css" href="../../../CSS/commonltr.css" /><title>Change the brand and theme settings in your workspace experience</title></head><body id="workspace-branding-theming-settings"> <div class="breadcrumb"><a class="link" href="../../../build/custom-application/reference/r_CustomApplicationDevelopment.html" title="The Now Platform provides a single mobile and web application development platform to build business applications and extend existing apps that power your digital transformation.">Hyperautomation and Low-Code</a> > <a class="link" href="../../../build/applications/concept/customize-your-apps.html" title="As you are creating your apps, you can employ the power of several other related applications to customize them and streamline your work.">Customize your apps</a> > <a class="link" href="../../../administer/ui-builder/concept/ui-builder-overview.html">../../../administer/ui-builder/concept/ui-builder-overview.html</a> > <a class="link" href="../../../administer/ui-builder/concept/create-custom-experience.html" title="Explore facets of UI Builder to set you up for creating pages quickly.">Exploring UI Builder</a> > <a class="link" href="../../../administer/ui-builder/concept/experience-settings.html" title="Learn about the UI Builder experience settings to build your own workspace and custom portal experiences.">Experience settings for UI Builder</a> > </div> <h1 class="title topictitle1" id="ariaid-title1">Change the brand and theme settings in your workspace experience</h1> <div class="body taskbody"><p class="shortdesc">Change the brand and theme settings for your workspace experience in <span class="ph">UI Builder</span> so that your users can see a consistent look and feel across all pages.</p> <div class="section prereq p"> <p class="p">You must be in the correct application scope to edit the experience settings. If you're in a different scope, the experience settings are read-only. To change your application scope, go to the main header, select the application picker (<img class="image" id="workspace-branding-theming-settings__image_lpx_fhf_h4b" src="../image/application-picker.png" alt="Application picker." />), and then select the application scope that you want. For more information about the application scope, see <a class="xref" href="security-roles.html" title="Set up the security and roles for your UI Builder instance.">Security and roles in UI Builder</a>.</p> <p class="p">Role required: ui_builder_admin</p> </div> <ol class="ol steps"><li class="li step stepexpand"> <span class="ph cmd">Navigate to <span class="ph menucascade"><span class="ph uicontrol">All</span> > <span class="ph uicontrol">Now Experience Framework</span> > <span class="ph uicontrol">UI Builder</span></span>.</span> </li><li class="li step stepexpand"> <span class="ph cmd">Open a workspace experience to work in or create an experience by selecting <span class="ph uicontrol">+ Create experience</span>.</span> <div class="itemgroup info">For more information, see <a class="xref" href="create-experience.html" title="Learn how to create a workspace or portal experience for UI Builder in the ServiceNow platform.">Create an experience for UI Builder</a>.</div> </li><li class="li step stepexpand"> <span class="ph cmd">Open or create a page in your workspace experience.</span> </li><li class="li step stepexpand"> <span class="ph cmd">From <span class="ph uicontrol">Menu</span>, select <span class="ph uicontrol">Edit experience settings</span>.</span> </li><li class="li step stepexpand"> <span class="ph cmd">Make changes to your brand and theme.</span> <div class="itemgroup info">For more information about themes in <span class="ph">UI Builder</span>, see <a class="xref" href="../concept/work-themes.html" title="Themes enable you to change the visual style of your app's experiences so that they express the look and feel of your brand.">Themes in UI Builder</a>.</div> <table border="1" frame="hsides" rules="rows" cellpadding="4" cellspacing="0" summary="" class="simpletable choicetable choicetableborder" id="workspace-branding-theming-settings__choicetable_u54_5v2_h4b"><col style="width:50%" /><col style="width:50%" /><thead><tr class="sthead chhead"><th class="stentry choptionhd" style="vertical-align:bottom;text-align:left;" id="d558843e151-option">Action</th><th class="stentry chdeschd" style="vertical-align:bottom;text-align:left;" id="d558843e151-desc">Procedure</th></tr></thead><tbody><tr class="strow chrow"><th style="vertical-align:top;" headers="d558843e151-option" id="d558843e164" class="stentry choption">Apply a theme</th><td style="vertical-align:top;" headers="d558843e151-desc d558843e164" class="stentry chdesc"> <p class="p">Select <span class="ph uicontrol">Branding and theming</span>. If themes are available on your instance, select a theme from the list so that you can apply or change the theme for the workspace record on the platform, including the pages in the workspace experience.</p> <div class="fig fignone" id="workspace-branding-theming-settings__fig_lkr_51w_msb"><span class="figcap"><span class="fig--title-label">Figure 1. </span>Select a branding and theming for your workspace</span> <img class="image" id="workspace-branding-theming-settings__image_mkr_51w_msb" src="../image/UIB-experience-brandingtheme.png" height="252" width="396" alt="Select a branding and theming option for your experience." /> </div> </td></tr><tr class="strow chrow"><th style="vertical-align:top;" headers="d558843e151-option" id="d558843e191" class="stentry choption">Edit or change a theme</th><td style="vertical-align:top;" headers="d558843e151-desc d558843e191" class="stentry chdesc"> <ol class="ol" type="a" id="workspace-branding-theming-settings__ol_t4r_dw2_h4b"><li class="li">To edit the application record, navigate to <span class="ph menucascade"><span class="ph uicontrol">Branding and theming</span> > <span class="ph uicontrol">Advanced settings</span></span>. You are now in the <span class="ph">Now Platform</span> where you can edit the application record.</li><li class="li">Update the record in the platform when you are finished.</li><li class="li">To go back to your portal experience, select <span class="ph uicontrol">Open in UI Builder</span>. Refresh <span class="ph">UI Builder</span> to see the changes that you made to the branding and theming. <div class="fig fignone" id="workspace-branding-theming-settings__fig_yhn_31y_2qb"><span class="figcap"><span class="fig--title-label">Figure 2. </span>Workspace platform opens in UI Builder</span> <img class="image" id="workspace-branding-theming-settings__image_zhn_31y_2qb" src="../image/UIB-workspace-platform-openinuibuilder.png" alt="Workspace platform opens in UI Builder" /> </div> </li></ol> </td></tr><tr class="strow chrow"><th style="vertical-align:top;" headers="d558843e151-option" id="d558843e241" class="stentry choption">Create a theme</th><td style="vertical-align:top;" headers="d558843e151-desc d558843e241" class="stentry chdesc"> <ol class="ol" type="a" id="workspace-branding-theming-settings__ol_qbm_gw2_h4b"><li class="li">To create a theme record in the <span class="ph">Now Platform</span>, select <span class="ph uicontrol">Create a theme</span>. Then, fill in the new record details as described in the following steps. If a theme that you want is not available, create a theme in the platform and then apply it to your workspace experience from within <span class="ph">UI Builder</span>. Refresh <span class="ph">UI Builder</span> to see your applied theme.<div class="fig fignone" id="workspace-branding-theming-settings__fig_gcy_qjr_2qb"><span class="figcap"><span class="fig--title-label">Figure 3. </span>New theme record</span> <img class="image" id="workspace-branding-theming-settings__image_hcy_qjr_2qb" src="../image/UIB-new-theme-platform.png" height="510" width="454" alt="New theme record." /> </div> </li><li class="li">In the <span class="ph uicontrol">Name</span> field, enter a name for the theme</li><li class="li">In the <span class="ph uicontrol">Name</span> field, enter a name for the theme.</li><li class="li">Add a description. The description helps to identify what the theme does.</li><li class="li">In the <span class="ph uicontrol">Extends</span> field, search for an existing theme that extends to the theme that you are creating.</li><li class="li">Add an override theme, if needed.</li><li class="li">In the <span class="ph uicontrol">Theme</span> field, add any of the default CSS styles. The CSS is formatted as JSON. For more information about creating a theme, see <a class="xref" href="create-theme.html" title="Create a custom theme so that you can override default component styles. You can define your own style properties in a theme record.">Create a custom theme</a>.</li><li class="li">Ensure that the Active check box is<span class="ph uicontrol"></span> selected. If there are multiple themes, the theme that you apply takes precedence.</li><li class="li">Click <span class="ph uicontrol">Submit</span>.</li></ol> </td></tr></tbody></table> </li></ol> </div> <div class="related-links"> <div class="familylinks"> <div class="parentlink"><strong>Parent Topic:</strong> <a class="link" href="../../../administer/ui-builder/concept/ui-builder-workspace-settings.html" title="You can change the UI Builder workspace experience settings to fit your company goals.">UI Builder workspace experience settings</a></div> </div> </div></body></html></div>