# Narrated Web Site StyleSheet doesn't apply

**URL:** <https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217>\
**Category:** Help\
**Created:** [October 12, 2024, 9:11am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217 "2024-10-12T09:11:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![cognitive-seismic](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/cognitive-seismic/32/5283_2.png) [@cognitive-seismic](https://gramps.discourse.group/u/cognitive-seismic)\
**Post date:** [October 12, 2024, 9:11am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/1 "2024-10-12T09:11:55Z")

</div>

I am generating multiple “Narrated Web Site” with each of the “StyleSheet”, but the outcome is the same.

 ![image](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/5/58f902613d30502a2bc784c14f11021b733e95e6.png)

---

<div class="post-metadata">

**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:** [October 12, 2024, 11:12am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/2 "2024-10-12T11:12:11Z")

</div>

I just tested on the example database using 5.2.3-2 on Win10. They all worked (although the Visually Impaired may need some tweaking). I opened them in Firefox. (Inserted Illustration in [**HTML Options** wiki article](https://gramps-project.org/wiki/index.php/Gramps_5.2_Wiki_Manual_-_Reports_-_part_7#HTML_Options))

Which version of Gramps are you using?

 ![narrweb-ba](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/5/545062b38f5d324bb23e74bd18b41e2dfb54c310.png)  
 ![narrweb-bb](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/d/da0a0eb4758a37beb75a8065a7dc462fbcdba4fa.png)  
 ![narrweb-bc](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/5/55216b2c0aee411e3a6753c784a732e98a486938.png)  
 ![narrweb-bl](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/3/34ca048157f2ea921d03ed258871be74eb2cb2b2.png)  
 ![narrweb-bp](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/a/a2653b6bf511db17631cba7c6f9a556c0e34cdf7.png)  
 ![narrweb-bs](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/f/fbd4654ea5e8e2f73f26d0a7d86bc83a37f74d8f.png)  
 ![narrweb-mainz](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/9/9e75fb63065e456a6155990e42b6211a7f808d26.png)  
 ![narrweb-neb](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/7/71ed7a74e108c373ea9e01a148764f8c355c61fb.png)  
 ![narrweb-vi](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/4/4b96313ba33c02c7034aa32a652f777ff3e0e276.png)

---

<div class="post-metadata">

**Author:** ![cognitive-seismic](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/cognitive-seismic/32/5283_2.png) [@cognitive-seismic](https://gramps.discourse.group/u/cognitive-seismic)\
**Post date:** [October 12, 2024, 11:32am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/3 "2024-10-12T11:32:09Z")

</div>

```python
GRAMPS: 5.2.3 
Python: 3.11.2 
BSDDB: 6.2.9 (5, 3, 28) 
sqlite: 3.40.1 (2.6.0)
LANG: en_US.UTF-8
OS: Linux
Distribution: 6.1.0ed the -26-amd64

```

I test the resulted web on:  
`Debian GNU/Linux 12`  
and  
`Ubuntu 24.04.1 LTS`

I always get this style:

 ![image](https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/d/df932a70f23b1f55dc192cdcab1e23a09529fbcd.png)

Also after deleting browsing history data.

---

<div class="post-metadata">

**Author:** ![cognitive-seismic](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/cognitive-seismic/32/5283_2.png) [@cognitive-seismic](https://gramps.discourse.group/u/cognitive-seismic)\
**Post date:** [October 12, 2024, 11:38am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/4 "2024-10-12T11:38:47Z")

</div>

I have just realized I need to delete the destination folder before generating a new Narrated Web Site with a different style.

Text changes, like birth dates or places, are updating without deleting the destination folder.

@DaveSch Thanks anyway

---

<div class="post-metadata">

**Author:** ![cognitive-seismic](https://yyz2.discourse-cdn.com/free1/user_avatar/gramps.discourse.group/cognitive-seismic/32/5283_2.png) [@cognitive-seismic](https://gramps.discourse.group/u/cognitive-seismic)\
**Post date:** [October 12, 2024, 11:51am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/5 "2024-10-12T11:51:52Z")

</div>

I am missing there a dark reader.

---

<div class="post-metadata">

**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:** [October 12, 2024, 3:00pm UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/6 "2024-10-12T15:00:44Z")

</div>

You can manipulate any of the CSS files.

The files that come with Gramps are stored in `\share\gramps\css\` (on Win10) The file names are like `Web_Basic-Ash.css`. You can copy the css file that best meets your needs to your own `\css\` folder in your [Gramps User Directory](https://gramps-project.org/wiki/index.php/Gramps_5.2_Wiki_Manual_-_User_Directory).

I did this with Basic-Ash and named my version “`My Ash.css`”. Then I was able to make a few tweaks. You can alter the colors used for a darker background.

---

<div class="post-metadata">

**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:** [October 12, 2024, 5:03pm UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/7 "2024-10-12T17:03:15Z")

</div>

> [@DaveSch](#):
>
> You can manipulate any of the CSS files.
> 
> The files that come with Gramps are stored in `\share\gramps\css\` (on Win10) The file names are like `Web_Basic-Ash.css`. You can copy the css file that best meets your needs to your own `\css\` folder in your **Gramps&nbsp;User Directory**.
> 
> I did this with `Basic-Ash` and named my version “`My Ash.css`”. Then I was able to make a few tweaks. You can alter the colors used for a darker background.

Perhaps a **feature request** should be filed.

Moving the CSS cascade (repeated in the headers of each html file) to a central file would make the CSS more manageable. Referencing a `css/gramps.css` (that contains the cascade) would allow users could revise all the pages by updating a single file.

They could regenerate a Narrated Website Report for a single person with different CSS options and simply swap the CSS folder. Or they could use CSS pre-processing tools (like SASS or LESS) to reduce the CSS overhead.

 

```css
	<link href="css/ancestortree.css" media="screen" rel="stylesheet" type="text/css" />
	<link href="css/narrative-print.css" media="print" rel="stylesheet" type="text/css" />
	<link href="css/narrative-screen.css" media="screen" rel="stylesheet" type="text/css" />
	<link href="css/Basic-Ash.css" media="screen" rel="alternate stylesheet" title="Basic-Ash" type="text/css" />
	<link href="css/Basic-Blue.css" media="screen" rel="alternate stylesheet" title="Basic-Blue" type="text/css" />
	<link href="css/Basic-Cypress.css" media="screen" rel="alternate stylesheet" title="Basic-Cypress" type="text/css" />
	<link href="css/Basic-Lilac.css" media="screen" rel="alternate stylesheet" title="Basic-Lilac" type="text/css" />
	<link href="css/Basic-Peach.css" media="screen" rel="alternate stylesheet" title="Basic-Peach" type="text/css" />
	<link href="css/Basic-Spruce.css" media="screen" rel="alternate stylesheet" title="Basic-Spruce" type="text/css" />
	<link href="css/Mainz.css" media="screen" rel="alternate stylesheet" title="Mainz" type="text/css" />
	<link href="css/Nebraska.css" media="screen" rel="alternate stylesheet" title="Nebraska" type="text/css" />

```

---

<div class="post-metadata">

**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:** [October 13, 2024, 11:16am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/8 "2024-10-13T11:16:24Z")

</div>

When you use firefox, you can change the default for a page.  
This is the same for other browsers.  
In firefox, Go to “display” → “page style” → the css tou want.  
This can be useful if you want to test the different css and choose the best one for you.

Be careful, the browser has a cache and you need to erase it to get your changes applied

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/free1/uploads/gramps/original/1X/2ac1e712b7adf612e31ca08a55419f4cf37c0158.png) [@system](https://gramps.discourse.group/u/system)\
**Post date:** [November 12, 2024, 11:16am UTC](https://gramps.discourse.group/t/narrated-web-site-stylesheet-doesnt-apply/6217/9 "2024-11-12T11:16:57Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.