{"id":9323,"date":"2011-01-02T15:00:27","date_gmt":"2011-01-02T20:00:27","guid":{"rendered":"https:\/\/friendburst.com\/blog-new\/9323\/design-style-friendburst-profile-top-banner\/"},"modified":"2011-01-02T15:00:27","modified_gmt":"2011-01-02T20:00:27","slug":"design-style-friendburst-profile-top-banner","status":"publish","type":"post","link":"https:\/\/friendburst.com\/blog-new\/9323\/design-style-friendburst-profile-top-banner\/","title":{"rendered":"design and style your friendburst profile – top banner"},"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<\/span>
\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<\/a>
\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
Custom Top Banner<\/strong>
\nbetween the welcome bar and the navigation bar.<\/p>\n
\n

div#header_holder div#logo_holder div#logo {
\nheight: 185<\/span><\/strong>px !important<\/span>;
\nbackground-color: black<\/span>;
\nbackground-image: url(http:\/\/i51.tinypic.com\/2d82j52.png<\/span>); <\/span>
\nbackground-position: center center<\/span>;
\nbackground-repeat: no-repeat;
\n}<\/p>\n<\/div>\n

The default minimum height for this area is 95 pixel.
\nYou might want increase this value (the green line), but remember :
\nHuge top banner are not cool. Most people hate it if they have to scroll a lot to see the profile.
\nI suggest a maximum value of 200 or 250 pixel.<\/p>\n

Also, we all hate restrictions.
\nDon’t force Kevin to put a max-height property in the basic stylesheet. \ud83d\ude09<\/p>\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-9323","post","type-post","status-publish","format-standard","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/9323","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=9323"}],"version-history":[{"count":0,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/9323\/revisions"}],"wp:attachment":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/media?parent=9323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/categories?post=9323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/tags?post=9323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}