How create a custom theme for indico web app?

Hi guys

I need to changes some elements for the default debranding indico theme as icons and images from the default indico theme

For example, I detect the following images and icon that to need changes for our debranding

images/
├── logo_indico_bw.png
├── indico_small.png
├── indico_square.png
├── indico.ico
└── logo_indico.png

Then If I create new plugin for override the theme, where I put the files?

For example, I need to put the files into the custom_theme/static/images/ directory right?

custom_theme/static/images/
├── logo_indico_bw.png
├── indico_small.png
├── indico_square.png
├── indico.ico
└── logo_indico.png

I am using the Indico v3.2.2

No, you cannot override images that way. If you really need to REPLACE files (at least the main logo URL can be configured via LOGO_URL in indico.conf), then I recommend adding aliases to your web server config (before the generic aliases for all the static files) - it’s the web server serving those files anyway, requests to them never hit the indico webapp so no customization overrides are possible.

I done this configuration, thanks :muscle:

If I understand your advice, I need create some Symbolic Links for my custom images right? as the following examples:

/opt/indico/web/static/images/logo_indico_bw.png → /opt/indico/.venv/lib/python3.9/site-packages/indico/web/static/images/logo_indico_bw.png

/opt/indico/web/static/images/indico_small.png → /opt/indico/.venv/lib/python3.9/site-packages/indico/web/static/images/indico_small.png

/opt/indico/web/static/images/indico_square.png → /opt/indico/.venv/lib/python3.9/site-packages/indico/web/static/images/indico_square.png

/opt/indico/web/static/images/indico.ico → /opt/indico/.venv/lib/python3.9/site-packages/indico/web/static/images/indico.ico

/opt/indico/web/static/images/logo_indico.png → /opt/indico/.venv/lib/python3.9/site-packages/indico/web/static/images/logo_indico.png

I can create those Symbolic Links using ln command on Debian Linux, or just replace those image directly, but if in the future I need upgrade the Indico software version, it is very possible that those images losed, because pip tool, uninstall the actual version and install the new version rigth?

What do you recomends?

No, do not create symlinks or replace/overwrite files - they’d indeed be lost during updates.

My recommendation is to edit the webserver config to add some extra aliases. For example, the nginx config in the setup guide has this:

  location ~ ^/(images|fonts)(.*)/(.+?)(__v[0-9a-f]+)?\.([^.]+)$ {
    alias /opt/indico/web/static/$1$2/$3.$5;
    access_log off;
  }

  location ~ ^/(css|dist|images|fonts)/(.*)$ {
    alias /opt/indico/web/static/$1/$2;
    access_log off;
  }

  location /robots.txt {
    alias /opt/indico/web/static/robots.txt;
    access_log off;
  }

Simply add additional location blocks similar to the one for /robots.txt before the 3 existing ones and point them to the locations of your custom files. The first one matching is used, so if your custom one matches, the file is served from your location instead of the default one.

Following this structure:

indico-custom-assets/
├── files
│ ├── favicon.ico
│ ├── logo_indico_bw.png
│ ├── logo_indico.png
│ ├── indico_small.png
│ └── indico_square.png
└── files
└── templates
└── core
└── footer.html

An example would be something like this:

location /images/logo_indico_bw.png {
alias /opt/indico/src/indico_custom_assets/files/logo_indico_bw.png;
access_log off;
}

location /images/indico_small.png {
alias /opt/indico/src/indico_custom_assets/files/indico_small.png;
access_log off;
}

location /images/indico_square.png {
alias /opt/indico/src/indico_custom_assets/files/indico_square.png;
access_log off;
}

location /images/indico.ico {
alias /opt/indico/src/indico_custom_assets/files/indico.ico;
access_log off;
}

location /images/logo_indico.png {
alias /opt/indico/src/indico_custom_assets/files/logo_indico.png;
access_log off;
}

In the /robots.txt file i don’t what include!!!

@ThiefMaster Maybe can help me with an example to adapt.

Leave it as is. ONLY add your new blocks for the files you want to serve from elsewhere.