No internet connection
  1. Home
  2. Support

Where to add custom CSS

By Boris Giba @BorisGiba2020-09-29 17:34:12.729Z


first of all, I want to say thank you.
I have searched all day for a comment system that can be integrated with Gatsby, that is not as bloated as something like Disqus, looks decent, has nested comment functionality, and does not start at 10€+ per month (I am willing to pay that much if I need to scale but I like having a cheap starting tier). From all of the solutions I looked at, I liked Talkyard the most, by far. I just tried adding the demo (I really like the fact that you have a demo because alternative options did not) to my Gatsby-site and it worked like a charm; I just can't stress enough how much I appreciate this.

Now I have one little question; I have browsed this forum and tried to look for an option to change the colors of the TalkYard-section. Particularly, I found this post:

The question I want to ask is where do I actually put this CSS?
I have set up the TalkYard-demo according to the instructions here:

(Note: I am using Gatsby v2 and it worked fine).

Currently I add this piece of code to my post.tsx - template:

<TalkyardCommentsIframe discussionId={post.frontmatter.uniquePostId}/>

I tried passing some variables inside this element with style = {{...}} but so far I did not notice a change (I am not extremely familiar with TypeScript so maybe I just made a mistake here).
I want to display TalkYard in a dark mode (I saw your comment on the "changing colors" post), so my question would be where (in the code) can I add custom CSS in a Gatsby-project for TalkYard? (Note: I am still experimenting with the demo (I don't know if that is an obstacle for changing the CSS))

Best regards

Solved in post #2, click to view
  • 6 replies
  1. KajMagnus @KajMagnus2020-09-30 15:30:42.167Z

    Hi! Just a quick reply for now: Here's where you can configure CSS: https://your talkyard site/-/admin/customize/css-js — note that that's the address to your Talkyard site, not to the blog.

    passing some variables inside this element with style = {{...}}

    That won't work — the comments are in an <iframe>, not affected by style = ....
    (But it'd be nice if ... something like that worked, a bit — say, inheriting font family, font size, color, and background color, from the blog. Maybe automatically, maybe via style={{ .... Some time in the future.)

    1. BBoris Giba @BorisGiba2020-10-02 10:40:06.658Z

      Thank you! :)
      I am going to upgrade and test it out today.

      1. KajMagnus @KajMagnus2020-10-02 13:40:11.999Z

        Upgrade? Hmm that's supposde to happen automatically — if you installed the Cron jobs? If not, I feel curious about reasons you chose not to do that :- ) ?

        1. BBoris Giba @BorisGiba2020-10-02 14:09:55.082Z

          Sorry, I should have clarified myself. I meant "upgrade" in the sense that I will upgrade from the "free tier" (your testing example of TalkYard) to a paid tier (since I am just starting out that will be the "basically free"-tier) because I probably cannot access "my" TalkYard-site if I do not even have one :D. I did not mean that in the Linux-sense of "upgrade". I hope this provides some clarity.

      2. In reply toKajMagnus:
        FDaniel Franco @fdf924412020-11-10 21:49:29.014Z

        It would be great if we could decide if we want to manage the CSS from the Talkyard administration area or from a local file. For example I have many problems trying to integrate a day and night mode in my blog.
        Sure there are very ingenious solutions to achieve it but so far I can not find a clear solution in the forum.

        1. KajMagnus @KajMagnus2020-11-18 19:03:28.763Z

          Hi Daniel, now someone else asked about this (or a very similar thing), in this topic:

          There's not yet any way to do this, but seems like a good idea to me