Pedigree map

[HRN65]

Markers and lines indicating different generations of ancestors are missing in Pedigree map module.

[photon-flip]

This is more "missing" CSS. From my limited knowledge with the themes I have built myself, this Argon theme should by default be pulling the CSS from the theme it extends - MinimalTheme in this case - and only altering or adding the CSS it needs in it's own resources/css. I can't see why it's not and requires all these explicit additions. Someone with a better understanding of theme modules might be able to shed some light on this.

If this does need to be fixed in Argon CSS, there is a section in minimal.min.css for :root { --wt-pedigree-map-gen-0: red; ........ and .wt-pedigree-map-gen-0 ..........

[HRN65]

There seems to be more css missing/not pulled from MinimalTheme. I think I put this theme "on hold" until I get time to dig deeper into it

[photon-flip]

I think I've found the reason there has to be so much css added to the Argon theme.css In module.php the public function stylesheets(): array dosn't have the usual $stylesheets = parent::stylesheets(); Adding that solves problems like the above issue. Unfortunately it also messes up a lot as well. It looks like there would need to be some work fixing that but I would think it would make for a much better theme going forward. I'd be interested to hear if someone else has a take on this.

[photon-flip]

Working on this a bit more, I think the clue to Jonathan's thinking on this is his comment

Replace Minimal spreadsheet with Argon spreadsheet (stylesheet) Maybe there are advantages in doing it that way. If so then it's a matter of catching these missing pieces of css. in this case:

:root {
--wt-pedigree-map-gen-0: red;
--wt-pedigree-map-gen-1: orange;
--wt-pedigree-map-gen-2: gold;
--wt-pedigree-map-gen-3: #90ee90;
--wt-pedigree-map-gen-4: green;
--wt-pedigree-map-gen-5: #32cd32;
--wt-pedigree-map-gen-6: cyan;
--wt-pedigree-map-gen-7: blue;
--wt-pedigree-map-gen-8: #6495ed;
--wt-pedigree-map-gen-9: pink;
--wt-pedigree-map-gen-10: #f0f;
--wt-pedigree-map-gen-11: maroon
}

.wt-pedigree-map-gen-0 { color: red; color: var(--wt-pedigree-map-gen-0) }

.wt-pedigree-map-gen-1 { color: orange; color: var(--wt-pedigree-map-gen-1) }

.wt-pedigree-map-gen-2 { color: gold; color: var(--wt-pedigree-map-gen-2) }

.wt-pedigree-map-gen-3 { color: #90ee90; color: var(--wt-pedigree-map-gen-3) }

.wt-pedigree-map-gen-4 { color: green; color: var(--wt-pedigree-map-gen-4) }

.wt-pedigree-map-gen-5 { color: #32cd32; color: var(--wt-pedigree-map-gen-5) }

.wt-pedigree-map-gen-6 { color: cyan; color: var(--wt-pedigree-map-gen-6) }

.wt-pedigree-map-gen-7 { color: blue; color: var(--wt-pedigree-map-gen-7) }

.wt-pedigree-map-gen-8 { color: #6495ed; color: var(--wt-pedigree-map-gen-8) }

.wt-pedigree-map-gen-9 { color: pink; color: var(--wt-pedigree-map-gen-9) }

.wt-pedigree-map-gen-10 { color: #f0f; color: var(--wt-pedigree-map-gen-10) }

.wt-pedigree-map-gen-11 { color: maroon; color: var(--wt-pedigree-map-gen-11) }

[jchue]

Hey guys, thanks for the input and the preemptive investigation. I'll admit, I probably didn't think it all the way through when I first designed this. But originally, I had just intended to apply the Argon spreadsheet for all the standard Bootstrap components, and then add additional styles for webtrees-specific elements.

Although this theme technically extends the Minimal theme in the PHP (I believe this is the only way to create a custom theme, but I might be wrong), I didn't intend for it to actually extend the Minimal theme (at least style-wise), since I didn't want to deal with overriding CSS; I preferred to just start with a blank slate.

But obviously the flaw of this approach has been revealing itself more lately: I didn't catch all the webtrees-specific styles, so I've been relying on the community to report these issues and patching them one-by-one.

That being said, I'm open to suggestions if you don't think this method is sustainable.

Lastly, sorry for the slow responses. I haven't been able to dedicate as much time to this project lately, but I certainly haven't abandoned it!

[photon-flip]

Hi Jonathan, I do know a bit of css but how it's best applied through webtrees PHP theme modules is a learning curve for me so please don't consider my ideas as in any way authoritative. It may very well be a good idea to not pull in the Minimal css. I can also see that a lot of css is first applied from public/vendor.min.css, vendor being bootstrap I guess and it's from here that most of your Argon specific styles are overwriting that css. I can also see a lot of duplicate declarations there so perhaps that could be optimized better. I'd really like to hear ideas from someone who clued up on these subjects as to the most efficient way of doing all this.

Your Argon theme is great even as it is and well worth using now and refining in my opinion. I'm using a version tweaked to my personal preferences at [https://fullerbennett.com/tree/fuller-bennett] I call it Argon36, an Argon isotope.

Great to hear you haven't abandoned your project.

MurrayJ

[jchue]

Hi all,

I've been trying to figure out the best way to include all the base webtrees styles without manually copying them over. I'm currently exploring how to use Composer to install webtrees as a dev dependency, so that I can include some of those stylesheets, but I'll admit I'm stumped. I'm trying to leverage Carmen's example here, but when I run composer install, the vendor/fisharebest/webtrees/resources directory is missing css. Is anyone familiar enough with Composer to help me out?

Thanks!

[jchue]

Alright, for some reason it's working now. I have added webtrees as a composer dependency and imported vendor and base styles in a6cd61254ee174e51810597fa0b278f02ffc2795. Hopefully this prevents similar issues in the future. Please try the latest release.

[jchue]

Feel free to open a new issue if you find any other problems.