How can I change css?

[andrebernardezbrana]

I am using the widget in React and would like to customize it, colors, sizes, etc.

If I make a css class like .rw-header it is overwritting by the default class with the same name.

¿?

[Rikkokiri]

If you simply want to change the banner color etc. there are some properties available for customizing that.. (see src/index.hs:

defaultHighlightCss: PropTypes.string,
defaultHighlightAnimation: PropTypes.string,
mainColor: PropTypes.string,
conversationBackgroundColor: PropTypes.string,
userTextColor: PropTypes.string,
userBackgroundColor: PropTypes.string,
assistTextColor: PropTypes.string,
assistBackgoundColor: PropTypes.string

These are set the same way as for example socketUrl (see README or ask if you are unsure).

Or, as you mentioned, you can use the classnames listed in the README (or ones you find exploring widget code using browser dev tools) to define css rules.

I don't know what your background and comfort level with CSS is, so I'm sorry if this already obvious to you:

• Only the rules you set in your css code (such as color or text-align) will get overwritten. Any rules that you don't change will remain as they are in widget code.
• What value each rule get is impacted by specificity. So sometimes just using a class name is not enough, as there might be more specific rules in place (i.e. the target of the rule is defined using multiple selectors). If you're not yet familiar with this, I'd recommend checking out some tutorial or for example MDN docs.
• If highly recommend exploring the styles using browser dev tools. That will help you figure out where certain style value is coming from and how to "overrule" it ☺️

Again, sorry if all this was obvious to you - and if not, feel free to ask more questions! (Also: I'm not a maintainer on this project, I've just worked with it a lot.)

[andrebernardezbrana]

Thank you very much, you have helped me a lot and I appreciate all the explanation. I think I already have it.

Thanks😁

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.