Administrator

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

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

Easily customize your domain's look and feel.

  1. Open the vertical menu in the toolbar of Domain Details.  
  2. Select Domain 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: Change your Main Menu Icon; review your icon options (the default value is "fa-bars" from the Font Awesome Pro library).
    • Toolbar color: If you want to change the color of your main toolbar throughout the domain, enter that color name here. All CSS colors are valid; click for a list of colors.
      • Note: Specifying a color here overrides the ability for students and other users to choose their own theme colors (with the exception of the High Contrast setting).
    • Application tabs color: If you want to change the color of your sub-toolbar throughout the domain, enter that color name here. All CSS colors are valid; click for a list of colors.
      • Note: Specifying a color here overrides the ability for students and other users to choose their own theme colors (with the exception of the High Contrast setting).
    • 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!

 

0 Comment actions Permalink
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.

 

1 Comment actions Permalink
Kim Gehring

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

0 Comment actions Permalink
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?

0 Comment actions Permalink
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. 

0 Comment actions Permalink
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?

 

0 Comment actions Permalink
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.  

0 Comment actions Permalink
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.  

0 Comment actions Permalink
Please sign in to leave a comment.