Customizing colors

[maria-antoniak]

I'm wondering whether it's possible to customize the colors and other aesthetic features of the interface. Poking around in the repo, I wasn't able to find a place where the color palette is defined (the grays and navy blues of the default base_template). Is there an easy way to do this, or is it more complicated than I expected? (This is extremely non-urgent; just curious!)

[Jiaxin-Pei]

Hi @maria-antoniak, yes!

The aesthetic features are generally defined by the css settings in the header template. By default, each project is using the default header . For example, the legend is defined here

            legend {
                background-color: #160085;
                color: white;
                padding: 5px 5px;
                font-size: 13pt;
                font-weight: bold;
            }

If you want to use customized color, you could copy the default header template into the templates folder into your project directory, and change the header_file key's value from default to templates/header.html, then all your edits to this new header file will be used.

    # The core UI files for Potato. You should not need to change these normally.
    #
    # Exceptions to this might include:
    # 1) You want to add custom CSS/fonts to style your task
    # 2) Your layout requires additional JS/assets to render
    # 3) You want to support additional keybinding magic
    #
    # if you want to use your own template,
    # please replace the string as a path to the template
    "base_html_template": "default",
    "header_file": "templates/header.html",

For example, if changing the color to tomato:

            legend {
                background-color: tomato;
                color: white;
                padding: 5px 5px;
                font-size: 13pt;
                font-weight: bold;
            }

The color of all the legends will be changed.

The navigation bar, however, is defined in another template file. To customize this file, you could follow a similar step copying it into the templates folder under your project directory, and edit the base_html_template file:

    "base_html_template": "templates/base_template.html",
    "header_file": "templates/header.html",

Then if you edit the navigation bar tag, the background color of it will also be changed

    <nav class="navbar navbar-expand-md navbar-dark mb-3" style="background-color:tomato;">

Simply put, via editing the template files, you have full control over the style of you pages and everything is compatible with the potato-annotation python package (you can still potato start your-project).

  "html_layout": "templates/layout.html",
  "base_html_template": "templates/base.html",
  "header_file": "templates/header.html",

[maria-antoniak]

Ah this is awesome, thank you!!