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.2 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.” []
  2. We could instead use the WordPress “Customizer” or add these changes to an Illdy Child Theme Stylesheet if we have one. []

WordPresser
Home Page  Public Email  Twitter  Facebook  YouTube  Github   

Writing since ancient times, blogging, e-commercing, and site installing-designing-maintaining since 2001; WordPress theme and plugin configuring and developing since 2004 or so; a lifelong freelancer, not associated nor to be associated with any company, publication, party, university, church, or other institution. 

Commenter Ignore Button by CK's Plug-Ins

Leave a Reply

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

*

State of the Discussion

+ This is the right site for anyone who hopes to understand this topic. You understand a whole lot its almost hard to argue with you [. . .]
The Ephemeral Sublime vs The Triumph of Death
+ From early on, Trump gave his adversaries abundant excuses to declare him illegitimate, or illegitimate as far as their principles were concerned. To skip ahead [. . .]
Theodicy of Trump – a Tweet-Drizzle (OAG #11)
Wade McKenzie
Comments this threadCommenter Archive
+ Only the retrospective knowledge that Trump, against every establishment anticipation, won the election lends the idea that Hillary Clinton ought to have refused to participate [. . .]
Theodicy of Trump – a Tweet-Drizzle (OAG #11)

From the Featured Archives

Categories

Related