{"id":87866,"date":"2012-07-19T13:00:31","date_gmt":"2012-07-19T17:00:31","guid":{"rendered":"http:\/\/wpmu.org\/?p=87866"},"modified":"2013-06-13T20:58:08","modified_gmt":"2013-06-14T00:58:08","slug":"remove-wordpress-comment-tags","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/remove-wordpress-comment-tags\/","title":{"rendered":"How to Remove WordPress Comment Tags Message with CSS for a Clean Look"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87867\" title=\"clean-up-html-tags-wordpress-comments-big\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/07\/clean-up-html-tags-wordpress-comments-big.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"704\" height=\"496\" \/><br \/>\nAlthough some people like them, some people don\u2019t. They are the notices that tells users which HTML tags are permissible in a comments box. Whether they appear or not on your site depends on your theme. Here\u2019s an example of a theme using one of these notices.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87869\" title=\"wordpress-html-comment-tags\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/07\/wordpress-html-comment-tags.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"701\" height=\"362\" \/><br \/>\n<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Removing the Tags Allowed Message<\/strong><\/h2>\n<p>If you\u2019re in the camp that thinks this message is either unnecessary, messy, or both, then this little CSS trick should help you remove it and keep your <a href=\"https:\/\/wpmudev.com\/blog\/comments-moderation\/\" target=\"_blank\">comments <\/a>area a little cleaner.<\/p>\n<p><strong>Step 1 \u2013 Inspect the Element<\/strong><\/p>\n<p>First you will need to find out what CSS element controls the styling of the message. You can do that by \u201cinspecting the element\u201d in your browser. Both Firefox and Chrome have this functionality built in.<\/p>\n<p>Simply highlighting the message in your browser and then right click. You should see an option that says, \u201cInspect Element.\u201d Click that.<\/p>\n<p>In this example, we\u2019ll be using Firefox. In Firefox you will see the entire screen grayed out except for the part you are inspecting.<\/p>\n<p>Something else to note is that if you don\u2019t see the \u201cStyle\u201d pane open on the right-hand side, you will need to click the \u201cStyle\u201d button in the bottom right-hand corner.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87870\" title=\"inspect-html-tags-message\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/07\/inspect-html-tags-message.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"701\" height=\"536\" \/><br \/>\n<strong>Step 2 \u2013 Find the Style<\/strong><\/p>\n<p>In the Style pane, you will want to look for the section that controls the tags message. This will vary from theme to theme, but if you read through the style sheet for a minute, you should recognize something that makes sense for that message. It might look something like the following:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87871\" title=\"find-style-associated-with-html-tags-message\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/07\/find-style-associated-with-html-tags-message.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"700\" height=\"438\" \/><\/p>\n\n<p><strong>Step 3 \u2013 Edit Stylesheet<\/strong><\/p>\n<p>The last step is to edit the section that you found above in your style sheet.<\/p>\n<p>In your Admin area, go to <strong>Appearance &gt; Edit &gt; Stylesheet \u2013 style.css<\/strong>. Search for the section, and then change the attributes to the following:<\/p>\n<pre><strong>display: none;<\/strong><\/pre>\n<p>So in the case of my style sheet, I changed it from this \u2026<\/p>\n<pre>#respond .form-allowed-tags code {\r\n font-size: 11px;\r\n }<\/pre>\n<p>to the following \u2026<\/p>\n<pre>#respond .form-allowed-tags code {\r\n display: none;\r\n }<\/pre>\n<p>Now in my theme, after doing the above, I still had part of the message remaining:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-87872\" title=\"partial-html-tags-message-remains\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/07\/partial-html-tags-message-remains.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"699\" height=\"411\" \/><\/p>\n<p>And so I just went through the exact same process again with that remaining snippet: I found the style by inspecting the element, and then I set it to \u201cdisplay: none\u201d in my style sheet.<\/p>\n<h2><strong>A Clean, Uncluttered Comments Box<br \/>\n<\/strong><\/h2>\n<p>After saving your style sheet changes, you should now have a clean, shiny, uncluttered comment form.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-87873\" title=\"comment-form-html-tags-message-deleted\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/07\/comment-form-html-tags-message-deleted.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"698\" height=\"351\" \/><\/p>\n<p><strong>Note \u2013 telling your theme not to display this message does NOT take the functionality away. It simply takes the message away.<\/strong><br \/>\n<\/p>\n<p>&nbsp;<\/p>\n<p>Photo: <a href=\"http:\/\/www.bigstockphoto.com\/image-1905901\/stock-photo-pretty-woman-cleaning\" target=\"_blank\">Pretty Woman Cleaning<\/a> from BigStock<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This little trick lets you remove the notice that tells users which tags are permissible in comments.<\/p>\n","protected":false},"author":84404,"featured_media":87868,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[264],"tutorials_categories":[],"class_list":["post-87866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-comments"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/87866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=87866"}],"version-history":[{"count":0,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/87866\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/87868"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=87866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=87866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=87866"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=87866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}