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 *

*

Noted & Quoted

[E]ven Fox didn’t tout Bartiromo’s big scoops on Trump’s legislative agenda, because 10 months into the Trump presidency, nobody is so foolish as to believe that him saying, “We’re doing a big infrastructure bill,” means that the Trump administration is, in fact, doing a big infrastructure bill. The president just mouths off at turns ignorantly and dishonestly, and nobody pays much attention to it unless he says something unusually inflammatory.On some level, it’s a little bit funny. On another level, Puerto Rico is still languishing in the dark without power (and in many cases without safe drinking water) with no end in sight. Trump is less popular at this point in his administration than any previous president despite a generally benign economic climate, and shows no sign of changing course. Perhaps it will all work out for the best, and someday we’ll look back and chuckle about the time when we had a president who didn’t know anything about anything that was happening and could never be counted on to make coherent, factual statements on any subject. But traditionally, we haven’t elected presidents like that — for what have always seemed like pretty good reasons — and the risks of compounding disaster are still very much out there.

Comment →

So, does Mitchell make any money on the work, which has been shared so many times? He uploaded a high-res image of the symbol and granted permission for anyone to use it personally for free. But for those who want to support his work or simply want something readymade, you can also buy T-shirts, sweatshirts, mugs, and journals emblazoned with the symbol through Threadless.“I really just want to spread the image as much as possible and cement it in history,” Mitchell says. “In all honesty, the amount I’ve made from my Threadless shop so far is still less than my hourly rate, so I don’t really see it as a big deal. If you look at my Twitter, half the replies are people wanting to know where they can buy a shirt. Threadless is happy to help them out with that, and so I’m happy to let that happen.”Now that the symbol has flooded our streets and our timelines, Mitchell just has one request: “Impeach this idiot already,” he says.

Comment →

This is a Waterloo moment for Trump, the tea party and their alliance. They have been stopped in their tracks not only by Democratic opposition but because of a mutiny within their own ranks. Although never particularly liked or respected, it is now clear that they are no longer feared. The bankruptcy of their ideas and their incompetence have been exposed. Their momentum has been dissipated. Their rejection of political norms has itself been scorned. Our long national nightmare may finally be coming to an end.

Comment →
CK's WP Plugins

State of the Discussion

+ BTW, I recently upgraded some this and that on the back end of the blog, and it does seem to make comments post much faster [. . .]
Gutenberg: The Invention of the Printing Press, the Destruction of WordPress

For WordPress self-hosted people, there is already a "restore legacy editor" plugin, even though Gutenberg hasn't been installed yet as the default.

Gutenberg: The Invention of the Printing Press, the Destruction of WordPress
+ I thought you were on WordPress.com, not self-hosted WordPress. I can't find any info on WordPress.com and Gutenberg or Gutenbergerish editing, so I don't know [. . .]
Gutenberg: The Invention of the Printing Press, the Destruction of WordPress

Extraordinary Comments

CK's WP Plugins

Categories

Related