Change Colors and Logo

You can change several aspects of the RollCall visual styling through the custom settings in the admin panel. 

Screen Shot 2017-11-03 at 10.26.41 AM.png

1. Click the gear icon to go to the admin section of RollCall. You will be put onto the Course Admin page.

2. Choose "RollCall Settings." 

Each setting has explanatory text next to it. You can change any or all of the color and header settings - we recommend you get your color scheme and a logo from your web developer if possible. If you're looking for complementary colors or to create a color palette yourself, we recommend free tools such as coolers.co or colormind.io which will provide 5 colors that work well on a web site and can be used effectively in the RollCall layout.

Colors in RollCall

By default, we use the colors you set in your settings to populate a style sheet. Keep reading to see how to upload your own stylesheet and override ours.

  • Darkest Color = the color that is in the background of the header and footer.
  • Bright Accent Color = the box of color under your top navigation icons, as well as the hover link color for the secondary navigation.
  • Save Button Color / Save Button Text Color = the color of the save buttons on your pages throughout the app.
  • Header Link Icon Color = the color of the calendar, gear and other icons in the header
  • Light Accent Color = the color of the text under the logo or header text on your header; also the color on action buttons throughout your app
  • Dark Accent Color = the color of the secondary navigation

Enter the hex code for the chosen color into the settings (e.g. #ffffff for white). You will have to refresh your screen after you save your changes.

Header Logo or Text

The RollCall logo image comes with RollCall by default. You can remove it entirely or replace it with your own. 

To replace the logo image:

  1. Make sure your image is a gif, jpg or png.  The maximum height of your image should be 60px, the maximum width should be 300px. 
  2. Right now you must be in Salesforce Classic to upload to Documents (do not use Files). From Classic, click the + button to view all objects, then click "Documents"
  3. Choose "HCA RollCall Folder" and click "Go"
  4. Click "New Document"
  5. Give the document a name (e.g. My Organization Logo)
  6. Make sure "Externally Available Image" is checked
  7. Upload your document and save
  8. Copy the name to your clipboard
  9. Paste it into RollCall Settings - Header Image. Use the name of the file (e.g. My Organization Logo).

If you don't want to use an image, you can simply delete the information from the Header Image setting. 

If there is nothing in the Header Image setting, the Header Text setting will display. 

Upload a Style Sheet

This section is for advanced administrators.

Use the example local stylesheet as a guide to which elements can be modified. As with all css, please be aware that significant changes to fonts or sizes may cause the page layout to behave in unexpected ways. We do not support custom styling through style sheets through our regular support, and will only assist you with uploading a stylesheet. We're sorry, but we cannot help with modifying or adjusting any styles, colors or fonts or troubleshooting your stylesheet.

When you have prepared your stylesheet, upload it as a static resource. You must upload the plain text sheet, you cannot upload a zip file or any nested directories to work with RollCall. Copy the name of your static resource and paste it into the Local Stylesheet custom setting in RollCall. You will need to refresh your page to see any changes.

 

 

Jenn Taylor