Narrated Web Site StyleSheet doesn't apply

Help
1

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

image
image775×574 34.7 KB

2

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)

Which version of Gramps are you using?

narrweb-ba
narrweb-ba646×193 5.58 KB

narrweb-bb
narrweb-bb646×193 8.51 KB

narrweb-bc
narrweb-bc646×193 7.2 KB

narrweb-bl
narrweb-bl646×193 6.73 KB

narrweb-bp
narrweb-bp646×193 6.86 KB

narrweb-bs
narrweb-bs646×193 7.2 KB

narrweb-mainz
narrweb-mainz646×193 99.6 KB

narrweb-neb
narrweb-neb646×193 7.33 KB

narrweb-vi
narrweb-vi646×193 9.4 KB

1 Like
3 
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
image1397×222 19.9 KB

Also after deleting browsing history data.

4

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

1 Like
5

I am missing there a dark reader.

6

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.

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.

7

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.

	<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" />
8

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

9

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