Administrator

How do I customize the CSS?

Follow
Ryan Richins
  • Agilix team member

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 the overridable CSS class(es) listed in the table below.

Name Class Selector Styles Description
Header Background .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.
Top Header Background .buzz-top-header background Change the background color of the top portion of the header after login. Default value is Header Background.
Sub Header Background .buzz-sub-header background Change the background color of the bottom portion of the header after login. Default value is Header Background.

Note

  • If both Top Header Background and Sub Header Background are overridden, Header Background only has an effect on the sign-in page.

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.

Comments (2)

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 a much larger example, but not one configured for Buzz.

You can place the CSS file anywhere in the Resources tool (step 3). However, depending upon where you place it will change what the file path (step 8). 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?

Please sign in to leave a comment.