- Posts: 37
Question Trying to make a dark theme
- ekdahl
- Topic Author
- Offline
- New Member
Most of my time spent in my webtrees site is in the evening, more or less in the dark, and I've been missing a dark theme that I like. The last days I've spent some time trying to implement one, based on the example theme. The goal is only to alter the colors and other CSS attributes. I have no previous experience in this area (CSS and web development), so it's probably full of stupid mistakes (because I don't really realize what I'm doing). It is heavily influenced by the GitHub dark theme as a reference (should probably move away from those colors to avoid theft...). I think it's starting to look pretty decent now, however there are a few things I can't really understand how to solve.
* How to make the tables have rounded outer borders (without the inner cells covering them). I've tried many things but never really got it the way I want it.
* Changing the color of the collapse arrow (that is blue on the screenshot)
* Getting rid of the thick blue line that appears after expanding (can also be seen on the screenshot)
Link to page from screenshot.
Please Log in or Create an account to join the conversation.
- mp
- Offline
- Senior Member
Martin - ffp.bauschaffen.de
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
I want to make something based on the minimal theme, with as few changes as possible.
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
This has been solved, by adding this CSS (new images for the arrows with other colors):* Changing the color of the collapse arrow (that is blue on the screenshot)
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
Was solved with the following CSS addition:* Getting rid of the thick blue line that appears after expanding (can also be seen on the screenshot)
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
With the following CSS, I can set some text where I want the icon to be, but how can the icon be referenced and put there instead?
Please Log in or Create an account to join the conversation.
- Franz Frese
- Offline
- Elite Member
content: url('/public/favicon-32.png');
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
The question is how and if the inline SVGs already provided with webtrees can be used (from CSS), not how I can add my own image and link to that.
Anyway, for now I provided the fontawesome font with the module and use font icons instead. But since the icons I wanted to use are already included with webtrees I wanted to use those, but am unsure how.
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
Please Log in or Create an account to join the conversation.
- hermann
- Offline
- Elite Member
Hermann
Designer of the custom module "Extended Family"
webtrees 2.1.21 (all custom modules installed, PHP 8.3.12, MariaDB 10.6) @ ahnen.hartenthaler.eu
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
I like that palette too, it's easy on the eyes.
Please Log in or Create an account to join the conversation.
- JLL
- Offline
- New Member
- New user Webtrees 2.1.15
I like it a lot!
Is it possible to view the Google, Bing, OpenStreetMap pictograms for the places? on my site, they are not displayed!
Jean-Luc
arbrelelievre.yj.fr/webtrees/index.php?r...ASCALINE-CHEVALLIER#
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
If I understand correctly, you mean the small links to Google Maps, OSM etc. after coordinates.
This theme is based on the minimal theme and displays the same icons as that theme (like this ). I see that colors and other themes have other icons for the map services.
I'll see what I can do. Unfortunately there doesn't seem to be brand icons for those services from fontawesome, so to use official logos is probably the best path, or use the same icons as the other themes.
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
Please Log in or Create an account to join the conversation.
- raaspt
- Offline
- New Member
- Posts: 15
Congrats for the nice work. I really enjoy the light high contrast pallete.
Could you please fix the double end parentheses typo in "resources/css/theme.css:175"?
As a suggestion, it would be nice to be able to configure the default pallete (it's currently hardcoded).
Thanks.
Cheers
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
Please Log in or Create an account to join the conversation.
- gudjonsi
- Offline
- New Member
- Posts: 4
nice theme with great selections of palettes to choose from. I've noticed that the shortcut icon/url with the dropdown menu for the different charts and families is missing in the individual boxes, such as in the tab listing family members, as well as in the different charts, see list below and images below.
The icon/url shortcuts can be seen in the minimal theme of webtrees but not the github theme:
- In the Favorites block with individuals listed as a favorite
- In the Families Tab for individuals listed under respective family
- In the Family Chart when viewing families with spouses
- Menu - Charts - Ancestors
- Menu - Charts - Family book
- Menu - Charts - Hourglass chart
- Menu - Charts - Pedigree
Regards, gudjonsi
webtrees 2.1.20 - PHP 8.3 on OpenLiteSpeed Server - MariaDB 10.11.6 Database Server
Please Log in or Create an account to join the conversation.
- JLL
- Offline
- New Member
- New user Webtrees 2.1.15
Changing the Google icons, etc., works well, great and thank you!
Using this layout, I noticed a few small details:
-the character * put at the end of a first name, is not taken into account: it allows to underline the usual first name.
-in multiple choice with a matchcode when entering, the different choices not very readable, visible, especially in black color mode: see image capture!
J-LUC
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
- Highlighting of the first name has been added
- Styling of suggestion box while entering e.g. place names should also be fixed
- The invisible chart link is yet to be fixed, but an issue report has been created here
Please Log in or Create an account to join the conversation.
- ekdahl
- Topic Author
- Offline
- New Member
- Posts: 37
Looks like that will not be needed since the whole "Primer Design System" for GitHub is MIT licensed, so should be fine to use all colors etc. as is.... It is heavily influenced by the GitHub dark theme as a reference (should probably move away from those colors to avoid theft...)
Primer CSS
Primer Design System
Please Log in or Create an account to join the conversation.