Disqus Comments Customization (Rarebit CMS)

  Jump to replies
  Everyone can view.
  Anyone with an account can post.
EDIT: This was solved, thank you so much to admin Darwin and everyone else who commented! :D

Howdy y'all! I'm trying to customize the Disqus Comments section on my comics site, but nothing I do seems to work. I've put everything into the CSS sheet but nothing changes. What I want to do is make the comments take up 50% width on the page instead of the default 100% width. I also want to change the background color/image so it is no longer transparent, but I can't seem to do so. I'm using the Rarebit CMS for Neocities, can anyone lend me a hand? The code I use it copy/pasted down below. Thank you!

CSS CODE:
/* Disqus Comments Section */

disqus_thread {
width: 50%;
background-color: #00000;


HTML CODE:
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: <a href="<a href="<a href="https://disqus.com/admin/universalcode/#configuration-variables">https://disqus.com/admin/universalcode/#configuration-variables</a>">
<a href="https://disqus.com/admin/universalcode/#configuration-variables">https://disqus.com/admin/universalcode/#configuration-variables</a>
</a>">
<a href="<a href="https://disqus.com/admin/universalcode/#configuration-variables">https://disqus.com/admin/universalcode/#configuration-variables</a>">
<a href="https://disqus.com/admin/universalcode/#configuration-variables">https://disqus.com/admin/universalcode/#configuration-variables</a>
</a>
</a> */
/*
var disqus_config = function () {
this.page.url = window.location.href; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '<a href="<a href="<a href="https://tiptheferrymen.disqus.com/embed.js">https://tiptheferrymen.disqus.com/embed.js</a>">
<a href="https://tiptheferrymen.disqus.com/embed.js">https://tiptheferrymen.disqus.com/embed.js</a>
</a>">
<a href="<a href="https://tiptheferrymen.disqus.com/embed.js">https://tiptheferrymen.disqus.com/embed.js</a>">
<a href="https://tiptheferrymen.disqus.com/embed.js">https://tiptheferrymen.disqus.com/embed.js</a>
</a>
</a>';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>


Website if anyone needs a more visual example: https://tiptheferrymen.com/
  • Hey there, thanks for stopping by! I think the forum may have eaten your HTML, you can use the <code> tag around it to prevent that from happening.
  • reply to delphina
    Haha yeah I saw that! I removed the script tags and that seems to have fixed it, but thank you for showing me this! :]
  • For mine, I have my Comments inside a div, and that's what controls the scale. I set my width to 773px, and it's a more manageable size.
  • reply to BHeath
    If you don't mind, can you show me an example of what this looks like in code please? o: I'm not sure where the "comments" really are in the "<div ="disqus_thread">" code.
  • reply to Toonbly
    Glad yah got the help from Darwin! They're awesome. Apologies for poofing!
  • reply to BHeath
    Haha no problem at all! Appreciate your help either way! :3
  • Hey there, a couple of things to try:

    #disqus_thread {
    max-width: 70%;
    background-color: 000000;
    }

    *EDITED forgot about the background color!


    It is in your developer tool as a <div id="disqus-thread"> and therefore have a corresponding # to denote the ID rather than a class which would be .disqus-thread

    When I do this in the developer tool for your site, I'm noticing that it doesn't center on the page like it should.

    I do recommend you have your comic page/author notes/comments all in a wrapper together so that they all align the same way as you work (something like <div class="center-content">[comic/note/comments]</div>. Let me try something really quick and I'll drop code if I can get it to play.
  • Okay did some playing around in the developer tool and what I found is if you want to stay with the arrangement you have you could do this:
    TtFcodechanges.jpg
    Which is to say that I moved the author notes and comments up into the wrapper so that it is all controlled in the same way. (And all aligned to the center)

    I changed the css for the disqus-thread to max-width: 70%; to match the width of your author notes area. The result was:
    Ferryman_result.jpg
  • reply to Darwin
    Holy crud that worked!! Thank you so much! :D I'm gonna fiddle with this a bit to try and pretty it up a little. I really appreciate it!!
  • reply to Toonbly
    Glad I could help.