The default custom Data Commons image provides a bare-bones UI that you will undoubtedly want to customize to your liking. Data Commons uses the Python Flask web framework and Jinja HTML templates. If you’re not familiar with these, the following documents are good starting points:

HTML and CSS customization files are provided as samples to get you started. They are as follows:

Directory/files	Description
`server/templates/custom_dc/custom/base.html`	Template file for the site's header and footer. More details below.
`server/templates/custom_dc/custom/homepage.html`	Template file for the site's home page
`server/templates/custom_dc/custom/browser_landing.html`	Template file for the Graph Browser landing page. You can change the default text.
`static/custom_dc/custom/overrides.css`	Stylesheet overrides for the site.
`static/custom_dc/custom/logo.png`	Sample logo file – replace with your own.

Note that the custom parent directory is customizable as the FLASK_ENV environment variable. You can rename the directory as desired and update the environment variable in custom_dc/env.list.

To enable the changes to be picked up by the Docker image, and allow you to refresh the browser for further changes, restart the Docker image with this additional flag to map the directories to the Docker workspace:

-v $PWD/server/templates/custom_dc/custom:/workspace/server/templates/custom_dc/custom
-v $PWD/static/custom_dc/custom:/workspace/static/custom_dc/custom

If you have renamed the parent custom directory, be sure to use that name in the flag.

Customize HTML templates

You can customize the page header and footer (by default, empty) in base.html by adding or changing the HTML elements within the <header></header> and <footer></footer> tags, respectively.

Customize Javascript and styles

Use the overrides.css file to customize the default Data Commons styles. The file provides a default color override. You can add all style overrides to that file.

Alternatively, if you have existing existing CSS and Javascript files, put them under the /static/custom_dc/custom folder. Then include these files in the <head> section of the corresponding HTML files as:

<link href="/custom_dc/custom/FILENAME.css|js" rel="stylesheet" />

See server/templates/custom_dc/custom/new.html as an example.

Note: Currently, making changes to any of the files in the static/ directory, even if you’re testing locally, requires that you rebuild a local version of the repo to pick up the changes, as described in Build a local image. We plan to fix this in the near future.