Advanced

Here’s the styling that works – in Twenty Seventeen and other templates that utilize its selectors – to produce the “advanced” styling depicted in the plug-in’s screenshots and on its options page, as well as in the above video:

/* Advanced Styling for 2013-7-style templates) *
 * ADD TO CUSTOMIZER CSS or THEME STYLESHEET
 */

.comments-area article
{
	position:relative;
}

.ncu_turn > article:hover:before
{
	content:'\2190	Nesting to Left';
}

.ncu_turn > article:before
{
	background-color:#EFE1E1;
	bottom:0;
	color:gray;
	content:'\2190';
	float:left;
	font-size:75%;
	left:0;
	padding:0 6px;
	position:absolute;
}

.ncu_return > article:hover:before
{
	content:'Nesting to Right \2192';
}

.ncu_return > article:before
{
	background-color:#B6DAED;
	bottom:0;
	color:gray;
	content:'\2192';
	float:right;
	font-size:75%;
	left:0;
	padding:0 6px;
	position:absolute;
	text-align:right;
}

.comments-area .ncu_return > article
{
	border:2px solid #B6DAED;
	font-size:.8em;
	padding:1em 1em 2em;
}

.comments-area .ncu_turn > article
{
	border:2px solid #EFE1E1;
	font-size:.8em;
	padding:1em 1em 2em;
}

.comments-area .ncu_turn > .comment-body,.comments-area .ncu_return > .comment-body
{
	margin-bottom:1em;
}

.comments-area .ncu_super-max .comment-author
{
	font-size:.9em;
}

.comments-area .ncu_super-max .comment-metadata
{
	font-size:.6em;
}

.ncu_breakpoint > article
{
	margin-bottom:2em;
	padding-bottom:2em;
}

.ncu_breakpoint > article:after
{
	background-color:#EFE1E1;
	bottom:0;
	color:gray;
	content:'\2190	Nesting to Left';
	float:left;
	font-size:75%;
	left:0;
	padding:0 6px;
	position:absolute;
}

.ncu_super-max .comment-reply-link .icon
{
	display:none;
}

@media only screen and max-width 640px {
	.ncu_breakpoint > article:after,.ncu_turn > article:before,.ncu_return > article:before
	{
		background-color:transparent;
		color:transparent;
		content:'';
	}
	
	.comments-area .ncu_turn > article,.comments-area .ncu_return > article
	{
		padding-bottom:1em;
	}
}

The above will just be a starting point in many themes, and will not work at all for themes that do not utilize the CSS selectors and structure used in basic WordPress themes since 2013. However, there is still hope – in most instances it won’t be very hard – to adapt NCU to divergent commenting systems, even those that employ their own comment “Walkers.”

Adapting CSS for Difficult Themes

Divergent Themes

Some themes that start with WordPress Twenty Thirteen through Twenty Seventeen structures employ them essentially in the same way, some themes diverge from standard practices only slightly, others diverge from them to a great extent. The more common major divergences will be found in stylesheets rather than in XHTML structures generated by WordPress PHP files.

At this site, for example, I use two customized comment Walkers (as of this writing), switching between them depending on type of post. Each presented unique difficulties when I added NCU here, and here’s how they were handled:

1. An oddly styled Walker using basic WordPress structure

My main commenting template at this site is a combination of an old theme’s template and stylesheet, a sample from the WordPress Codex, and some later work conforming the underlying structure to WordPress ca. 2013-7 (i.e., with “article” tags), while adding custom elements. In most themes, you need only to style .ncu_turn , and, as far as establishing the basic NCU pattern goes, you’re done. I wasn’t sure how far I’d have to go with my template, but it turned out that all I had to do was override .commentlist li with “.commentlist li.ncu_turn . and that was it. The way the main NCU-enabling style looks for that template is simply this:

/* custom comment template adjustment */
.commentlist li.ncu_turn {
  margin-left: -40px;
}

2. A unique commenting template – “wpDiscuz”

A more difficult problem was posed by the second of the two commenting systems I happen to use at this site, this one based on the commenting plug-in wpDiscuz. Without delving into full customization of wpDiscuz, the two main requirements for integrating it with NCU were

  1. Adding the WP get_comment_class() function tag to the wpDiscuz template,
  2. Compensating within the unusual structure of wpDiscuz for its also unusual approach to comment-nesting, and
  3. Overriding a set of unique styles added and formatted by wpDiscuz.

Adding the get_comment_class() function requires breaking open the wpDiscuz customization template, and adding a few lines:

/* At line 152 of wpDiscuz template (class.WpdiscuzWalker.php) */
        // begin printing comment template
        /**
         *  ADD "NORMAL" COMMENT CLASSES 
         */
        $normal_class_arr = get_comment_class() ;
        $normal_classes = implode( ' ', $normal_class_arr ) ;

//substitute for line 153
//      $output .= '<div id="wc-comm-' . $uniqueId . '" class="' . $commentWrapperClass . ' ' . $authorClass . ' wc_comment_level-' . $depth . '">';
        $output .= '<div id="wc-comm-' . $uniqueId . '" class="' . $commentWrapperClass . ' ' . $authorClass . ' wc_comment_level-' . $depth . ' ' . $normal_classes . '">';

The difference between wpDiscuz without and with selectors produced by get_comment_class() will be substantial, all the more so if your theme or other plug-ins are also modifying its output (as is common):

With get_comment_class() :

<div id=”wc-comm-121856_121854″ class=”wc-comment wc-reply wc-blog-guest wc_comment_level-5 comment odd alt depth-5 bob-ignore ncu_super-max ncu_turn ncu_turn-1 old-comment”>

Without:

<div id=”wc-comm-121856_121854″ class=”wc-comment wc-reply wc-blog-guest wc_comment_level-5″>

So, using get_comment_class() gives you a lot more to work with. wpDiscuz developers are convinced, however, that adding it will destroy their plug-in too many cases. I haven’t found that to be the case in my experiments here and elsewhere, but, if you’re a wpDiscuz user, it’s not difficult to add it yourself and find out.

With basic WP functionality restored, it becomes possible to address the unique wpDiscuz template – which, unlike the vast majority of “normal” WordPress themes, does not depend on list styling, but instead is all divs. It also shows another oddity, the assignment of particular margins to wpDiscuz’s wc_comment_level-3 , wc_comment_level-4, and wc_comment_level-5 classes.

These will need to be dealth with. To cut to the chase: I needed to add the following code to get started at all.

 /* ncu wpdiscuz adjustment */

/* general margin adjustment*/
#wpcomm .ncu_turn {
  margin-left: -55px !important;
}
/* override wpDiscuz margin style for these two levels */
#wpcomm .wc_comment_level-3, #wpcomm .wc_comment_level-4 {
  margin-left: 55px !important; 
}

That was just to get started. I’ll later want to use wpDiscuz’s own customization features on its own stylesheet: Doing so will make it possible to get rid of those disreputable “!important”‘s, since the reason that they’re there is that wpDiscuz uses “!important” in its pre-customized stylesheet.