• Here’s a sample of HTML markup from a comment footer in WPDiscuz:

    <div class="wc-comment-footer">
    <div class="wc-vote-result">...</div>
    <span class="wc-vote-link wc-up ...">...</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span class="wc-vote-link wc-down ...">...</span>&nbsp;&nbsp;&nbsp;<span class="wc-reply-link" title="Reply">Reply</span>&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;<span class="wc-share-link" title="Share">Share</span>&nbsp;&nbsp;&nbsp;<span class="share_buttons_box"></span><span class="wc_editable_comment">-&nbsp;&nbsp;Edit</span><span class="wc_cancel_edit">-&nbsp;&nbsp;Cancel</span><span class="wc_save_edited_comment">&nbsp;&nbsp;-&nbsp;&nbsp;Save</span><span class="wc-toggle">Hide Replies ∧</span>
    </div>

    I first notice that there are an awful lot of &nbsp;s. While this works for text-based inline layouts, this makes it very hard to tweak the spacing. There are plenty of better ways to achieve this with CSS (e.g. using display: inline-block and adding margin).

    There is also no easy way to use CSS to remove the pipe (“|”) between the voting buttons and dashes (“-“) between the Reply, Share, and Edit links, as they do not come with their own wrapper. A much better approach could be a vertical border using CSS.

    The Unicode symbols used for the Show/Hide Replies toggle (∧∨) are quite tall and angular for my taste, and there’s no way to change that either. Since you’re already using Font Awesome, why not make use of their arrow icons?

    I’ve seen this plugin shoot up in popularity recently, and I encourage the team behind this fantastic plugin to adopt simpler, more flexible markup so that developers can more easily integrate it into their themes. Any confirmation of future changes would be greatly appreciated.

    https://www.ads-software.com/plugins/wpdiscuz/

  • The topic ‘Suggestion: Use CSS/icons instead of "&nbsp"s and inline Unicode chararacters’ is closed to new replies.