{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":42436,"path":"platform-user-interface/service-portal/c_CustomCSS.md","title":"Create a portal theme","bundle":null,"doc_type":null,"release":"australia","body":"\n# Create a portal theme\n\nIf you need more customizations than the Branding Editor can provide, you can create your own custom theme.\n\nOnly users with an understanding of CSS should create custom themes.\n\n1.  Navigate to **Service Portal** &gt; **Themes**, then select **New**.\n2.  Complete the form fields and then from the form context menu, select **Save**.\n\n<table id=\"table_anh_ljr_mz\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nName\n\n</td><td>\n\nName of your theme. Use this name to associate the theme with your portal. This name isn't visible to users.\n\n</td></tr><tr><td>\n\nTurn off SCSS compilation\n\n</td><td>\n\nTurns off compiling SCSS and sends the plain CSS file directly to the client.\n\n</td></tr><tr><td>\n\nApplication\n\n</td><td>\n\nThe record scope. The header menu record and the source table must have the same application scope.\n\n</td></tr><tr><td>\n\nHeader\n\n</td><td>\n\nList of headers and footers from the sp\\_header\\_footer table that you can associate with a portal theme. Headers and footers are widgets and can be configured the same way.\n\n</td></tr><tr><td>\n\nFooter\n\n</td><td>\n\nList of headers and footers from the sp\\_header\\_footer table that you can associate with a portal theme.\n\n</td></tr><tr><td>\n\nFixed header\n\n</td><td>\n\nLocks the header at the top of the page so that when you scroll, the header remains on the screen.\n\n</td></tr><tr><td>\n\nFixed footer\n\n</td><td>\n\nLocks the footer at the bottom of the page so that when you scroll, the footer remains on the screen.\n\n</td></tr><tr><td>\n\nCSS variables\n\n</td><td>\n\nCSS custom properties that you can use to change the color and styles in a portal. For example, the stock theme uses some of the following variables:```\n$sp-logo-margin-x: \t\t15px !default;\n$sp-tagline-color:\t\t$text-color !default;\n$navbar-inverse-bg: \t#3a3f51 !default;\n```\n\n **Note:** Use the CSS variables field to define CSS variables only. Use CSS Includes to define CSS rules. As of the Madrid release, Sass and LESS can be used within CSS Includes.\n\n</td></tr></tbody>\n</table>3.  To add a style sheet to the theme, in the **CSS Include** related list, select **New**.\n4.  Complete the style sheet form fields and select **Submit**.\n\n<table id=\"table_ew1_jjr_mz\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nName\n\n</td><td>\n\nName of the CSS Include. Remember this name to associate the CSS Include with the theme.\n\n</td></tr><tr><td>\n\nApplication\n\n</td><td>\n\nThe record scope. The header menu record and the source table must have the same application scope.\n\n</td></tr><tr><td>\n\nSource\n\n</td><td>\n\nSelect one of the following options:-   **Style Sheet**: Add an internal style sheet that has been uploaded to the CSS table \\[sp\\_css\\]. For example, ng-sortable.min.css. Internal style sheets use standard CSS in the CSS field.\n-   **URL**: Link to an external style sheet. Use external style sheets to use the same CSS as a corporate website or other online resource.\n\n\n</td></tr><tr><td>\n\nStyle sheet\n\n</td><td>\n\nAn internal style sheet to associate with the theme.\n\n</td></tr><tr><td>\n\nCSS file URL\n\n</td><td>\n\nA URL to an external style sheet to associate with the theme.\n\n</td></tr><tr><td>\n\nLazy Load\n\n</td><td>\n\nOption to load the CSS Include asynchronously to improve page load time. This option should be set to the same value for all CSS Includes of a theme. Enabling asynchronous loading for only some CSS Includes associated with a theme isn’t recommended.\n\n **Note:** Enabling **Lazy Load** isn’t recommended for portals with flashing of unstyled content.\n\n The CSS Includes with **Lazy Load** enabled are listed in the **Lazy load CSS includes** related list in the theme record.\n\n</td></tr><tr><td>\n\nRTL CSS file URL\n\n</td><td>\n\nA URL to an external style sheet for mirroring the direction of a portal when the session language is a right-to-left language, such as Hebrew.\n\n For information about support for right-to-left languages, see [Styling for right-to-left languages in portals](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/styling-right-to-left-languages.md).\n\n</td></tr></tbody>\n</table>5.  To add a JavaScript include to the theme, in the **JS Include** related list, select **New**.\n6.  Complete the JS Include form fields and select **Submit**.\n\n<table id=\"table_d4l_1bn_b1b\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nDisplay name\n\n</td><td>\n\nName of the JS Include. Remember this name to associate the JS Include with the theme.\n\n</td></tr><tr><td>\n\nApplication\n\n</td><td>\n\nThe record scope. The header menu record and the source table must have the same application scope.\n\n</td></tr><tr><td>\n\nSource\n\n</td><td>\n\nSelect one of the following options:-   **UI Script**: Add an internal UI script that has been uploaded to the UI script table \\[sys\\_ui\\_script\\]. Use UI scripts to create client-side JavaScript and reuse it in multiple locations. For more information on UI scripts, see UI scripts.\n-   **URL**: Link to an external JavaScript file. Use external URLs to use the same JavaScript as a corporate website or other online resource.\n\n\n</td></tr><tr><td>\n\nUI Script or JS file URL\n\n</td><td>\n\nAssociate an internal UI script or JavaScript file URL, depending on which option you select in the Source field.\n\n</td></tr><tr><td>\n\nUpdated\n\n</td><td>\n\nDate and time that the JS Include was last updated\n\n</td></tr><tr><td>\n\nPackage\n\n</td><td>\n\nThe Service Portal package that the JS include is associated with. For example, Service Portal Configuration Pages. This field is populated by default.\n\n</td></tr></tbody>\n</table>\n-   **[Enable dark theme](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/enable-dark-theme.md)**  \nUse Coral dark theme on a portal to improve focus, readability, and accessibility.\n-   **[Create a theme variant](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/create-theme-variant.md)**  \nCreate a theme variant from the Coral theme. A theme variant uses customizable styling CSS variables and branding options to tailor the visual experience for your users.\n\n**Parent Topic:**[Defining portal styles](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/portal-css.md)\n\n"}}