{"id":27,"date":"2004-10-31T05:59:39","date_gmt":"2004-10-31T05:59:39","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2004\/10\/comment-styling"},"modified":"2006-04-30T23:51:53","modified_gmt":"2006-04-30T23:51:53","slug":"comment-styling","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2004\/10\/comment-styling","title":{"rendered":"Comment Styling"},"content":{"rendered":"<p>I\u2019ve just spent some time to apply some better styles to the comments in\r\n\tmy blogs. If you take a look at a <a href=\"\/blogs\/log\/2004\/10\/web-hosting\" title=\"Web Hosting\">previous\r\n\tpost<\/a> with some comments or leave some here, you will see the following changes:<\/p>\r\n\r\n<ul>\r\n<li>Added background colours and hover styles to the comments.<\/li>\r\n<li>Added rounded corners for Gecko based browsers or any UA that support\u2019s\r\n\tCSS3\u2019s &#8216;<a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-border-20021107\/#the-border-radius\"><code>border-radius<\/code><\/a>&#8216;\r\n\tproperty.<\/li>\r\n<li>Added Additional highlight for comments from myself.<\/li>\r\n<\/ul>\r\n\r\n<p>The additional highlight for comments from me was a little bit of a challenge\r\n\tto work out how to do. I realised that all comments from contain me contain\r\n\ta link to my blogger profile. So, I was able to use that as a hook for the\r\n\tstyles:<\/p>\r\n\r\n<pre><code>.comment-author a[href=\"http:\/\/www.blogger.com\/profile\/3043458\"] {\r\n    background: #BECFFB;\r\n    margin: -1em 0 .5em -1em;\r\n    padding: 1em 1em .5em;\r\n    -moz-border-radius: 10px;\r\n    border-radius: 10px;\r\n}<\/code><\/pre>\r\n\r\n<p>As a result, it only works for browsers that support the attribute selector\r\n\t(at least Firefox and Opera\u00ac), and I could only apply the additional style\r\n\tto the one element. So, it\u2019s quite a small addition, but it\u2019s enough to highlight\r\n\tmy comments with a darker blue box around my name.<\/p>\r\n\r\n<p>Are these styles visually appealing?  Can you suggest any improvements?  What\r\n\tdo you think of the way I highlighted my comments? Let me know what you think,\r\n\tand I\u2019ll fix up the styles based on your comments, if necessary.<\/p>\r\n","protected":false},"excerpt":{"rendered":"I\u2019ve just spent some time to apply some better styles to the comments in my blogs. If you take a look at a previous post with some comments or leave some here, you will see the following changes: Added background colours and hover styles to the comments. Added rounded corners for Gecko based browsers or &hellip; <a href=\"https:\/\/lachy.id.au\/log\/2004\/10\/comment-styling\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Comment Styling<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/27"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}