What CSS was used for Comments here?

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

What is 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

2 Likes

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.

4 Likes

Tried that, can’t find it there.

1 Like

Hi there, what problem did you encounter?

3 Likes

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

1 Like

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.

4 Likes

Is this what you are looking for?

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.

6 Likes

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

2 Likes

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

3 Likes

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

I suspect you need time to learn the tools :wink:

3 Likes

nice looking ghost site.

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

6 Likes

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.


That configuration generates this code code.

<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

2 Likes

oh it looks like it’s working now :slight_smile:

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

1 Like

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.

1 Like

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 :thinking:

3 Likes

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

1 Like