Administrator

How do I customize my domain's brand, styles, and themes?

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

Easily customize your domain's look and feel.

Open Settings in the Domain toolbar.

Select Styles & Themes.

From here you can control a lot:

  • Styles: Click Add to upload Cascade Style Sheets (CSS) to overwrite existing app styles. Buzz loads default styles first, followed by each file in order. Buzz supports the overridable CSS classes listed in this table.
  • Theme: Buzz allows you to customize its look and feel to match your organizations brand. From this screen, you can control the following theme components:
    • Icon: Upload the image to use for the application favicon.
      • Required file type: PNG
      • Ideal size: 42x42
    • Touch Icon: Upload the image to use when a user saves their Buzz website to their homescreen. This only applies to Apple iOS devices.
      • Required file type: PNG
      • Ideal size: 192x192
    • Logo: Upload the image to use for the application logo.
      • Required file type: PNG or JPG
      • Ideal size: 72x72
    • Login Logo: Upload the image to use for the sign-in screen. If not specified, uses the logo image.
      • Required file type: PNG or JPG
      • Ideal size: 256x256
    • Background: Upload the background image to use for the default theme and sign-in screen. The default is a color that matches the theme color.
      • Recommended file type: JPG
      • Ideal size: 1600x1200
    • Thumbnail: Upload the thumbnail background image to use for the default theme.
      • Recommended file type: JPG
      • Ideal size: 150x112
    • Menu Logo: Upload the logo displayed in the Main Menu when expanded.
      • Recommended file type: PNG
      • Ideal size: 260x56
    • Menu Icon: If you'd like to change your Main Menu Icon, choose from the Font Awesome icon library. Prefix Font Awesome icon names with fa-. The default value is fa-bars.
    • Theme: Choose the app's default theme color from the dropdown.
    • Limit Themes: If you want to limit the theme color choices, enter the colors that you want to allow as options in this field. Separate colors with commas.
    • Login Page: Indicate whether you want to use a file or URL for a custom login page background image. Upload the file or provide the URL.
    • Add Background: Click this to provide users with alternative background options. Be aware that if you add any backgrounds, you must use the Add Background feature to add and specify all backgrounds that you want available to users, including Buzz's built-in backgrounds. To add a background, you are asked to provide a Title and choose or upload:
      • The full-screen background in the first field
        • Recommended file type: JPG
        • Ideal size: 1600x1200
      • The background's thumbnail in the second field.
        • Recommended file type: JPG
        • Ideal size: 150x112

Notes

  • Domain configuration is inherited by all subdomains unless explicitly overwritten by a subdomain.
  • For better display on high-density screen, store any image with a resolution two times the rendered size. For better performance, store large images as compressed JPG files.
New UI

Easily customize your domain's look and feel.

 

  1. Open the side menu in Domain > Details.  
  2. Select Edit Settings.
  1. On the Themes card, provide the following theme components:
    • Icon: Upload the image to use for the application favicon.
      • Required file type: PNG
      • Ideal size: 42x42
    • Touch Icon: Upload the image to use when a user saves their Buzz website to their homescreen. This only applies to Apple iOS devices.
      • Required file type: PNG
      • Ideal size: 192x192
    • Logo: Upload the image to use for the application logo.
      • Required file type: PNG or JPG
      • Ideal size: 72x72
    • Login Logo: Upload the image to use for the sign-in screen. If not specified, uses the logo image.
      • Required file type: PNG or JPG
      • Ideal size: 256x256
    • Menu Logo: Upload the logo displayed in the Main Menu when expanded.
      • Recommended file type: PNG
      • Ideal size: 260x56
    • Menu Icon: If you'd like to change your Main Menu Icon, choose from the Font Awesome icon library. Prefix Font Awesome icon names with fa-. The default value is fa-bars.
    • Theme: Choose the app's default theme color from the dropdown.
    • Limit Themes: If you want to limit the theme color choices, enter the colors that you want to allow as options in this field. Separate colors with commas.
    • Login Page: Indicate whether you want to use a file or URL for a custom login page background image. Upload the file or provide the URL in the field below.

Notes

  • Domain configuration is inherited by all subdomains unless explicitly overwritten by a subdomain.
  • For better display on high-density screen, store any image with a resolution two times the rendered size. For better performance, store large images as compressed JPG files.

Comments (8)

Sort by
Kim Gehring

Previously we could edit login pages using the Login Page Text < edit option and the XML editor option.  This is no longer working as I would expect I am hoping you can help!

1. How do we now access the XML area to update/customize text in the upper left of the login page?

2. How do we add images to the Text < edit area so that they display? 

Looking at the new access to settings < themes, after insertng a 400x400 png in the Login Page < Text < Edit area, it is not displaying on the Login Page. 

I am seeing this.

 

Thank you!

 

Brad Marshall
  • Agilix team member

Hey Kim:

1) You access the "XML Editor" from going to the "Show text editor" option in the top right.

2) That is a bug that I have filed with our dev team.

 

Kim Gehring

Thank you Brad!  Appreciate your super fast and proactive response. We will stay tuned in for resolution on #2.

Kim Gehring

We are happy to see the images are now working when placed in the Login Page text editor. 

A challenge I am noting is that the images default to fit a 300x300 pixel area.  Previously the recommended size was 400x400.  I also am noting that the 300x300 is now mobile compatible while 400x400 is not. 

This presents an issue for us when uploading a program logo that is horizontal.  The smaller size displays the logo much smaller on pc/laptop screens so that the Logo text is no longer at a good scale as compared to the upper left text in the header bar. (Often the upper left text will look bigger than the logo text) Even with some of the vertical logos- they look much more proportionate at 400x400 on pc/laptops.

 

Is there any chance the 400x400 default can be returned?

Brian Williams
  • Agilix team member

Hello Kim!

I am unsure where you are getting 300 or 400 as the default value? In this document the ideal size is 256x256 and is resized to that value if the image is larger than that. I tested uploading an image and it defaulted to 256x256. 

Kim Gehring

Hi Brian, 

The Login Logo requires 256x256.  However we do not use the actual Login Logo field but the Login Page Text Editor.   Once an image is dropped into this area it is sized to 300 width.  I see this when clicking on the "change size" icon.   After placing images in this area at a width of 300 they center well on mobile view.  Previously the text editor behaved the same but used a 400 width.  Does that help?

 

Brian Williams
  • Agilix team member

It's expected that images may appear as a different size between a computer's screen and a mobile device. They utilize different resolutions that will impact how images are displayed. Users may manually edit the image to a different size from the default value of 300x300 through the edit image size button as depicted in your screenshot. We will take into consideration changing the default value.  

Kim Gehring

Thanks.  Appreciate your passing along the consideration!

We are wanting the image to look good both on mobile and PC views.  With the current default we would have to sacrifice one or the other (as referenced earlier). This wasn't an issue when the default was 400.  

Please sign in to leave a comment.