{"id":3134,"date":"2010-12-05T19:49:17","date_gmt":"2010-12-06T00:49:17","guid":{"rendered":"https:\/\/friendburst.com\/blog-new\/3134\/design-and-style-your-friendburst-profile-top-area\/"},"modified":"2010-12-05T19:49:17","modified_gmt":"2010-12-06T00:49:17","slug":"design-and-style-your-friendburst-profile-top-area","status":"publish","type":"post","link":"https:\/\/friendburst.com\/blog-new\/3134\/design-and-style-your-friendburst-profile-top-area\/","title":{"rendered":"design and style your friendburst profile – top area"},"content":{"rendered":"\n<\/col>\n<\/col>\n\n\n
\n
\n

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

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

\u2022 Top Area<\/span>
\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<\/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
\n

transparent top area<\/strong><\/p>\n

div#header_holder div#header {
\nbackground-color: transparent;
\nborder: 0px;
\n}<\/div>\n

welcome bar – background and border<\/strong><\/p>\n

div#header_holder div#header div#ttitopnavbar {
\nbackground-color: blue<\/span>;
\nborder: 1<\/span>px solid<\/span> red<\/span>;
\nborder-top-width: 0px;
\n}
\ndiv#ttitopnav {
\nmargin: 0px;
\n}<\/div>\n

welcome bar – welcome text<\/strong><\/p>\n

div#ttitopnavbar div#ttiwelcome div#first_name {
\ncolor: white<\/span>;
\n}<\/div>\n

welcome bar – date<\/strong><\/p>\n

div#ttitopnavbar div#ttiwelcome div#time_stamp a {
\ncolor: gold<\/span>;
\n}
\ndiv#ttitopnavbar div#ttiwelcome div#time_stamp a:hover {
\ncolor: black<\/span>;
\n}<\/div>\n

welcome bar – topnav background image<\/strong> (200×25 px)<\/p>\n

div#ttitopnavbar div#ttitopnav {
\nbackground-image: url(“URL<\/span>“);
\n}<\/div>\n

welcome bar – topnav icons hover effect<\/strong><\/p>\n

div#ttitopnavbar div#ttitopnav ul li a:hover {
\nbackground-color: transparent;
\n}<\/div>\n

logo bar<\/strong><\/p>\n

div#header_holder div#header div#logo {
\nbackground-color: blue<\/span>;
\nborder: 1<\/span>px solid red<\/span>;
\n}<\/div>\n

logo bar – custom FBU logo<\/strong><\/p>\n

div#header_holder div#header div#logo div#custom_logo a {
\ndisplay: inline-block;
\nwidth: 150<\/span>px;
\nheight: 22<\/span>px;
\nbackground-image: url(“URL<\/span>“);
\n}
\ndiv#header_holder div#header div#logo div#custom_logo a img {
\nvisibility: hidden;
\n}<\/div>\n

logo bar – hide top ad<\/strong><\/p>\n

No. Be happy and thankful that we are permitted to customize our profiles with CSS. Do not misuse this privilege.<\/div>\n

news bar<\/strong><\/p>\n

div#header div#top_nav_holder {
\nbackground-color: blue<\/span>;
\nborder: 1<\/span>px solid red<\/span>;
\n}<\/div>\n

“News and Announcement”<\/strong><\/p>\n

div#header div#top_nav_holder div#top_nav {
\ncolor: white<\/span>;
\n}<\/div>\n

news bar – news link<\/strong><\/p>\n

div#header div#top_nav_holder div#top_nav a {
\ncolor: gold<\/span>;
\n}
\ndiv#header div#top_nav_holder div#top_nav a:hover {
\ncolor: black<\/span>;
\n}<\/div>\n

news bar – search field<\/strong><\/p>\n

div#header div#top_nav_search {
\nbackground-color: yellow<\/span>;
\nborder: 1<\/span>px solid red<\/span>;
\n}<\/div>\n

news bar – search field input<\/strong><\/p>\n

div#header div#top_nav_search input#search_field {
\nbackground-color: transparent;
\ncolor: blue<\/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":[6,1041],"tags":[1042,1044,1043],"class_list":["post-3134","post","type-post","status-publish","format-standard","hentry","category-friendburst","category-profile-design","tag-css","tag-profile","tag-profile-design-2"],"_links":{"self":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/3134","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=3134"}],"version-history":[{"count":0,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/3134\/revisions"}],"wp:attachment":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/media?parent=3134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/categories?post=3134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/tags?post=3134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}