Let's Enhance Wikitree's User Interface with CSS ! (and Stylus)

Question

Dear genealogists,

I'd like to address a topic that is close to my heart: the experience of new users on Wikitree. Currently, the user interface poses significant challenges, making site navigation difficult for new members (and I can attest to that).

The purpose of this message is to collaborate on improving the user interface. I am aware that significant changes will require approval from the responsible parties, but I'd like to propose a temporary solution: the use of Stylus.

Stylus allows each individual to personalize the UI by applying CSS modifications directly in the browser, without requiring changes to the wiki. This means we can collectively work on visual improvements without disrupting other teams.

It will only be a visual overlay, but it's a promising start. I've conducted some preliminary tests on my end, but I lack sufficient experience with the wiki to be truly effective.
I need help.

I want to emphasize that this initiative aims to create an open and constructive discussion rather than criticize the existing work. We all care deeply about Wikitree's success, and together, I am confident we can make the site a bit more welcoming for everyone.

If you are a front-end developer or have design skills, your contribution would be extremely valuable. Share your ideas and suggestions below.

Thank you all for your attention.

Best regards,

Lipki
 

Comments

Kévin, you may believe you are beating your head against a stone wall right now, but you are not.  The people who have answered your question are the right ones to speak with.  They are responsive and very involved in massive improvements to the site.  Ian Beacall invited you to work with him.  This is a generous offer and one you should jump on enthusiastically.  I would if I had the skill and ability I hope you have.  

It's not that we are hiding anything, it's more like WikiTree has grown explosively and while we are thrilled, we have a small but growing team of volunteers keeping up.  You have been invited to join them.  Hop on board - and welcome.

---

I arrive somewhere and make a mess within 10 minutes. It never works.

You're right, I got all the answers I wanted.

The ball is in my court.

I apologize for my apparent overconfidence, and I'll go check on the progress of the ongoing work.

Thank you for your patience.

Answer 1

I started doing something for my personal use. The idea is to clearly differentiate the areas and space out the text.
It made me realize that the HTML code uses class names based more on form than on semantics (which, for genealogists, seems ironic). This is going to be challenging.

Answer 2

CSS (like HTML) is not recommended.  It causes numerous problems. From the Help page:

https://www.wikitree.com/wiki/Help:HTML_and_Inline_CSS#Problems_caused_by_HTML_and_Inline_CSS

Comments

Thanks for that, it's very interesting, and I agree with the content of the article.

But that's not what I'm talking about.
I'm not talking about styling in freely editable areas, like biographies.
But the style of the site itself.

---

The style of the site is being updated as we speak.  Read Chris W's thread here:

https://www.wikitree.com/g2g/1679022/what-is-ahead-for-wikitree-in-2024

Answer 3

Hi Kévin,

I think the Custom Style feature of the WikiTree Browser Extension might work for you.  If it's not quite what you want, you're welcome to join us and improve it. 

Comments

Sounds good, I'll take a closer look.

---

Oh wow, so much to discover and test. We can really feel the expertise behind this tool. But why don't newcomers have access to all of this? Why stash the ladder on the upstairs ?

No ! My intention is not to create an alternative theme that's better designed and accessible only to lucky users who happen to land on the right tab.
The idea is to experiment with a new theme (a CSS stylesheet) and have it adopted by Wikitree once it's robust. For the benefit of everyone.

---

OK.  Good luck with that one. 

You might want to read this page: https://www.wikitree.com/wiki/Help:Developers#Moving_Features_to_the_Core .

---

Ah... Looking again... If you want to use Stylus, I don't think you're looking to change the core.  But Stylus is an extension like WBE, so I'm not sure how it would help.

---

It will only help if it inspires the developers. But apparently I arrive too early or too late.

---

As I said, take a look at WBE and see if it works for you.  If it's not what you want, dive in and help us improve it.

Answer 4

Hello!

I'm not sure if it will resolve your concerns but we do have a site redesign scheduled this year. That may help with some of these things.

Comments

Where can we follow this redesign?

---

The official announcement is here: https://www.wikitree.com/g2g/1679022/what-is-ahead-for-wikitree-in-2024

---

Eowyn: Are you saying that the re-design will allow people to have custom style sheets (or maybe change some colours and fonts here or there)?

---

@Ian, no. From my understanding, the redesign will focus more in line with a general refresh of the look and feel of the site, not offering new features for design preferences.

---

Thanks.  That's what I thought.  But Eowyn seemed to be suggesting something else.

---

The most important part of the redesign is making sure the site is responsive for different screen sizes/devices and also more accessible for those with disabilities.

The only new feature will be the image slideshow, which wasn't able to be promoted to the live site before the design company started.

That being said, I think the plan is to add some "hooks" to the code (since we are going to have to update all the code with the new design anyway) to make it easier for WBE (and our e2e tests) to connect to certain parts of the site.