---
sourceDocument: Australia ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/platform-user-interface

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Defining portal styles

# Defining portal styles {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Pages are made up of containers, columns, rows, widgets, and widget instances. You can
configure the CSS of each component, or use the CSS defined in theme and branding as global
definitions for the portal. If you do not define CSS in theme or branding, Bootstrap defaults are
used.

You can define CSS in your portal at multiple levels.  

Bootstrap defaults

:   If no other CSS is defined, all elements use Bootstrap version 3.3.6 defaults. You can use
    [Bootstrap CSS Helper Classes](https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp) with any Service Portal
    field that accepts CSS as a value. To show or hide Service Portal containers,
    use Bootstrap CSS Responsive Utilities Helper Classes such as `visible-lg` or
    `hidden-md`.

Branding editor theme colors/Portal CSS

:   CSS defined in the Branding Editor Theme Colors tab. Changes made to the theme colors in the
    Branding Editor appear in the CSS variables field in the portal table
    \[sp_portal\]. Customizing the theme colors overwrites the Bootstrap
    defaults.

Theme CSS

:   CSS defined in the CSS variables field in the Themes table \[sp_theme\]. Use the Theme CSS as
    much as possible to allow for more flexible evolution of your portal in the future.

    Using a theme overwrites the Portal CSS/Branding Editor theme colors.

Page CSS

:   CSS defined in the Page Specific CSS field in the Pages table \[sp_page\].

    Page-specific CSS overwrites the theme CSS.

CSS classes

:   You can define CSS classes elements on the page within each respective record.

Widget CSS

:   CSS defined in the CSS field in the Widgets table \[sp_widget\].

    Widget CSS overwrites container, column, and row CSS.

Widget instance CSS

:   CSS defined in the CSS field in the Instance table \[sp_instance\].

Widget instance CSS overwrites all other CSS definitions.  
Note:  
In some cases, default styles for accessibility might overwrite the CSS defined for a portal.  
Figure 1. Hierarchy of style application in the Service Portal
* **[Configure portal branding](https://servicenow-prod.fluidtopics.net/GgVKO~bkgTjHweInqo__hg)**   
  Use Branding Editor to give your portal its own look and feel.
* **[Activate La Jolla theme branding](https://servicenow-prod.fluidtopics.net/qd_tym4Tv7UM3Uiy_VMSSQ)**   
  Activate the Service Portal La Jolla Brand to apply ServiceNow branding, which includes WCAG-AA compliance for contrast. This plugin is active by default on new instances, but admins must activate the plugin on instances upgraded from earlier versions.
* **[Create a portal theme](https://servicenow-prod.fluidtopics.net/O0W7JKo8EioH0CYtUZSTnQ)**   
  If you need more customizations than the Branding Editor can provide, you can create your own custom theme.
* **[Enable text resize in your portal](https://servicenow-prod.fluidtopics.net/9RcySOGnKxWWFZgLyMXDJQ#enable-text-resize)**   
  Enable text resize to increase the size of your text up to 200% through your browser settings.
* **[Styling for right-to-left languages in portals](https://servicenow-prod.fluidtopics.net/BcFL7_kE4szF9Nk8wQfjKQ)**   
  Localizing a portal for right-to-left languages requires CSS that mirrors the direction of portal pages.