Talk: [Next] Custom CSS

[cristiandean]

Hello, we are working with Coral Talk (next branch) and we feel it’s hard to customize the default embed stream using the Custom CSS feature. It would be nice if the components had more friendly selectors. What do you think? I can help with a PR if necessary.

Thank you

[kgardnr]

Hey @cristiandean! We would LOVE if you would help us out with this, it's on our list but hasn't been prioritized yet, it would be really helpful! 🥇

[kgardnr]

Hey @cristiandean we are going to get some info together for you from the team on naming conventions that should be helpful for you!

[cristiandean]

Ok @kgardnr

[kgardnr]

Alright, @cristiandean, we're good to go! So the only thing you need to do is prefix every classname with coral-, so for example, coral-featured-comments-tab-header.

[cvle]

Hey @cristiandean, thanks for wanting to help us. To put this into scope, you could make a PR that adds the selectors for your own customization needs. That way we'll see what you need and we'll work something out together.

Did you have a different idea besides using classnames as selectors?

In case of using classnames, here are some guidelines for the naming of the classnames:

• The classnames should be prefixed by coral-
• The classnames should follow our naming conventions that we use for our translations keys https://github.com/coralproject/talk/blob/next/src/locales/en-US/stream.ftl
  
  
  
  • Can consist of up to 3 groups separated by a dash (excluding the prefix)
  
  
  • Can use camelCase to further help with organisation
  
  
  • For naming inspirations and consistency you could get ideas from our translation keys
  
  

Some examples could be coral-tabBar, coral-tabBar-allCommentsTab

[cristiandean]

Alright, @kgardnr and @cvle, thanks for your support. I'll open the PR and any questions I'll post there.

[kgardnr]

Hey @cristiandean, are you still planning on working on this? It will become a blocker for us by next week, so if you can't get to it this week, let us know!

[cristiandean]

Hey @kgardnr, I've been kind of busy the last few days, but I plan to start developing this feature tomorrow. I can't say that it will be ready until next week, because other things may happen along the way. What are you planning to do may hinder a future merge?

[kgardnr]

Hey @cristiandean! That sounds good. We're looking to cut the official v5.0.0 by end of this month and will need that in there. So I think it might be better if we just do it, unless you think you'll be able to?

[cristiandean]

@kgardnr If it's not a problem for you, it's fine with me you do it. I was already in about 20% of the task and had to stop because of another more prioritized task of our backlog :/

Anyway, thanks for the support. =)

[gjtorikian]

Wrong person. 😀

[cristiandean]

I'm sorry @gjtorikian :)

[kgardnr]

Hey @cristiandean we have a PR for this - wanna take a look and give us your feedback? Feel free to add on if you'd like! https://github.com/coralproject/talk/pull/2414

[cristiandean]

Hello @kgardnr, at first it looks good to me. As soon as we start customizing our widget, if we see something else needed, we can submit a PR =)

Thank you!

[kgardnr]

Hey @cristiandean we'll have a new PR for additional classnames coming next week - stay tuned! 🎉