Is there a simple way of changing the CSS styles?

[iacchus]

What would be a preferred way of changing the CSS styles?

[laymonage]

The best way would be to contribute a custom theme file. Example: #110

I'm trying to find other options so that you can use your own styles, but loading third-party CSS has some security implications. If you know a safe way to do so, please let me know.

[iacchus]

It would be great if it was possible to use the own blog style.css, possibly using a namespace as .giscus, but it seems that iframe CORS disallows it (for security measures).

Couldn't Giscus <script/> only inject the elements directly into the html instead of inserting an iframe? this way each person could customize with their own blog styles as the elements will inherit them from the page styles, maybe only leaving the default ones as a starting point. (For example I am having difficulties to change the font-size.)

[laymonage]

Unfortunately, no, that isn't possible (at least with the way giscus is built). That means the script also has to manage the whole app.

I'll see if I can find options to let you load an external CSS file, e.g. with a link to the file.

[laymonage]

Hey @iacchus, I've added custom CSS support in #128. Please try it out when you have the time. Here's the guide. Thanks!

[iacchus]

Thank you, @laymonage :) It is very cool.

[LiuYing-1]

Hello there! I still feel confused about that how can I simply change the font of giscus instead of submitting the brand new CSS file created by my own. Please help me out, thanks T_T

[davidsneighbour]

Hi @LiuYing-1

Hello there! I still feel confused about that how can I simply change the font of giscus instead of submitting the brand new CSS file created by my own. Please help me out, thanks T_T

Apart from this being a two-year-old issue, the proper way to change styles is to add custom CSS as described. "Simply changing a font" would look like this:

• find an existing style you like in https://github.com/giscus/giscus/tree/main/styles
• copy to your own location
• exchange the font declarations in this stylesheet
• implement your custom style as described above

[LiuYing-1]

Thanks, dude! But I have several questions right now. First, does it matter where we put the custom-giscus.css in the dir? Can I just put it in a /CSS folder within the project? The second is about the final step. You stated that you "implement your custom style as described above" Does it mean I should change the data-theme="https://giscus.app/themes/custom_example.css" with my own location? If it is, is the URL required, or can I provide a relative location in the project as well? Sorry for the stupid questions, hah, but I really want to know. Thanks again!

[LiuYing-1]

Ah, I figured it out already. When uploading my customized CSS file to the server, I can access the CSS file by the URL. Am I right? Specifically, I would like to set the font to be 'Noto Serif Display' which is Google Font in the https://github.com/giscus/giscus/blob/main/styles/themes/preferred_color_scheme.css. I inserted one line that,
main {... font-family: 'Noto Serif Display', 'Noto Serif SC', serif ...} There is nothing changed.