Cannot Override CSS in Hosted Version

[candideu]

So far, I've loved how simple and easy to implement Cusdis has been. Thank you for making this!

That said, I would like to customize the CSS further, but have been unable to override the styles in the hosted version.

I tried the workaround mentioned in Issue #52 , for example:

#cusdis_thread .border-gray-200 {
  border: 2px solid rgba(35, 35, 36, .78) !important;
  background-color: #CBAB6C !important;
}

But this doesn't work to override the existing style. I know that @abdusco mentioned some kind of Javascript solution in issue #105 , but I don't know how to implement this.

Attempts to replace the iframe's srcdoc CSS attribute also haven't worked (see Stack Overflow post).

I ended up self-hosting the application on Vercel and Railway.app in order to edit the theme.css and add my own CSS classes there so that it would match my website's aesthetic better:

However, it would be great if a simpler solution was provided for people using the hosted version.

Suggestions:

• Having a section in the dashboard where people can paste CSS overrides
• Allowing users to link to their own style sheet so that Cusdis uses that link in the iframe srcdoc instead of Cusdis style.css
• A section in the documentation that explains the CSS

[bramaudi]

I got the same problem, when my page load dark theme first instead light the Cusdis widget have a white background which is ugly.

It got solved by make my own version of embeded js instead of using https://cusdis.com/js/cusdis.es.js

The point here is just add your css override in srcdoc, like this i add simple inline .dark css:

[candideu]

I got the same problem, when my page load dark theme first instead light the Cusdis widget have a white background which is ugly.

It got solved by make my own version of embeded js instead of using https://cusdis.com/js/cusdis.es.js

The point here is just add your css override in srcdoc, like this i add simple inline .dark css:

This is fantastic, thank you! It's a lot simpler than self-hosting the entire thing... I'll give it a try.

[dieghernan]

It got solved by make my own version of embeded js instead of using https://cusdis.com/js/cusdis.es.js

Just wanted to say thanks to @bramaudi

I developed a Jekyll theme with +20 different skins and thanks to that trick now I got a themed cusdis for each of those. I just needed to create a few css additional rules and inject my main css inside the iframe by modifying slightly https://cusdis.com/js/cusdis.es.js.

See a couple of snapshots:

[ryarasi]

I got the same problem, when my page load dark theme first instead light the Cusdis widget have a white background which is ugly.

It got solved by make my own version of embeded js instead of using https://cusdis.com/js/cusdis.es.js

The point here is just add your css override in srcdoc, like this i add simple inline .dark css:

Hi, can someone please provide instructions for how to do this for my Jekyll site?

I am really confused about how to use this method to get it to look right for my dark theme on Jekyll.