Disccus Intergation Working but Size is wrong and Not Fitting The Layout

Developer help
1

**Ghost is the latest version of the dawn theme and using the following code in post.hbs **
See the current plugin layout (it’s not centered and going out of the screen ) : https://neurologicaldisorders.co/what-is-a-stroke/

this what my post.hbs file looks like I did this according to instruction here  ( https://ghost.org/integrations/disqus/ )  : 
{{!< default}}

<div class="content-area">
    <main class="site-main">
        {{#post}}
            {{> content width="wide"}}
<script>
  var disqus_config = function () {
    this.page.url = '{{url absolute=true}}';
    this.page.identifier = '{{comment_id}}';
  };
</script>
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
	this.page.url = "{{url absolute="true"}}";  
	this.page.identifier = "ghost-{{comment_id}}"
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://myname.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
        {{/post}}
        {{#is "post"}}

            {{> related}}
            {{> comment}}
        {{/is}}
    </main>
</div>
2

Hey @Anubhav_Singh, add your comment code in partials/comment.hbs file. For Dawn theme, it should be like:

{{#if post.access}}
<div class="comment container small">
    Your comment code here...
</div>
{{/if}}

But it looks like you’re using Ruby theme, but the idea is same.

1 Like
3

thanks for the help man, Yes I got it to work on a ruby first .
You have a great work experience man can you help me change the tag colour in ruby ?
as you can see now on my website its this colour

Screenshot 2020-12-09 at 2.20.11 PM
Screenshot 2020-12-09 at 2.20.11 PM1162×300 8.43 KB

where in the code of ruby can I change the tag color ?

4

:slightly_smiling_face: I assume you want to change the brand color completely, instead of changing only tag color. If so, add this CSS in “Code injection > Site Header” field.

<style>
    :root {
        --primary-color: NEW_COLOR;
    }
</style>
5

thanks man you are a lifesaver

1 Like
6

I have same issue here with Dawn, Disqus code is working fine when i paste it in post.hsb, but it doesn’t fit in Dawn Layout.

I have update it in partials/comment.hbs file, Disqus doesn’t load after ghost restart

7

Hey @yong, I was able to get Disqus loaded by copying your code and only changing the shortname myname in myname.disqus.org part. Have you replaced myname with your own Disqus shortname? Also comments are visible on public posts by default, but would require to be logged in when viewing members-only posts.

8

Hey @minimaluminium, I did exactly as you have mentioned. But the comments are still not loading for me in the dawn theme. I was previously using the dawn theme which was purchased from iveel.com but switched to the theme which is now available through Ghost’s theme directory.

Also, I am using CyberDuck to just download that comment.hbs, make edits, re-upload it to the folder, & then run ‘ghost restart’. Am I doing this wrong?

Please let me know what can I do!

9

I got it to work by pasting the code before the {{!-- {{#if post.access}} condition. Can you please tell me what does this condition do?

10

Hey @ankitst, {{#if access}} checks if the current user has access to the current post. The comment section was placed inside this condition block to make it only visible when a user has access to a post.

I assume you might not have uncommented (remove {{!-- and --}}) the block which should be like this:

{{#if post.access}}
<div class="comment container small">
    If you want to embed comments, this is a good place to do it!
</div>
{{/if}}
11

Hey @minimaluminium, thank you. Uncommenting worked. You are awesome :slight_smile:

1 Like