No internet connection
  1. Home
  2. Support

Where to add custom CSS

By Boris Giba @BorisGiba
    2020-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. 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 @BorisGiba
          2020-10-02 10:40:06.658Z

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

          1. 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 @BorisGiba
                2020-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 @fdf92441
                2020-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. 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