{"id":4750,"date":"2010-12-10T17:10:45","date_gmt":"2010-12-10T22:10:45","guid":{"rendered":"https:\/\/friendburst.com\/blog-new\/4750\/design-and-style-your-friendburst-profile-updates-section-user-comments\/"},"modified":"2010-12-10T17:10:45","modified_gmt":"2010-12-10T22:10:45","slug":"design-and-style-your-friendburst-profile-updates-section-user-comments","status":"publish","type":"post","link":"https:\/\/friendburst.com\/blog-new\/4750\/design-and-style-your-friendburst-profile-updates-section-user-comments\/","title":{"rendered":"design and style your friendburst profile – updates section user comments"},"content":{"rendered":"\n<\/col>\n<\/col>\n\n\n
\n
\n

\u2022 Introduction<\/span><\/p>\n

\u2022 Background<\/span><\/p>\n

\u2022 Top Area<\/a>
\n\u2022 \u2022 Custom Top Banner<\/a>
\n \u2022 Navigation Bar<\/a><\/p>\n

\u2022 Middle Area<\/span><\/p>\n

\u2022 Profile Header<\/a>
\n \u2022 Contact Box<\/a>
\n \u2022 Profile Image<\/a><\/p>\n

\u2022 Left Column<\/a>
\n\u2022 \u2022 BasicInfo Section<\/a>
\n\u2022 \u2022 Music Section<\/a><\/p>\n

\u2022 Right Column<\/a>
\n\u2022 \u2022 Updates Section<\/a>
\n\u2022\u2022\u2022 \u2022 Input Area<\/a>
\n\u2022\u2022\u2022 \u2022 Updates Area<\/a>
\n\u2022\u2022\u2022 \u2022 User Comments<\/span>
\n\u2022 \u2022 Comments Section<\/span>
\n\u2022\u2022\u2022 \u2022 Post Comment<\/a><\/p>\n

\u2022 Bottom Area<\/a><\/p>\n

\u2022 Tweaks<\/span><\/p>\n

\u2022
\n \u2022 Pre-made Layouts<\/a><\/p>\n<\/div>\n<\/td>\n

\n
\n

“XY like this” bar – background, border and text<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.comment_mini {
\nbackground-color: black<\/span>;
\nborder: 1<\/span>px solid white<\/span>;
\ncolor: green<\/span>;
\n}<\/div>\n

“XY like this” bar – link and link hover effect<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.comment_mini a {
\ncolor: red<\/span>;
\n}
\ndiv#content div#js_block_border_feed_display div.comment_mini a:hover {
\ncolor: white<\/span>;
\n}<\/div>\n

update – user comment area – background, border and text<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.js_mini_feed_comment {
\nbackground-color: yellow<\/span>;
\nborder: 1<\/span>px solid red<\/span>;
\ncolor: white<\/span>;
\n}<\/div>\n

update – user comment area – link and link hover effect<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.js_mini_feed_comment a {
\ncolor: green<\/span>;
\n}
\ndiv#content div#js_block_border_feed_display div.js_mini_feed_comment a:hover {
\ncolor: red<\/span>;
\n}<\/div>\n

update – user comment area – timestamp and link seperators<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.js_mini_feed_comment div.extra_info {
\ncolor: purple<\/span>;
\n}<\/div>\n

update – user comment area – report\/delete links and link hover effect<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.js_mini_feed_comment div.extra_info a {
\ncolor: blue<\/span>;
\n}
\ndiv#content div#js_block_border_feed_display div.js_mini_feed_comment div.extra_info a:hover {
\ncolor: white<\/span>;
\n}<\/div>\n

update – user comment input background area<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.js_feed_comment_form_mini div.comment_mini,
\ndiv#content div#js_block_border_feed_display div.js_feed_comment_form div.comment_mini {
\nbackground-color: white<\/span>;
\nborder: 1<\/span>px solid black<\/span>;
\n}<\/div>\n

update – user comment input area<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.comment_mini textarea,
\ndiv#content div#js_block_border_feed_display div.js_feed_comment_form_mini div.comment_mini input {
\nbackground-color: red<\/span>;
\nborder: 1<\/span>px solid yellow<\/span>;
\ncolor: green<\/span>;
\n}<\/div>\n

update – user comment input area – comment\/cancel buttons<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.comment_mini input.button {
\nbackground-color: green<\/span>;
\nborder: 1<\/span>px solid white<\/span>;
\ncolor: yellow<\/span>;
\npadding-right: 3px;
\n}<\/div>\n

update – user comment input area – comment\/cancel buttons hover effect<\/strong><\/p>\n

div#content div#js_block_border_feed_display div.comment_mini input.button:hover {
\nbackground-color: purple<\/span>;
\nborder: 1<\/span>px solid green<\/span>;
\ncolor: black<\/span>;
\n}<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

\u2022 Introduction \u2022 Background \u2022 Top Area \u2022 \u2022 Custom Top Banner \u2022 Navigation Bar \u2022 Middle Area \u2022 Profile Header \u2022 Contact Box \u2022 Profile Image \u2022 Left Column \u2022 \u2022 BasicInfo Section \u2022 \u2022 Music Section \u2022 Right Column \u2022 \u2022 Updates Section \u2022\u2022\u2022 \u2022 Input Area \u2022\u2022\u2022 \u2022 Updates Area \u2022\u2022\u2022 \u2022 […]<\/p>\n","protected":false},"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-4750","post","type-post","status-publish","format-standard","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/4750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/comments?post=4750"}],"version-history":[{"count":0,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/4750\/revisions"}],"wp:attachment":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/media?parent=4750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/categories?post=4750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/tags?post=4750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}