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

**URL:** <https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785>\
**Category:** Developer help\
**Created:** [December 9, 2020, 6:58am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785 "2020-12-09T06:58:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anubhav\_Singh](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@Anubhav\_Singh](https://forum.ghost.org/u/Anubhav_Singh)\
**Post date:** [December 9, 2020, 6:58am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/1 "2020-12-09T06:58:36Z")

</div>

\*\*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/](https://neurologicaldisorders.co/what-is-a-stroke/)**

```auto
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>
```

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [December 9, 2020, 7:32am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/2 "2020-12-09T07:32:02Z")

</div>

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

```auto
{{#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.

---

<div class="post-metadata">

**Author:** ![Anubhav\_Singh](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@Anubhav\_Singh](https://forum.ghost.org/u/Anubhav_Singh)\
**Post date:** [December 9, 2020, 8:51am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/3 "2020-12-09T08:51:07Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/7/7d41214925d59d96adea960d9749a8457137c16d.png)  
where in the code of ruby can I change the tag color ?

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [December 9, 2020, 9:16am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/4 "2020-12-09T09:16:50Z")

</div>

🙂 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.

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

```

---

<div class="post-metadata">

**Author:** ![Anubhav\_Singh](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@Anubhav\_Singh](https://forum.ghost.org/u/Anubhav_Singh)\
**Post date:** [December 9, 2020, 9:18am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/5 "2020-12-09T09:18:04Z")

</div>

thanks man you are a lifesaver

---

<div class="post-metadata">

**Author:** ![yong](https://avatars.discourse-cdn.com/v4/letter/y/b487fb/32.png) [@yong](https://forum.ghost.org/u/yong)\
**Post date:** [January 2, 2021, 2:31pm UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/6 "2021-01-02T14:31:04Z")

</div>

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

> [@minimaluminium](#):
>
> ```auto
> {{#if post.access}}
> <div class="comment container small">
>     
> <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>
>         
> </div>
> {{/if}}
> 
> ```

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [January 4, 2021, 4:27am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/7 "2021-01-04T04:27:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ankitst](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ankitst/32/15536_2.png) [@ankitst](https://forum.ghost.org/u/ankitst)\
**Post date:** [May 11, 2021, 1:00pm UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/8 "2021-05-11T13:00:49Z")

</div>

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](http://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!

---

<div class="post-metadata">

**Author:** ![ankitst](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ankitst/32/15536_2.png) [@ankitst](https://forum.ghost.org/u/ankitst)\
**Post date:** [May 11, 2021, 3:37pm UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/9 "2021-05-11T15:37:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [May 12, 2021, 2:57am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/10 "2021-05-12T02:57:56Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![ankitst](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ankitst/32/15536_2.png) [@ankitst](https://forum.ghost.org/u/ankitst)\
**Post date:** [May 12, 2021, 8:54am UTC](https://forum.ghost.org/t/disccus-intergation-working-but-size-is-wrong-and-not-fitting-the-layout/18785/11 "2021-05-12T08:54:48Z")

</div>

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