Buzz Customization - Details

  • The default Buzz application contains a default color theme, styles, icons, and menu structure.Most organizations prefer to customize the application so that it looks and feels as if it were created by the institution. 

    System administrators can customize or override default application settings, such as styles, colors, landing-page icons, and menus. 
     
    Configuration File 
    The starting point for application configuration is a resource file named settings.xml. Buzz site administrators can store it in the domain that is the highest-level domain to use that configuration. Any child domains automatically inherit the settings unless they override specific settings. The configuration file and other supporting files, such as style files, or image files, are the means to customize a Buzz site. Supporting files, such as style files, or image files, can also be inherited or overridden in child domains.

    For example, to customize the Buzz site for a district, Site Administrators store the file in the district's domain, and all school domains beneath the district use the same configuration. 
     
    Buzz Site's Customized Colors
     Customized Colors are established in the style sheet for the page defined in a file named Styleshomepage.css. 
     
    Site administrators can set the following areas on the Buzz site, to your selected color using the hexadecimal number value you submit to us, by modifying the file named Styleshomepage.css. 
     
    The <defaultTheme> is setup by the Admin of the site.

    Defines the default theme for the application. For better display on high-density screen, you should store any image with a resolution two times the rendered size. The size values listed below are the exact sizes that the Buzz Customization team will need from you for these images. For better performance, you should store large images as a compressed JPG files. Customized buzz sites can have define the default theme options that contain these attributes:

      • icon - This is the image to use for the site's favicon. A favicon appears in the browser bar and bookmarks. The image must be a PNG. The ideal size for this image is 84x84. (the favicon looks best if its background layer color is white instead of transparent)  Here is a sample of the image used on the Oneida Boces Buzz site: icon.png

      • touchIcon - This is the image to use for the site's mobile device touch, or home screen, icon. The image must be a PNG. The ideal size for this image is 384x384. Here is a sample of the  image used on the Oneida BOCES Buzz site: touchIcon 

      • logo - The image must be a PNG or JPG. The ideal size for this image is 144x144. (the logo looks best if its background layer color is white instead of transparent). It appears in the upper left corner of the Login Page. Here is the sample used on the Oneida BOCES subdomain: logo.png

      • loginLogo - Relative path to the image to use for the login screen. The image must be a PNG or JPG. The ideal size for this image is 512x512. If not specified, uses the logo image. This image is not needed if you are requesting a customization that uses the banner header image and the Font Awesome navigation icons. Here is a sample of the image used on an older version of the Oneida Boces login page: loginLogo

      • background - The ideal size for this image is 1600x1200.  See information below on backgrounds. Default is a color that matches the color scheme, or theme. Here is a sample of the image used on the Oneida Boces logged in users pages. This is a gray background image. It was stored at the NYBOCES level so that it could be used on all sites. If you do not want to over-ride this image you do not need to supply your own: background_images.png

      • backgroundThumbnail - This is the corresponding thumbnail image to show the logged in user when they want to select the site's default background image. See information below on backgrounds. The ideal size for this image is 150x112. Here is a sample of the image used on the Oneida Boces logged in users pages. This is a gray background image. It was stored at the NYBOCES level so that it could be used on all sites. If you do not want to over-ride this image you do not need to supply your own: background_image.png

      • sideMenuLogo - The logo will be scaled and centered to fit into a 260x56 area. The default image is the Buzz logo. Here is a sample of the image used on the Oneida Boces Buzz site: sideMenuLogo

    • theme - The default color scheme, or theme, to use. Valid values are any of the Color Schemes listed here: https://support.agilix.com/hc/en-us/articles/205819079.< /br>

      Theme Colors

      By default, all theme colors are available to users to select. Administrators can define the themes colors that are available for the users to choose. The theme colors are listed in the table below. For the Oneida BOCES Buzz site, we selected LightBlue for the logged in use's theme color because it went well with the loginpage main header/splash image colors.

      Name Color (dark version)
      Red #B71C1C
      Pink #880E4F
      Purple #4A148C
      DeepPurple #311B92
      Indigo #1A237E
      Blue #0D47A1
      LightBlue #01579B
      Cyan #006064
      Teal #004D40
      Green #1B5E20
      LightGreen #33691E
      Lime #827717
      Amber #FF6F00
      Orange #E65100
      DeepOrange #BF360C
      Brown #3E2723
      Grey #212121
      BlueGrey #263238
      HighContrast red, white
    • loginPage - Specify either a HTML resource with a relative path starting at public/shadow/app/buzz or a fully qualified URL to overwrite the default login page. To reference images, or other resources, from within a relative HTML page, use the absolute prefix /Resource/<DomainId>/public/shadow/app/buzz/<PathToFile>, where <DomainId> is the id of the domain containing the resource and <PathToFile> is the relative path to the file.

      Beneath this element you can include the following elements:

    • <themes><theme>

      Optionally defines the list of themes that are available for the student to choose. If set, you must specify the entire list of themes, or color schemes, to show. 

      • name - The name of the theme, or color scheme, to show. 
    • <backgrounds><background>

      Optionally defines the list of background images that are available for the student to choose. If set, you must specify the entire list of background images to show. The default background image is always a choice. This element contains these attributes:

        • name - The name of the background image to show. Otherwise, supply a unique name for a custom background.

        • path - Relative path to a custom background image. The ideal size for this image is 1600x1200.

      • thumbnail - Relative path to a custom background image thumbnail. The ideal size for this image is 150x112.
    Other Images

    • avatar - The image must be a PNG format. Avatar images should be 300x300 pixels. Here is a sample of an avatar image. gradfemale_avatar.png
    • badge - badge images should be 90 x 90 pixels. Here is an example of a badge icon image. This image is not used in the Oneida subdomain and was only used for sample site: icon_character.png
    • bookmark icon - bookmark images should be 400 x 400 pixels. Here is a sample of a bookmark image used on the Oneida Boces Buzz site: bookmark_contact_us_400x400.png
    • course card - images should be 350 x 350 pixels - These images should be set up by the Course author. Here is a sample of a course card image: thumbnail.png
     
    Please address questions or concerns to:
     
    Greg Smith
Last Modified on October 3, 2017