V 3.1 customization

1

Hello!

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_DEBUG = True
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!

2

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 %}
3

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
4

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

5

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?

Thanks!

6

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

7

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?

Thanks!

8

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.

9

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…

10

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)…

11

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

12

Safe to ignore that warning

13

Great! Thank you for all the help!