{"id":867,"date":"2016-11-05T15:58:00","date_gmt":"2016-11-05T21:58:00","guid":{"rendered":"http:\/\/guide.weavertheme.com\/?p=867"},"modified":"2016-11-05T15:58:00","modified_gmt":"2016-11-05T21:58:00","slug":"comments-advanced-styling","status":"publish","type":"post","link":"https:\/\/guide.weavertheme.com\/comments-advanced-styling\/","title":{"rendered":"Comments: Advanced Styling"},"content":{"rendered":"

Xtreme has a few general options to style comments.
\nIf you need more detail styling changes, below are some key rules to target the various elements of the comment section.<\/em>
\n 
\nThe rules below are mostly here to show you which CSS selector to use to target any given part of the comments.
\nYou can include different properties in these rules to match your requirement.<\/em><\/p>\n

Comment Top Meta info bar: <\/strong>Removing the background color and the line<\/p>\n

\r\n.commentlist li.comment .comment-meta {\r\nborder-bottom:none;\r\nbackground-color:transparent;\r\n}\r\n<\/pre>\n
 
\nAvatar Icon: <\/strong>Moving it in and removing the shadow<\/p>\n
\r\n.commentlist li.comment .comment-author img.avatar {\r\nleft:0px;\r\ntop:0px;\r\nmargin: 0 10px !important;\r\nbox-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;\r\n}\r\n<\/pre>\n
 
\nReply link:<\/strong> Make it into a button<\/p>\n
\r\n.comment .reply {\r\nwidth:55px;\r\nbackground-color:grey;\r\nborder-radius:5px;\r\npadding:5px 0 5px 20px;\r\nmargin-left:10px;\r\nmargin-bottom:10px;\r\n}\r\n.comment .reply a {color:white;}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* Link Color *\/\r\n.comment .reply span {display:none;}\u00a0\u00a0 \/* Remove down arrow *\/\r\n<\/pre>\n
 
\nComment text: <\/strong>Moving it to the right.<\/p>\n
\r\n.commentlist .comment-content {\r\npadding:0 10px 0 60px !important;\r\n}\r\n<\/pre>\n
 
\nMain comment box Borders: <\/strong><\/p>\n
\r\n.commentlist li.comment {\r\nborder:2px solid green !important;\r\n}\r\n<\/pre>\n
 
\nNested comment box borders:<\/strong><\/p>\n
\r\n.children li.comment {\r\nborder:5px solid grey !important;\r\n}\r\n<\/pre>\n
 
\nAuthor comment box borders:<\/strong><\/p>\n
\r\n.commentlist .bypostauthor.comment {\r\nborder:5px solid yellow !important;\r\nborder-radius:5px;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Xtreme has a few general options to style comments.
\nIf you need more detail styling changes, below are some key rules to target the various elements of the comment section.<\/em>
\n 
\nThe rules below are mostly here to show you which CSS selector to use to target any given part of the comments.
\nYou can include different properties in these rules to match your requirement.<\/em><\/p>\n Continue reading →<\/span><\/a>","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55,91,105,117,81],"tags":[45,156],"class_list":["post-867","post","type-post","status-publish","format-standard","hentry","category-advanced-topics","category-content-areas","category-how-to","category-per-pagepost","category-weaver-xtreme","tag-comments","tag-csshtml"],"yoast_head":"\nComments: Advanced Styling - Weaver Xtreme Guide<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comments: Advanced Styling - Weaver Xtreme Guide\" \/>\n<meta property=\"og:description\" content=\"Xtreme has a few general options to style comments.  If you need more detail styling changes, below are some key rules to target the various elements of the comment section.   The rules below are mostly here to show you which CSS selector to use to target any given part of the comments. You can include different properties in these rules to match your requirement.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/\" \/>\n<meta property=\"og:site_name\" content=\"Weaver Xtreme Guide\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-05T21:58:00+00:00\" \/>\n<meta name=\"author\" content=\"scrambler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"scrambler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/\"},\"author\":{\"name\":\"scrambler\",\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#\\\/schema\\\/person\\\/c57677ddb0a1817e6e94ce9b9487995f\"},\"headline\":\"Comments: Advanced Styling\",\"datePublished\":\"2016-11-05T21:58:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/\"},\"wordCount\":253,\"publisher\":{\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#organization\"},\"keywords\":[\"Comments\",\"CSS\\\/HTML\"],\"articleSection\":[\"Advanced Topics\",\"Content Areas\",\"How To\",\"Per Page\\\/Post\",\"Theme\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/\",\"url\":\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/\",\"name\":\"Comments: Advanced Styling - Weaver Xtreme Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#website\"},\"datePublished\":\"2016-11-05T21:58:00+00:00\",\"breadcrumb\":{\"@id\":\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/guide.weavertheme.com\\\/comments-advanced-styling\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/guide.weavertheme.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comments: Advanced Styling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#website\",\"url\":\"https:\\\/\\\/guide.weavertheme.com\\\/\",\"name\":\"Weaver Xtreme Guide\",\"description\":\"One Theme to Design Them All\",\"publisher\":{\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/guide.weavertheme.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#organization\",\"name\":\"WeaverTheme\",\"url\":\"https:\\\/\\\/guide.weavertheme.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/guide.weavertheme.com\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/weaver-xtreme-small.jpg\",\"contentUrl\":\"http:\\\/\\\/guide.weavertheme.com\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/weaver-xtreme-small.jpg\",\"width\":320,\"height\":74,\"caption\":\"WeaverTheme\"},\"image\":{\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/guide.weavertheme.com\\\/#\\\/schema\\\/person\\\/c57677ddb0a1817e6e94ce9b9487995f\",\"name\":\"scrambler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fed8c98c227c6919ae30643e80c802cf74c7b2fed56b88473f68592546364e7d?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fed8c98c227c6919ae30643e80c802cf74c7b2fed56b88473f68592546364e7d?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fed8c98c227c6919ae30643e80c802cf74c7b2fed56b88473f68592546364e7d?s=96&r=g\",\"caption\":\"scrambler\"},\"url\":\"https:\\\/\\\/guide.weavertheme.com\\\/author\\\/scrambler\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comments: Advanced Styling - Weaver Xtreme Guide","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Comments: Advanced Styling - Weaver Xtreme Guide","og_description":"Xtreme has a few general options to style comments.  If you need more detail styling changes, below are some key rules to target the various elements of the comment section.   The rules below are mostly here to show you which CSS selector to use to target any given part of the comments. You can include different properties in these rules to match your requirement.","og_url":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/","og_site_name":"Weaver Xtreme Guide","article_published_time":"2016-11-05T21:58:00+00:00","author":"scrambler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"scrambler","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/#article","isPartOf":{"@id":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/"},"author":{"name":"scrambler","@id":"https:\/\/guide.weavertheme.com\/#\/schema\/person\/c57677ddb0a1817e6e94ce9b9487995f"},"headline":"Comments: Advanced Styling","datePublished":"2016-11-05T21:58:00+00:00","mainEntityOfPage":{"@id":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/"},"wordCount":253,"publisher":{"@id":"https:\/\/guide.weavertheme.com\/#organization"},"keywords":["Comments","CSS\/HTML"],"articleSection":["Advanced Topics","Content Areas","How To","Per Page\/Post","Theme"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/","url":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/","name":"Comments: Advanced Styling - Weaver Xtreme Guide","isPartOf":{"@id":"https:\/\/guide.weavertheme.com\/#website"},"datePublished":"2016-11-05T21:58:00+00:00","breadcrumb":{"@id":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/guide.weavertheme.com\/comments-advanced-styling\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/guide.weavertheme.com\/comments-advanced-styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/guide.weavertheme.com\/"},{"@type":"ListItem","position":2,"name":"Comments: Advanced Styling"}]},{"@type":"WebSite","@id":"https:\/\/guide.weavertheme.com\/#website","url":"https:\/\/guide.weavertheme.com\/","name":"Weaver Xtreme Guide","description":"One Theme to Design Them All","publisher":{"@id":"https:\/\/guide.weavertheme.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/guide.weavertheme.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/guide.weavertheme.com\/#organization","name":"WeaverTheme","url":"https:\/\/guide.weavertheme.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/guide.weavertheme.com\/#\/schema\/logo\/image\/","url":"http:\/\/guide.weavertheme.com\/wp-content\/uploads\/2017\/03\/weaver-xtreme-small.jpg","contentUrl":"http:\/\/guide.weavertheme.com\/wp-content\/uploads\/2017\/03\/weaver-xtreme-small.jpg","width":320,"height":74,"caption":"WeaverTheme"},"image":{"@id":"https:\/\/guide.weavertheme.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/guide.weavertheme.com\/#\/schema\/person\/c57677ddb0a1817e6e94ce9b9487995f","name":"scrambler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/fed8c98c227c6919ae30643e80c802cf74c7b2fed56b88473f68592546364e7d?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fed8c98c227c6919ae30643e80c802cf74c7b2fed56b88473f68592546364e7d?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fed8c98c227c6919ae30643e80c802cf74c7b2fed56b88473f68592546364e7d?s=96&r=g","caption":"scrambler"},"url":"https:\/\/guide.weavertheme.com\/author\/scrambler\/"}]}},"_links":{"self":[{"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/posts\/867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/comments?post=867"}],"version-history":[{"count":0,"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/posts\/867\/revisions"}],"wp:attachment":[{"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/media?parent=867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/categories?post=867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.weavertheme.com\/wp-json\/wp\/v2\/tags?post=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}