How do I customize the CSS?

Ryan Richins
  • Agilix team member
  • Updated:

Cascade Style Sheets (CSS) can be uploaded to Buzz to overwrite existing app styles. Buzz loads default styles first, followed by each file in order. Buzz supports an overridable CSS class listed for the Header Background:

Name Class Selector Styles Description
Header Background .buzz-main-header

.app-theme .buzz-main-header
background Change the background color of the toolbar and sign-in bar. This will overwrite any default theme or theme color selected by the user. Default value is the dark theme color.

  • To ensure that your color overrides the default, you must include !important after the color (see example).
  • Because we are accommodating two UIs currently, you must include both Class Selectors separated by a comma (see example). 

Header Background override example

.app-theme .buzz-main-header, .buzz-main-header {
     background: #e9f9d8 !important;

Upload your CSS file and configure Buzz Settings

To configure your custom CSS in your domain:

  1. Upload your CSS file to Resources:
    • Name your file style.css
    • Upload the file to Resources > public > shadow > app > buzz
  2. Open the side menu in Domain > Details.  
  3. Select Edit Settings.
  1. Open the Text editor from the toolbar.
  1. Add the following code to Application Settings to point to your CSS file:
     <file path=“style.css” order=“1" />
  1. Save.


  • Domain configuration is inherited by all subdomains unless explicitly overwritten by a subdomain.

Comments (3)

Sort by
Ryan Nelson

This is helpful Brad!  Can you add two things to this documentation?  One is an example CSS file along with where to navigate to upload the CSS file.

Brad Marshall
  • Agilix team member

Hello Ryan:

The CSS file could look like this, if the only thing you were modifying was the Header Background.

.buzz-main-header {
background: #e9f9d8;

You would save this block of code in a file with an extension of '.css'. Here is an example.

You can place the CSS file anywhere in the Resources tool. However, depending upon where you place it will change what the file path. If you place it in the top-level folder titled "Resources," then you will simply just use the filename as the path. If you place it inside an existing folder, for example "styles," then your path would be "styles/filename.css." 

Does this help?

Shaun Creighton

I am trying to modify our CSS to change the default font on user-created content for a more uniform look. I have created a CSS file, uploaded it to Resources, and added the link to the CSS file in the domain XML, but the style is not taking effect. I can even see the styles loaded when I inspect the styles in Chrome, but they are being overridden by CSS from a different CSS file (see the image below ... the bottom part is from my custom CSS, but it's crossed out in favor of the top part). The CSS file I uploaded is very short:

.content {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;

Any ideas how to get this to stick.

Please sign in to leave a comment.