Ignoring in “Illdy”: A CIB Adaptation to a “Bootstrapped” Theme (Case Study)

CIB under default settings has been tested in 100 WordPress themes selected mainly from the currently and recently “Popular” and “Featured” categories in the WordPress repository, but also including custom and more or less randomly selected themes, as well as all of the “annual” themes since WordPress “Twenty Ten.”

The results were over 90 out of the 100 qualifying as “as intended.” The outliers consisted of three main types: Some highly stylized themes; themes that use black or very dark backgrounds in their comments; and themes with completely custom comment templates, typically based on “Bootstrap” frameworks.

The first two problematic theme types can be easily handled. The stylized themes produced some incidental clashes, on a level that some site operators might simply ignore and that otherwise would be easily resolvable with a bit of CSS or use of alternative placements. In general, if you are partial to highly stylized themes, you should be prepared to style any plug-ins or functions that output their own HTML to the Front End of your site. The same somewhat goes for the “dark” themes, which have become relatively rare in recent years, and which in any event the plug-in addresses initially with the inclusion of a simple checkbox option for substitution of an alternative CIB image, with some minor additional styling.

If you’re not able to perfect your theme yourself, or not willing to hire a designer, then being a perfectionist is unrealistic. Yet just getting good enough on first glance results when adding CIB to customized comment templates, even before fine-tuning, may require some more complicated work. For those intimidated by the prospect, here is an example of curing the output on one typically atypical theme.

Making CIB work with “Illdy”

“Illdy” is a handsome theme built on a Bootstrap framework that does not initially stray too far from WordPress standard. After installation of Default CIB, it looks OK, in my opinion anyway, but there’s a problem:

Trolly’s comments are supposed to be “Ignored,” but are still brazenly trolling us, right there before our scandalized eyes.

Illdy Author Link Before

So, let’s get Trolly on ignore like we want him to be. Using Chrome inspection tools1, we can take a look at the CSS styling (or lack of it, in this case):

Illdy with InspectionYou may need to look closely or embiggen the image (click on it) to see what’s going on: Unlike standard WordPress or typical variations widely in use, Illdy classes its comment content not with an”article” or a “comment-body” or even with a “comment-content” or a “commentcontent” selector, but with “comment-entry.” No shame in that – and I’ve seen selectors completely unique to their themes, bearing peculiar prefixes and such – but, still, for all I know, Illdy is the only theme in the universe that uses “comment-entry.”

The answer is straightforward: To make Trolly’s “comment-entry” disappear, all we need to do is to add the following CSS – based on the relevant code from the plugin’s stylesheet (css/cks_cib_style.css) – to the “Add CSS” stylesheet in the plug-in’s options. Since we’re not going to use any of the other code provided by Add CSS, we’re going to delete all of it, and replace it with the following:

After adding/saving, we get a result that is almost “there,” but is sub-optimal for the “Ignored” label/message, and that goes back to Illdy’s unique template again, this time its structure:

Illdy Problem After Close-UpThe “Ignored” message label is straddling the ignored comment box outline, and we feel bad.

Or maybe you like it that way. For my part, I’d like it contained within the box, and vertically centered. So, I’m going to inspect:

Illdy After - with Inspection - Problems

Illdy After First Adjustment: Ignored Message/Label not EXACTLY where/how we want it

Since “absolute” works only if the would-be containing div is already “relative,” and anyway in this case we don’t need absolute formatting for .ignore-this-comment > div div .commenter-ignored-msg, and since a little bit of checking with “top” gets us the rest of the way as far as vertically centering goes, and since styles added to Add CSS overwrite similar styles in the plug-in’s basic stylesheet, the following does the trick:

So, now we get:

Illdy After

Perfected or Close Enough In Our Honest Opinion

And that’ll do, as far as we’re concerned.

Notes:

  1. To initiate inspection tools on Chrome, just right-click where you want to work on the page, and, to view the HTML and CSS, look under “Elements.” []
Lanced Infinity

WordPresser
Home Page Public Email Twitter Facebook YouTube Github  

WordPresser: Writing since ancient times, blogging, e-commercing, and site installing-designing-maintaining since 2001.

Posted in WordPress Plug-Ins Tagged with: ,
Commenter Ignore Button by CK's Plug-Ins

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Related Posts:

State of the Discussion

bob
Ignored
Comments this threadCommenter Archive
+ Yeah, I read C's comments as trying to do a variety of things at the same time, having the effect of making interpretation more difficult. Any [. . .]
Benjamin Wittes: How to Read What Comey Said Today – Lawfare
bob
Ignored
Comments this threadCommenter Archive
+ Sure, so why do they have "work Phones" they take home? Even if they don't have fate of the world responsibilities, who they work [. . .]
Isenstadt and Vogel: Paranoia seizes Trump’s White House – POLITICO

From the Featured Archives

Support This Site?