V 3.1 customization


I would like to customize my indico instance but have troubles in understanding how to do it.
In /opt/indico I have created the folder ECT-indico-theme which contains the directories css and files. Inside files I have the logo file: ECT_White.png. In indico.conf I have added the lines

CUSTOMIZATION_DIR = '/opt/indico/ECT-indico-theme'
LOGO_URL = '/static/custom/files/ECT_White.png'

This indeed changes my logo to what I want so very good. Now I am trying to achieve even more customization by adding some custom css and html files. So I have copied the header.html in ECT-indico-theme (I know I can use inheritance but that was quicker for the moment) and modified it a bit. Restarted indico (both celery and uwsgi) but got no effect. The question is then: where should I put html files? (I tried also inside the css directory but did not work).

Also: is there a way to remove the standard sentence:

Welcome to Indico. The Indico tool allows you to manage complex conferences, workshops and meetings. To start browsing, please select a category below.

Thanks a million!

The Welcome [...] sentence is located in /opt/indico/.venv/lib/python3.9/site-packages/indico/modules/categories/templates/display/root_category.html where there is a

{% block category_description %}

For the category descritption: Just edit it online in the root category.

For other templates: Best way is to enable template-debug in the config file to see where the files need to go. You need to really reproduce the folder structure, so e.g.

├── css
│   ├── 10-mlzcolors.css
│   └── 20-mlz-loginscreen.css
├── static
│   ├── mlz_logo_inv.png
│   ├── mlz_logo_inv.png.1
│   └── mlz_negative_blue_background_rgb.png
└── templates
    └── core
        ├── assets
        │   └── vars_user.js
        ├── auth
        │   └── login_page.html
        ├── events
        │   ├── contributions
        │   │   └── display
        │   │       ├── contribution_display.html
        │   │       └── _contribution_list.html
        │   └── reminders
        │       └── emails
        │           ├── event_reminder_orig.txt
        │           └── event_reminder.txt
        ├── header.html
        └── indico_base.html

This is super-useful, thank you very much. It now works like a charm!

Do you happen to know the name of the css file that is displayed by indico in the home landing page? I need it as a reference to start building up the custom css I want to finally apply.

For example I have put in the css dir of my customization dir the file 10-ect.css containing

@import 'base/palette';

div.page.header {
        background-color: $yellow !important;

        .toolbar.global-menu {
                background: #cc6005 !important;
                border-color: #ffffff !important;

restarted celery and uwsgi services but nothing changes. What am I doing wrong?


You cannot use scss constructs (imports or variables) in template customizations…

Right, that was taken from an old presentation about 2.x.
Still I need to replace some colors in main.9680268a.css, I have put it in in the css directory inside my customization directory, modify it, restarted celery and uwsgi and got no effect. Any clue?


I’d check “view page source” to make sure the custom css gets included and use the browser’s dev tools to see why the rule isn’t applied.

Thank you for the tip. Indeed in my customization dir ECT-indico-theme under css I have main.9680268a.css. However when looking at the console it complains:

GET https://indico-test.fbk.eu/static/custom/css/main.9680268a.css net::ERR_ABORTED 404 (Not Found)

Permissions seems fine though…

No need to use the weird names as the standard css files. Just use a name like custom.css

Anyway, if you get a 404 there, most likely there’s something wrong with the permissions/ownership of the CSS file (so xsendfile fails)…

You are right, stupid me had done a chmod 710 on the css file… Now it is working; the only thing is that the console now complains about the following:

DevTools failed to load source map: Could not load content for https://indico-test.fbk.eu/static/custom/css/main.9680268a.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Notice that I did hange the name to custom.css for my custom css file. So I am not sure if I can simply ignore this

Safe to ignore that warning

Great! Thank you for all the help!