Administrator

How do I customize the CSS?

Follow
Ryan Richins
  • Agilix team member
  • Updated:
    info_outline
    Created:

During the summer of 2017, we released a new Buzz UI, giving you the same features and functionality with a cleaner, simpler user experience!

Until all users have switched to the new UI, our Help Center articles will include information for both. 

Click the header below that aligns with the Buzz UI version you are using (Old UI or New UI); if you don't know which version you are using, review the differences and/or contact your system admin or Agilix account manager.

Old UI

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 file

To configure your custom CSS in your domain:

  1. Open the Settings in the Domain toolbar.
Upload your file
  1. Select Styles & Themes.
  2. Click Add under Styles and click the upload icon.
  1. Browse to the resource folder in which you want to save your CSS file or create a new folder for it by clicking the plus sign.
  2. Click Upload, click Choose File, find the CSS file on your computer and click Upload. Note that you can give the file a name other than the filename if you want.
  3. Click the file and click Select.

Notes

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

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:
<style>
   <file-list>
     <file path=“style.css” order=“1" />
   </file-list>
</style>
  1. Save.

Notes

  • 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.