Disqussion and Colo(u)r

So I’ve been playing with the CSS of mah blahg, learning some things, and gaining insight into how this whole WordPress + CSS + Plugins + lolol shebang works together.

Disqussion and Colo(u)r

But things seem to be going well so far…

So, we’ll begin with the addition of Disqus comments, shall we?
I like Disqus. It allows commenting from accounts that most Internet inhabitants will find themselves already in possession of, it allows Anon comments (provided I approve them, ’cause I have powah like that), it’s externally hosted and handled and whatever so I don’t have to bother, et cetera. However, it’s provided through an iFrame. And externally hosted and formatted iFrames can be, err, how can I put this? They can be a pain in the ass. Particularly to us newbies, smashing around with things we don’t yet understand…

Basically, my problem with Disqus was that my chosen WordPress theme (NewDark, for anyone wondering) specifies a maximum size for “media” like Disqus’ iFrame but, with comments being the variable-size things that they are, this was not ideal. The fixed size that the theme specified meant that comments would be hidden below the border of the themes “media” iFrame element/area. This problem was compounded by the fact that Disqus’ iFrame was set with it’s own formatting rules to not scroll within the space the theme provides but rather to expand, and with these rules coming from an external place I couldn’t change them. Now bear in mind that this explanation has the benefit of hindsight. I had no idea that these things were problems at first.

After smashing my face at this problem through much Googling and head-scratching, I was able to find a solution by editing the theme’s style.css and:
1) specifying settings not for the Disqus iFrame element but rather on the div element (called #disqus_thread) that the iFrame gets wrapped in, thereby circumventing the no-scrolls-allowed that the iFrame is set with and allowing scrolling by having it’s wrapper allow expansion to a point and then scroll once the iFrame gets bigger,
2) and setting the max-height limit for the media iFrame element to the same as the #disqus_thread element in my child theme (see the update on child themes below).

I have no idea if that makes any sense to an actual web developer or CSS expert, but it works in my head. Anyway, the actual code I used:
For the Disqus div element, appended to the end of the theme’s style.css – or child theme’s style.css, as it were (see the update on child themes below; the code is commented to make sure it doesn’t play silly buggers):

#disqus_thread {
overflow-y: auto !important;
max-height: 600px;

And for NewDark’s iFrame limits, I set the max-height argument to the same height as I’d declared for the #disqus_thread element none, so if the comment thread gets way long (longer than whatever max-height I might set) the whole thread should always be scrollable (again, the whole thing’s in comments and, again, this bit gets thrown into your child theme’s style.css):

#content iframe { max-width:640px !important; max-height: none !important; }

A final note for Disqus… When using a child theme, you need to declare the height for the iFrame element like above or else your parent theme will impose its own height. If you don’t use a child theme (tut tut, etc.) then just remove the max-height argument. But it’ll come back when your theme next updates, which is why you should use a bloody child theme.

So, that was the Disqus adventure. Now I believe the title says something about colour?
Anyone who’s taken an avid interest in this here blog (so, no-one really…) may notice some colours have changed. Mainly for links and their hover effects. Not an especially miraculous feat, all things considered, but it’s a change so I figured I’d throw some words at it. I’ve changed these colours by editing the color (ugh) properties of a bunch of things in my theme’s style.css sheet. I’m still deciding on how I want things to look so stuff will continue to change, unless you’re reading this from the future (eh, even so…), but the tricky part about changing these things is in keeping track of where-the-bloody-hell everything gets defined in the CSS, and what relates to what between what’s written in the CSS and what it actually looks like on the page. I guess I could comment unique names in that I will remember and can search by, but I haven’t yet because I started this without thinking of that and only discovered how to comment in CSS a few hours in and by then I was masochistically accustomed to playing on hard mode. Not much in the way of tips to share on that point, but if anyone needs to know how to comment in CSS, you wrap whatever you want commented with slashy asterisks, like so:

*/ <- start comment and end comment -> */


Another handy thingamabob I came across while derping about and picking colours, is Adobe Kuler – a site that helps you pick colours that match (I may or may not entirely disregard its advice, but there it is).

And that about does it for this rather long post about not-a-whole-lot.

Update! 20140425.
I learned something since originally writing this post: child themes. One needs to use child themes to ensure that whatever changes you make to your theme are kept across theme updates. Essentially, a child theme is a mask for whatever settings you specify that will apply instead of the parent theme’s default. Any settings not specified by the child theme, are handled by the parent theme. It’s like an extra layer that just handles the bits you point at and letting everything else go on as normal. Or something. Anyway, I wasn’t using one originally and now I am and that necessitated slight changes to how the iFrame limits are declared.

Update! Again! 20140718.
So someone decided to play with my comment box on another page which revealed a flaw in how I’d set my sizing limits for iframes. Essentially, by hard limiting the size of the iframe it meant that as more comments were made the things at the bottom of the Disqus thread would be hidden ’cause the total length of the thread was longer than the size I’d set. The solution? Set a “none” size limit for iframes, while keeping the #disqus_thread element’s max-height limited with scrolling enabled (overflow-y on “auto”).

I’ve updated the codey bits in the post to reflect this.