How do I customise the CPD Tracker

After reading this post, you will be able to edit the CPD tracker displayed on your site!

Please note, This is not a standard feature on your platform.

To get this functionality added to your administration site, please get in touch with your account manager.

  1. After logging into the "Administration" site, select the "Configuration" tab.
  2. Next, select the "CPD Theme" in the sidebar.
  3. Here you can select various components of the CPD tracker that you would like to make cosmetic changes to.

    1. background-colour: Changes the background where applicable, for any added activity logs. 

    2. border-colour: Changes the colour of boarders for interactable sections on the CPD tracker.

    3. border-radius: Makes the borders in the “Settings” menu have soft rounder edges and if applied, a large number of the edges will force an ovoid shape that will cut into some of the objects. We recommend keeping them for better readability on the site. This will also affect the border on the home page too.

    4. border-width: Controls the width of the border surrounding each interactable option.

    5. button-fill-colour: Colour of all button backgrounds, this Is usually set to white where it conflicts with most webpage browsers.

    6. button-text-colour: Sets the colour of text on many interactable section so the webpage.

    7. button-hover-colour: Will set hover over colours for the three buttons at the top of the screen, “Export CSV”, “Export PDF” and “+ Add”.     

    8. chart-hours-completed-colour: Background colour for all the completed hours that have been marked again a course type.

    9. chart-structured-hours-colour: Background colour for remaining structured hours shown on the CPD Tracker.

    10. chart-Unstructured-hours-colour: Background colour for remaining unstructured hours shown on the CPD Tracker.

    11. snapshot-panel-colour: Changes the background colour for the CPD tracker you would see on the homepage of the site.

    12. separator-colour:  Changes all on screen borders between content to the provided colour.

    13. primary-text-colour:  Sets the text colour for a majority of the text on screen.

    14. secondary-text-colour: Changes the accompanying text, used to provide descriptions to the users.

  4. When complete, select "+ Save" at the bottom of the screen and wait up to 5 minutes for the change to take affect.