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.

So, let’s get Trolly on ignore like we want him to be. Using Chrome inspection tools ((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.”)), we can take a look at the CSS styling (or lack of it, in this case):

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

/* ADJUSTMENTS FOR "Illdy" THEME
 * 1. Establish critical base formats
 * 2. Make sure paragaphs and typical principle content including avatars disappear when ignored
 * 3. Position "Ignored" label/message in ignored comment box
 */
/* ARTICLE OR COMMENT-BODY P, BASE FORMAT */
.comment-entry
{
    opacity: 1;
    transition: opacity 3s, padding 3s;
}
.comment-entry p
{
    opacity: 1; 
    transition: opacity 1s, max-height 0s; 
}

/* POST-IGNORE */
.ignore-this-comment > div div .comment-entry
{
    border: 1px lightpink dotted;
    min-height: 40px; 
    opacity: .6;
    padding: 0;
    position: relative;
    transition: opacity 3s, padding 3s;
}
.ignore-this-comment > div div .comment-entry p
{
    margin: 0;
    max-height: 0px;
    padding: 0; 
    opacity: 0.01;
    transition: opacity 3s, max-height 0s 1s;
}
.ignore-this-comment > div div .comment-entry img, 
.ignore-this-comment > div div .comment-entry blockquote
{
    display: none;
}

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:

The “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 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:

/*COMMENTER IGNORED MESSAGE ADJUSTMENT */
.ignore-this-comment > div div .commenter-ignored-msg {
    position: relative;
    top: 8px;
}

So, now we get:

Perfected or Close Enough In Our Honest Opinion

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