Skip To Main Content

Logo Image

ohm boces logo white

Logo Title

Buzz Customization Info

 
See the Buzz Customization Steps for the latest information. (July 28, 2016)
 
Most of the information on this page was for domain administrators and related to the changes made to Buzz customization in October 2015. The content below is for historical/background purposes only.
 
See these links for details on the new documentation/instructions on how to customize for Buzz. (10/01/2015) 
 
Buzz style changes
How do I configure my app themes? 
How do I customize the CSS?  On September 29, 2015, Aileen created a new stylesheet file, named Styles-boces.css and uploaded it to the Oneida sub-domain, using Buzz Configure - Manage Resources Tab. This was in preparation for the new login screen being launched on October 1, 2015. The content of this style sheet only contained those elements that we wanted to override in the selected Theme - Our selected theme was the one named - LightBlue - Note - Lesson learned - do not override any styles, for your theme, except those for the login screen. 
 
Below is the content of the file that was uploaded to the oneida subdomain resources folder.
It only changes the background color and the font color used on the buzz-login elements.
This style cascades down through all the oneida sub-domains.
It changed 4 elements from the  LightBlue theme to our desired colors
 
login page background color changed to WHITE
login page  content area font color was changed to BLACK.
login page top header bar background color change to BOCES Blue color
login page top header bar font color changed to CREAM color
Styles-boces.css as of Oct 2
 
div.buzz-login-page {
    background-color: #ffffff; 
    color: #000000;
}
div.buzz-login-page-top {
    background-color: #276390; 
    color: #fdfdfd;
}
div.buzz-login-page div.buzz-login-page-bottom div.buzz-login-content div.buzz-login-content-title {
    color: #000000;
}
div.buzz-login-page div.buzz-login-page-bottom {
    background-color: rgba(255,255,255,1);
}
.buzz-login-page-bottom{
 rgba(255,255,255,1);
}
 
 
 
How do I customize my sign-in screen?  
 
 
Customization Design Tools 
 
 
 
This is the common set of font icons that can be used as Main menu item icon images.
 
They can be specified in the settings.xml in the following manner: 
 
icon - The Bootstrap glyphicon or Font Awesome icon name to use for the menu item.
Prefix Font Awesome icon names with fa-
 
SAMPLE:
 
<menuentry-list>
         <menuentry id="todo" title="Ready to Grade" order="1.5" show="true" icon="fa-pencil" role="teacher" />
</menuentry-list> 
 
 
 
 
 
 
Use this web based tool to select the corresponding hex and/or RGB (red,green,blue) values when testing customization options for the variables that can be customized. 
 
BrainHoney vs. Buzz Tool Name Comparisons
 
 BrainHoney Tool Name  Buzz Tool Name
 Communicate  Communication
 Dashboard  People
 Todo List  Home
 Critical Students List  People
 Gradebook  Performance
 Objectives  Mastery
 Final Grades

 Final Grades (In Performance)
 Syllabus Curriculum Map
 View  Activities
 Calendar  Calendar
 Digital Library

 Search Library (In the Curriculum Map)
 
Free Avatars - search for free avatars to load for students.
Be sure to only select those avatars that are "commercial-use and free". Those avatars will not require a link back to the owner. 
 
 
The information below will become obsolete as of October 1, 2015. At that time, Agilix will cease using .less files for style sheet control.
 
Creating .less files for setting variable values for customizing colors
 
I had to create the customization variables.less file using the NotePad++ free editing tool.
The tool can be downloaded for free. Notepad++
 
Here is a sample of the content of a variables.less file.
If the variables.less file is uploaded as a Resource file AND it is specified in the settings.xml, it will over-ride the default values.
Here are some sample specifications in the variables.less file 
 
@loginTopColor: rgba(32, 32, 32, 0.7);
@loginStudentColor: rgba(21,68,81,0.7);
@loginTeacherColor: rgba(40,79,128,0.73);
@loginParentColor: rgba(226,120,56,0.7);
@loginAdminColor: rgba(116,116,116,0.7);
@mainColor: rgba(93,137,192,1); 
 
 
 Refer to Buzz Styling Training Guide for instructions about what the variables stand for, how to upload the variables.less file and how to specify the file in the settings.xml. Our local copy of the file is here Buzz Styling Training Guide - pdf file
 
Here are some common variables that can be customized
 
Login Page Styles
 
         
 @loginTextColor:   Controls the color of the text on the login page
 @loginTopColor:  Controls the color of the top portion of the login page
 @loginStudentColor:  Controls the color of the student tab
 @loginTeacherColor:  Controls the color of the teacher tab
 @loginParentColor:  Controls the color of the parent tab
 @loginAdminColor:   Controls the color of the admin tab 
 
 
 
Application Styles
 @mainColor: Controls the color of the main top bar among other items 
 @subBarColor: Controls the color of the main navigation bar 
 @defaultCourseColor: Sets a default course color. Teachers can customize this color for each course