# What CSS was used for Comments here?

**URL:** https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088
**Category:** Support
**Created:** [September 11, 2024, 10:01pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088 "2024-09-11T22:01:19Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 11, 2024, 10:01pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/1 "2024-09-11T22:01:19Z")

</div>

This site is a Ghost blog that is using Discourse for the Comments.

[What is Online Community?](https://blog.discourse.org/2021/08/online-community/).

Notice how nicely the comments is presented. Please what CSS is used for this?  
The comments on my own website are not good. They stretch the entire length of the screen. Ideally I want them to look Just like the one I posted.

Here is my site  
[https://ogatutor.com/](https://ogatutor.com/)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [September 11, 2024, 10:27pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/2 "2024-09-11T22:27:51Z")

</div>

You can just open Dev tools in your browser and inspect the elements to see the CSS

This can also be achieved by simply right clicking on the element and selecting “inspect”. You may have to go up down the html hierarchy to see all the CSS.

---

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 11, 2024, 10:54pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/3 "2024-09-11T22:54:21Z")

</div>

Tried that, can’t find it there.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [September 11, 2024, 10:56pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/4 "2024-09-11T22:56:08Z")

</div>

Hi there, what problem did you encounter?

---

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 11, 2024, 10:59pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/5 "2024-09-11T22:59:04Z")

</div>

My blog is Ghost blog that is using Discourse for comments. The Comments are working ok, BUT the CSS is to make them blend in is what I am looking for.  
Look at the one I reffred to. Notice how the Comments flow nicely?  
Now look at ine. The comments Spran the entire length of the screen

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [September 11, 2024, 11:05pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/6 "2024-09-11T23:05:49Z")

</div>

Try Inspecting the comment on the Blog. In the Inspect window, you should see a tab called ‘Styles’ that has the CSS of the selected (and all) elements.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 11, 2024, 11:44pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/7 "2024-09-11T23:44:58Z")

</div>

Is this what you are looking for?

 ![This image is a screenshot of a computer system displaying several open windows and a text editor. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/5/f/a5f69bbce53e19c6833c854a1ae92547a702c518.png)

this topic has information about how to format embedded posts:

> ### Styling your Embedded content
> 
> If you are running Discourse 1.4.0 or greater, you have the ability to add a stylesheet for your embedded comments. Use the **Embedded CSS** section of the Theme editor at **Admin \> Customize \> Themes \> Edit CSS/HTML** and you can add a custom stylesheet that will be served up with your embedded comments. By default we think the layout looks nice on a white background, but if your site has a unique layout you’ll want to style it yourself.

> [@Embed Discourse comments on another website via Javascript](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963#styling-your-embedded-content-4):
>
> Discourse has the ability to embed the comments from a topic in a remote site using a Javascript API that creates an IFRAME. For an example of this in action, check out [Coding Horror’s blog](http://blog.codinghorror.com/welcome-to-the-internet-of-compromised-things/#discourse-comments). The blog is run via [Ghost](https://ghost.org/) but the comments are embedded from his [Discourse forum](http://discourse.codinghorror.com/t/welcome-to-the-internet-of-compromised-things/3550). One important thing to note with this setup is that users have to navigate to your forum to post replies. This is intentional, as we feel that the posting interface on a Discourse forum is currently much richer than what we …

---

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 12, 2024, 12:14am UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/8 "2024-09-12T00:14:20Z")

</div>

Thanks,  
Odd, same window not opening on my Safari, don’t know why.  
THANKS

---

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 12, 2024, 12:15am UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/9 "2024-09-12T00:15:01Z")

</div>

THANK YOU !! That’s what I was looking for.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [September 12, 2024, 3:26am UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/10 "2024-09-12T03:26:19Z")

</div>

No CSS can be deployed without it being exposed in the browser dev tools.

I suspect you need time to learn the tools 😉

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 12, 2024, 3:53am UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/11 "2024-09-12T03:53:12Z")

</div>

nice looking ghost site.

but it looks like your ghost site embed is a bit broken or misconfigured.

 ![Screenshot 2024-09-11 at 8.51.50 PM](https://global.discourse-cdn.com/meta/original/4X/7/3/4/734a0ca303794e1cce8e0acc7cb4a137e926d438.png)

 ![Screenshot 2024-09-11 at 8.49.40 PM](https://global.discourse-cdn.com/meta/original/4X/4/6/5/465837a29316c5538debbc8eea755c5dde00057b.png)

 ![Screenshot 2024-09-11 at 8.47.30 PM](https://global.discourse-cdn.com/meta/original/4X/e/5/d/e5dade26331beb888654585b9a711318da6ee85c.jpeg)

---

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 12, 2024, 3:52pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/12 "2024-09-12T15:52:59Z")

</div>

THANK you !!  
Yes, it is Broken, but I have followed ALL the instructions on how to embed but for some reason(s) it seems I I am not getting it right.  
Here is what my Embed looks like.

 ![Screenshot 2024-09-12 at 11.47.16 AM](https://global.discourse-cdn.com/meta/original/4X/f/2/a/f2af3db713042ecf0f82d6e3a11e85638a4d59de.png)  
That configuration generates this code code.

```plaintext
<script type="text/javascript">
    if (window.location.pathname.indexOf('/p/') < 0) {
        DiscourseEmbed = {
            discourseUrl: 'https:/teachmeai.ogatutor.com/‘,
            discourseEmbedUrl: '{{url absolute="true"}}'
        };

        (function() {
            var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
            d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
        })();
    }
</script>

```

Note: I left the Path Allowedlist empty because, when I enter anything there, the code will not even run  
What could I be doing wrong?  
Thanks

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 12, 2024, 4:07pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/13 "2024-09-12T16:07:02Z")

</div>

oh it looks like it’s working now 🙂

 ![In the image, a computer screen is displayed with a webpage open in a browser. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/2/c/b/2cbeeea28ca0e8af03bf864f61a4296f3d43938f.png)

I was going to suggest that you try `\/\d+\/\d+\/.+` in the path allow list field for that allowed host setting.

---

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 12, 2024, 4:16pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/14 "2024-09-12T16:16:20Z")

</div>

Thanks again, but it still takes a long time to load for New visitors. About 1 minute for new visitors and NEW articles. Once an article already has an ONGOING discussion, it loads much faster.  
Don’t know if it’s because the topic is being Auto created on Discourse. Looking at Ghost logs, everything seems fine.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 12, 2024, 4:22pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/15 "2024-09-12T16:22:24Z")

</div>

it loaded immediately for me. it could just be a location thing. i’ve looked at multiple pages and comments are loading right away for me.

edit: oh weird, now I just got an error loading page one 🤔

---

<div class="post-metadata">

### Author: ![oga](https://avatars.discourse-cdn.com/v4/letter/o/f19dbf/32.png) [@oga](https://meta.discourse.org/u/oga)
#### Post date: [September 12, 2024, 4:43pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/16 "2024-09-12T16:43:25Z")

</div>

Thank you so so much. My job is almost done. Next phase is to attempt to move over their users from phpBB.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [October 12, 2024, 4:43pm UTC](https://meta.discourse.org/t/what-css-was-used-for-comments-here/326088/17 "2024-10-12T16:43:45Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.