[GH-ISSUE #1232] Question: Custom CSS doesn’t seem to load #758

Closed
opened 2026-03-01 14:46:06 +03:00 by kerem · 2 comments
Owner

Originally created by @vasilisvg on GitHub (Sep 24, 2023).
Original GitHub issue: https://github.com/ArchiveBox/ArchiveBox/issues/1232

I’ve been trying to add a custom CSS file, but somehow it doesn’t show up. And I’m not sure what I do wrong. If anybody can help, that would be nice.

In ArchiveBox.conf I’ve added this line:

CUSTOM_TEMPLATES_DIR = ./theme/

I’ve tried all kinds of paths. Full paths like /home/user/theme/, and relative paths like theme/ and ./theme/, but nothing seems to work. I’ve tried re-initialising, I’ve tried restarting the server. Whatever I do, the CSS files are not loaded.

If I understand it correctly I have to copy existing CSS files into this directory, and then they would be used instead of the originals, right? So I copied base.css directly into /path/to/archivebox/themes/ and added my own custom lines. I’ve also added a css.css file, this is ignored as well.

Whatever I do, if I open http://127.0.0.1:8000/admin/core/snapshot/ no custom CSS is loaded.

I don’t know where to start debugging this. And I don’t know if it’s me not understanding how it works, or if it’s a bug. Here’s the output from archivebox version.

[i] Dependency versions:
 √  ARCHIVEBOX_BINARY     v0.6.2          valid     /usr/local/bin/archivebox
 √  PYTHON_BINARY         v3.9.2          valid     /usr/bin/python3.9
 √  DJANGO_BINARY         v3.1.14         valid     /usr/local/lib/python3.9/dist-packages/django/bin/django-admin.py
 √  CURL_BINARY           v7.74.0         valid     /usr/bin/curl
 √  WGET_BINARY           v1.21           valid     /usr/bin/wget
 -  NODE_BINARY           -               disabled  /usr/bin/node
 -  SINGLEFILE_BINARY     -               disabled  ./node_modules/single-file/cli/single-file
 -  READABILITY_BINARY    -               disabled  ./node_modules/readability-extractor/readability-extractor
 -  MERCURY_BINARY        -               disabled  ./node_modules/@postlight/mercury-parser/cli.js
 -  GIT_BINARY            -               disabled  /usr/bin/git
 -  YOUTUBEDL_BINARY      -               disabled  /usr/local/bin/youtube-dl
 -  CHROME_BINARY         -               disabled  /usr/bin/chromium-browser
 √  RIPGREP_BINARY        v12.1.1         valid     /usr/bin/rg

[i] Source-code locations:
 √  PACKAGE_DIR           23 files        valid     /usr/local/lib/python3.9/dist-packages/archivebox
 √  TEMPLATES_DIR         3 files         valid     /usr/local/lib/python3.9/dist-packages/archivebox/templates
 √  CUSTOM_TEMPLATES_DIR  2 files         valid     ./theme

[i] Secrets locations:
 -  CHROME_USER_DATA_DIR  -               disabled
 -  COOKIES_FILE          -               disabled

[i] Data locations:
 √  OUTPUT_DIR            11 files        valid     /path/to/archivebox
 √  SOURCES_DIR           37 files        valid     ./sources
 √  LOGS_DIR              1 files         valid     ./logs
 √  ARCHIVE_DIR           56 files        valid     ./archive
 √  CONFIG_FILE           598.0 Bytes     valid     ./ArchiveBox.conf
 √  SQL_INDEX             452.0 KB        valid     ./index.sqlite3
Originally created by @vasilisvg on GitHub (Sep 24, 2023). Original GitHub issue: https://github.com/ArchiveBox/ArchiveBox/issues/1232 I’ve been trying to add a custom CSS file, but somehow it doesn’t show up. And I’m not sure what I do wrong. If anybody can help, that would be nice. In ArchiveBox.conf I’ve added this line: ```` CUSTOM_TEMPLATES_DIR = ./theme/ ```` I’ve tried all kinds of paths. Full paths like `/home/user/theme/`, and relative paths like `theme/` and `./theme/`, but nothing seems to work. I’ve tried re-initialising, I’ve tried restarting the server. Whatever I do, the CSS files are not loaded. If I understand it correctly I have to copy existing CSS files into this directory, and then they would be used instead of the originals, right? So I copied `base.css` directly into `/path/to/archivebox/themes/` and added my own custom lines. I’ve also added a `css.css` file, this is ignored as well. Whatever I do, if I open `http://127.0.0.1:8000/admin/core/snapshot/` no custom CSS is loaded. I don’t know where to start debugging this. And I don’t know if it’s me not understanding how it works, or if it’s a bug. Here’s the output from `archivebox version`. ```` [i] Dependency versions: √ ARCHIVEBOX_BINARY v0.6.2 valid /usr/local/bin/archivebox √ PYTHON_BINARY v3.9.2 valid /usr/bin/python3.9 √ DJANGO_BINARY v3.1.14 valid /usr/local/lib/python3.9/dist-packages/django/bin/django-admin.py √ CURL_BINARY v7.74.0 valid /usr/bin/curl √ WGET_BINARY v1.21 valid /usr/bin/wget - NODE_BINARY - disabled /usr/bin/node - SINGLEFILE_BINARY - disabled ./node_modules/single-file/cli/single-file - READABILITY_BINARY - disabled ./node_modules/readability-extractor/readability-extractor - MERCURY_BINARY - disabled ./node_modules/@postlight/mercury-parser/cli.js - GIT_BINARY - disabled /usr/bin/git - YOUTUBEDL_BINARY - disabled /usr/local/bin/youtube-dl - CHROME_BINARY - disabled /usr/bin/chromium-browser √ RIPGREP_BINARY v12.1.1 valid /usr/bin/rg [i] Source-code locations: √ PACKAGE_DIR 23 files valid /usr/local/lib/python3.9/dist-packages/archivebox √ TEMPLATES_DIR 3 files valid /usr/local/lib/python3.9/dist-packages/archivebox/templates √ CUSTOM_TEMPLATES_DIR 2 files valid ./theme [i] Secrets locations: - CHROME_USER_DATA_DIR - disabled - COOKIES_FILE - disabled [i] Data locations: √ OUTPUT_DIR 11 files valid /path/to/archivebox √ SOURCES_DIR 37 files valid ./sources √ LOGS_DIR 1 files valid ./logs √ ARCHIVE_DIR 56 files valid ./archive √ CONFIG_FILE 598.0 Bytes valid ./ArchiveBox.conf √ SQL_INDEX 452.0 KB valid ./index.sqlite3 ````
kerem closed this issue 2026-03-01 14:46:07 +03:00
Author
Owner

@pirate commented on GitHub (Sep 26, 2023):

The folder needs to be the same format as the templates dir in the codebase here: https://github.com/ArchiveBox/ArchiveBox/tree/dev/archivebox/templates

Place your css under static/

<!-- gh-comment-id:1735157292 --> @pirate commented on GitHub (Sep 26, 2023): The folder needs to be the same format as the templates dir in the codebase here: https://github.com/ArchiveBox/ArchiveBox/tree/dev/archivebox/templates Place your css under `static/`
Author
Owner

@vasilisvg commented on GitHub (Sep 27, 2023):

Thanks! This did the trick!

<!-- gh-comment-id:1737751347 --> @vasilisvg commented on GitHub (Sep 27, 2023): Thanks! This did the trick!
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/ArchiveBox#758
No description provided.