Organization Settings

Branding

Setting Your Custom Color Branding

As an administrator, you can customize the colors used in MyVolunteerPage.com (volunteer portal), Timeclock and MyVolunteerPage.com Mobile (i.e. myvolunteerpage.mobi) to match your organization’s color theme.

(If branding has been set by the administrator, volunteers that belong to multiple organizations can select the “Theme” they wish to use by going to their “MY PROFILE” tab and selecting “Contact Information”.)

  1. Go to Configuration >> Organization Settings >> Branding
  2. Click on the box for the desired setting to change.  Colors can be selected from a palette or by entering the specific “HEX code” value.
    • You can also click the [Choose the color from your banner] button beside each option to display a window containing your banner image. By clicking on an area in the banner, the corresponding HEX code value will be displayed for that color. Just click [OK] to use the selected color.
    • You can click on the [Info] button beside each section name to learn more about each of the settings.
  3. Consult the desired preview on the right side to see what your changes will look like:
    • MyVolunteerPage.com – settings for the volunteer portal
    • Timeclock – settings for the timeclock
    • MyVolunteerPage.com Mobile – settings for the volunteer portal when accessed from a mobile device (i.e. MyVolunteerPage.mobi)
  4. If you click the [Show All] button at the top left, settings you can change on all portals will be displayed in the left side.
  5. Scroll down and click the [Save] button.  Only one theme can be saved, but it can be cleared, enabling you to revert (i.e. the [Clear] button) to the default settings used for MyVolunteerPage.com.

[alert heading=”IMPORTANT:” type=”alert-danger” block=”false” close=”false”]If you clear your branding settings, you cannot retrieve them later.[/alert]

 

Settings Available

The following areas can be customized:


GENERAL

  • Banner Background (color for heading area around banner and tabs)
  • Title Bar Text (color for text that appears in the title bar area below the main tabs on all pages)
  • Page Background (color for the background of all pages)
  • Header
    • Text (color for header text in Timeclock and MyVolunteerPage.com Mobile)
    • Font Face (font face for header text in MyVolunteerPage.com)
    • Font Weight (font weight for header text in MyVolunteerPage.com)
  • Menu (menu tabs)
    • Tab Background (background color for all menu tabs)
    • Tab Text (text color for all menu tabs)
    • Tab Text Hover (text color for all menu tabs when hovering over them)
    • Active Tab Text (text color for the menu tab that is currently open)
    • Active Tab Text Hover (text color for the menu tab that is currently open when hovering over it)


SECTIONS

  • Heading 1 (background color, text color, font name, font weight):
    • HOME tab: Enterprise/Organization name header
    • OPPORTUNITIES tab: Activity Category header, Activity List header
    • SCHEDULE tab: Monthly Calendar Schedule header
    • REPORTS tab: HOURS header, FEEDBACK header, GOALS header
    • CONTACT tab: Send an Email header
    • MY PROFILE tab: Headers for Contact Information, Additional Info application form header, Qualifications application form header, Organizations, goals, Interests, Availability main header, Merge Profile
  • Heading 2 (background color, text color, font name, font weight):

    • HOME tab: News header, Mission Statement header, Image Gallery, header
  • Heading 3 (background color, text color, font name, font weight):

    • HOME tab: Get Social header, Files header, Public Opportunities header
    • OPPORTUNITIES tab: Filter Activities section header
    • HOURS tab: Log Hours header
    • REPORTS tab: Hours and Feedback Report header, Detailed Hours Report header
    • MY PROFILE tab: Privacy Settings header, themes header
  • Content (background color, text color):
    • Standard (contents of main header sections)
    • Sub Content (contents of sub-sections, sections that appear embedded/nested within another header section)


INFO BOX
(welcome box with name and assignments, contact summary)

  • Background (background color in headerless info boxes)
  • Border (border color around headerless info boxes)
  • Text (text color in headerless info boxes)
  • You can also select a specific font name and weight (bold or normal) for the text of your headerless info boxes.


DIALOG HEADERS
(pop-up dialogs)

  • Background (background color for pop-up dialog box header)
  • Text (text color for pop-up dialog box header)
  • You can also select a specific font name and weight (bold or normal) for the text of your dialog headers.


BUTTONS

  • Background color and Text color for:
    • Button 1
    • Button 1 Hover (when hovering over button 1)
    • Button 2
    • Button 2 Hover (when hovering over button 2)
  • You can also select a specific font name and weight (bold or normal) for the text of your buttons.

LINKS (link text)

  • Links (link text)
    • Text color for:
      • Regular (links that do not appear in tables)
      • Table (links that appear in tables such as Activities)

NOTICE (notices and notifications)

  • Background (background color in notices)
  • Border (border color around notices)
  • Text (text color in notices)
  • You can also select a specific font name and weight (bold or normal) for the text of your notices and notifications.

DATE PICKER

  • Header (area in heading above calendar date squares)
    • Header Background (background color in area behind month/year in Date Picker)
    • Day Names Text (text color for names of the days of the week in Date Picker
  • Body (calendar date squares below heading), Background color and Text color for:
    • Dates (date squares except for the current date)
    • Active Date (the current date)
    • Hover Date (any date square when hovering over it)

TABLE HEADINGS

  • Background color, Text color and Highlight Text (i.e. special text that is highlighted in the table heading) color for:
    • Table Heading 1
      • OPPORTUNITIES tab: Activity List header
      • SCHEDULE Tab: Activity List header
      • HOURS tab: Most Recent Entries header
      • MY PROFILE tab: Additional Info main header above custom fields, Qualifications main header above qualifications, Availability times of day header
    • Table Heading 2
      • REPORTS tab: HOURS data header, FEEDBACK data header, GOALS data header
    • Category (this is a row style within a table)

      • MY PROFILE tab: Additional Info / Custom Field headers [NOTE: Highlight Text color is not part of this option]
  • You can also select a specific font name and weight (bold or normal) for the text of your table headings and category.

REPORTS GRAPH

  • Reports Graph:
    • Data (data displayed in graph)
    • Month Labels (text for month axis labels)

OTHER

  • Mobile Address Bar: (text color for the address bar in MyVolunteerPage.com Mobile)

Branded Login Pages

Once you have branding configured, you can generate branded links to the login pages for MyVolunteerPage.com and the Timeclock.

Other Tutorials Related to Branding

Looking for something else?

[contentblock id=2]

Can't find what you're looking for? No problem... We're Here to Help!
[button text="Submit a support ticket to the Better Impact team" url="https://support.betterimpact.com" type="standard" target="_blank" extra_classes="" ]