# Customizing themes in Narrated Web Report themes **URL:** \ **Category:** Help\ **Tags:** css\ **Created:** [April 30, 2025, 12:54pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565 "2025-04-30T12:54:43Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![emyoulation](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/emyoulation/32/67_2.png) [@emyoulation](https://gramps.discourse.group/u/emyoulation)\ **Post date:** [April 30, 2025, 12:54pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/1 "2025-04-30T12:54:43Z")
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. > **[GRAMPS for Genealogists | Facebook](https://www.facebook.com/groups/370692133138445/permalink/2768884426652525/?rdid=juXF01fzAbadTMUn&share_url=https%3A%2F%2Fwww.facebook.com%2Fshare%2Fp%2F16Wux9K72v%2F)** > > Gramps is a free software project and community. We strive to produce a genealogy program that is both intuitive for hobbyists and feature-complete for... No response yet, so thought it should be cross-posted here. ---
**Author:** ![emyoulation](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/emyoulation/32/67_2.png) [@emyoulation](https://gramps.discourse.group/u/emyoulation)\ **Post date:** [April 30, 2025, 1:08pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/2 "2025-04-30T13:08:48Z")
What is the process for defining a custom theme for the [Narrated Web Site report](https://gramps-project.org/wiki/index.php/Gramps_6.0_Wiki_Manual_-_Reports_-_part_7#Narrated_Web_Site)? 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? > **[Howto: Make a genealogy website with Gramps - Gramps](https://gramps-project.org/wiki/index.php/Howto:_Make_a_genealogy_website_with_Gramps#Changing_the_narrative.css)** ---
**Author:** ![DaveSch](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/davesch/32/40_2.png) [@DaveSch](https://gramps.discourse.group/u/DaveSch)\ **Post date:** [April 30, 2025, 1:42pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/3 "2025-04-30T13:42:25Z")
You can make a copy of an existing theme, rename it, and store it in your [user directory’s](https://gramps-project.org/wiki/index.php/Gramps_6.0_Wiki_Manual_-_User_Directory) 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. ---
**Author:** ![emyoulation](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/emyoulation/32/67_2.png) [@emyoulation](https://gramps.discourse.group/u/emyoulation)\ **Post date:** [May 1, 2025, 11:22am UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/4 "2025-05-01T11:22:43Z")
I’m hoping that both the **Narrated Web Site Report** maintained by @SNoiraud and the [**Themes**](https://github.com/gramps-project/addons-source/tree/maintenance/gramps60/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](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/d/de9884a1fb18e77cc8e50c622dc506454c037c92.png) ![Preferences-Themes-addon](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/8/8224cd3d8852223bc14fbe31a63725080237821d.png) 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](https://gramps.discourse.group/t/bold-text-hard-to-see-on-tabs/5845/6), and; toning down the [Addon Manager’s lozenges](https://gramps.discourse.group/t/modifying-themes/1938/26).) This unfortunately means that the baseline theme (and maybe the light/dark mode selection? I don’t recall) is hard-coded. ---
**Author:** ![SNoiraud](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/snoiraud/32/72_2.png) [@SNoiraud](https://gramps.discourse.group/u/SNoiraud)\ **Post date:** [May 1, 2025, 12:00pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/5 "2025-05-01T12:00:23Z")
> [@emyoulation](#): > > I’m hoping that both the **Narrated Web Site Report** maintained by @SNoiraud and the [**Themes**](https://github.com/gramps-project/addons-source/tree/maintenance/gramps60/Themes) Addon by @prculley will be extended to promote custom theme development. 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. ---
**Author:** ![emyoulation](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/emyoulation/32/67_2.png) [@emyoulation](https://gramps.discourse.group/u/emyoulation)\ **Post date:** [May 1, 2025, 12:26pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/6 "2025-05-01T12:26:50Z")
> [@SNoiraud](#): > > These are two different things 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. ---
**Author:** ![emyoulation](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/emyoulation/32/67_2.png) [@emyoulation](https://gramps.discourse.group/u/emyoulation)\ **Post date:** [May 1, 2025, 12:58pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/7 "2025-05-01T12:58:35Z")
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 | ---
**Author:** ![SNoiraud](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/snoiraud/32/72_2.png) [@SNoiraud](https://gramps.discourse.group/u/SNoiraud)\ **Post date:** [May 1, 2025, 4:53pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/8 "2025-05-01T16:53:50Z")
> [@emyoulation](#): > > But shouldn’t a new top level CSS be created (that cascades to the base Theme) to avoid such overwrites? 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, … ---
**Author:** ![DaveSch](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/davesch/32/40_2.png) [@DaveSch](https://gramps.discourse.group/u/DaveSch)\ **Post date:** [May 1, 2025, 5:09pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/9 "2025-05-01T17:09:29Z")
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](https://gramps-project.org/wiki/index.php/Addon:ThemePreferences) 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). ---
**Author:** ![emyoulation](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/emyoulation/32/67_2.png) [@emyoulation](https://gramps.discourse.group/u/emyoulation)\ **Post date:** [May 17, 2025, 7:06pm UTC](https://gramps.discourse.group/t/customizing-themes-in-narrated-web-report-themes/7565/10 "2025-05-17T19:06:31Z")
> [Randy Isbell](https://www.facebook.com/groups/370692133138445/user/1329511446/) posted [a reply](https://www.facebook.com/groups/370692133138445/posts/2768884426652525/?comment_id=2789996087874692&reply_comment_id=2793899430817691) that he had discovered how to modify the themes: > > "I wanted a dark theme. I was using Mainz until one of the Gramps updates made it cut off the right side of the pages. In general, the narrative web site created by Gramps is far behind the rest of the program. > > - No dark themes, > - text is too small, > - the lightbox no longer works > … _too many gripes to list here._ > > So I fixed and customized the CSS files and yes, I’m aware that Gramps might end up making improvements that overwrite my work. And when that happens I’ll overwrite it with my own dark theme again. > > Unless of course they actually make one I can use. > > All that said, I love Gramps. I used to use TMG until they abandoned it, and then I found Gramps and never looked back. Long live Gramps!" I’ve suggested an overlay that cascades to the base theme and requested that Randy share his changes. ![image](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/4/4b214fe6b63b3d4c3a18efacab5c348aff9474b9.png)