Customizing themes in Narrated Web Report themes

Help
1

On 22 Apr 2025, Randy Isbell, a user of the Narrated Web Site Report asked in the Facebook group:

Has anyone been able to make a customized theme for the web narrative report? I am currently using the ‘Nebraska’ theme, but I would love to turn it into a dark theme by customizing the CSS.

No response yet, so thought it should be cross-posted here.

2

What is the process for defining a custom theme for the Narrated Web Site report?

The following “How To” wiki article touches on CSS edits and cautions how changes will be lost with each update of the Report code.

But shouldn’t a new top level CSS be created (that cascades to the base Theme) to avoid such overwrites?

3

You can make a copy of an existing theme, rename it, and store it in your user directory’s css folder.

Then you can edit this file to meet your needs.

When creating the Narrated Web the custom css file will be added to the list of available options.

4

I’m hoping that both the Narrated Web Site Report maintained by @SNoiraud and the Themes Addon by @prculley will be extended to promote custom theme development. Adding a custom overlay theme selection (in addition to the existing baseline theme selection) would be ideal.

As @DaveSch suggests, Custom CSS could be stored in the User Data CSS folder by default.

17460995951413014585927901595919
17460995951413014585927901595919697×584 30.7 KB

Preferences-Themes-addon
Preferences-Themes-addon635×490 18 KB

My current overlay for (the Gramps GUI) has to point the cascade at the baseline CSS before my just my custom elements. (Currently, that just includes: the height of progress bars, and; toning down the Addon Manager’s lozenges.)

This unfortunately means that the baseline theme (and maybe the light/dark mode selection? I don’t recall) is hard-coded.

5

These are two different things.

If you want to create your own css theme, you need to:

  1. create a directory “css” in the .gramps directory.
  2. copy the css file you want to modify into that directory.
  3. rename this css file.
  4. You adapt the new css file to your needs.
  5. You create a narrative web report.

Don’t forget the css structure can be changed between gramps release.

6

Yes. One is for the reports, the other for the GUI.

But concept is similar, so the GUI selection menu of an Overlay stylesheet should be similar. And the label for such a feature should be similar: overlay, custom stylesheet, user CSS; whichever is used in one should used in the other. It keeps the Translation down to a single string and requires the CSS designers to learn only one terminology.

This is why I mentioned both.

7

A synthesized “best practices” suggests 3 (not 2 as I suggested) decoupled Stylesheets

Layer Purpose Example File
Base Stylesheet Layout, structure, defaults base.css
Theme Stylesheet Colors, fonts, theme-specific changes theme-dark.css
Overlay Stylesheet User-specific or custom overrides user-overlay.css
8

Impossible.
If you look at all possible css files, only 10% of the directives are identical.
It is the same for all Gtk themes: adwaita, …

9

A css file for the Narrated Web is totally different than the themes (and their css files) that can control the look of the Gramps environment. They should not be stored together.

Other themes for the Gramps environment can be downloaded and installed in the directory/folder that the Themes addon looks for. On Windows that is %USERPROFILE%\.themes. Even after selecting a theme, tweaks can be set set in %LocalAppData%\gtk-3.0\gtk.css in Windows. (Not sure on Macs or Linux).