Customize appearance of the front end¶

Below we show a few examples of how to customize the Gen3 Data Portal.

For a more technical and complete background, see portal configurations on GitHub.

Customize the image that appears on the Login Page with a vector graphic (eg. *.svg) of your choice.

Login Page

Review code to include the path-to-image in gitops.json.

Customize the text that appears on the Login Page by specifying title, description, subtitle, contact, or email.

Review the code to edit title, subtitle, text, contact, and email.

Landing Page¶

Information on Commons¶

Customize the name of the Data Commons, the info text, and the button below that appear on the top left side of the Landing Page after logging in.

landingpage_info

Review the code to edit heading, text, and link.

Summary Statistics¶

Customize the summary statistics that appear on the top right side of the Landing Page after logging in. The attributes are graphQL fields, which must be in the dictionary, configured in the etlMapping.yaml, and populated with data on the backend.

landingpage_counts

Cards¶

Customize the cards that appear on the bottom of the Landing Page after logging in.

landingpage_cards

Review the code to edit name, icons, body, link, and label of the cards.
Adding a new icon requires saving the icon in this repository and in this file.

Customize the icons, link, and names that appear on the Data Commons navigation bar. The "tooltip" shows text upon hovering over the icon.

navigationbar

[Review the code to edit icon, link, color, tooltip, and name of the navigation items][gitops.json navbar].
Adding a new icon requires saving the icon in this repository and [in this file][icons inex].