{"id":3615,"date":"2010-12-07T07:28:05","date_gmt":"2010-12-07T12:28:05","guid":{"rendered":"https:\/\/friendburst.com\/blog-new\/3615\/design-and-style-your-friendburst-profileprofile-image-holder\/"},"modified":"2010-12-07T07:28:05","modified_gmt":"2010-12-07T12:28:05","slug":"design-and-style-your-friendburst-profileprofile-image-holder","status":"publish","type":"post","link":"https:\/\/friendburst.com\/blog-new\/3615\/design-and-style-your-friendburst-profileprofile-image-holder\/","title":{"rendered":"design and style your friendburst profile – profile image holder"},"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<\/span><\/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

profile image holder – background and border<\/strong><\/p>\n

div.profile_image_holder {
\nbackground-color: blue<\/span>;
\nborder: 1<\/span>px solid<\/span> red<\/span>;
\npadding: 5<\/span>px;
\n}<\/div>\n

profile image holder – image<\/strong><\/p>\n

div.profile_image_holder a.thickbox img.profile_user_image {
\nborder: 1<\/span>px solid red<\/span>;
\n}<\/div>\n

profile image holder – replace profile image<\/strong>
\nThe height property is only necessary if the new image has other dimensions than the profile image.<\/p>\n

div.profile_image_holder a.thickbox {
\ndisplay: block;
\nheight: 150<\/strong>px;<\/span>
\nbackground-color: transparent;
\nbackground-image: url(graphic URL<\/span>);
\nbackground-position: center center<\/span>;
\nbackground-repeat: no-repeat;
\n}
\ndiv.profile_image_holder a.thickbox img.profile_user_image {
\nvisibility: hidden;
\n}<\/div>\n

profile image holder – “change picture” link<\/strong><\/p>\n

div#sidebar div.t_center div.p_4 a {
\ncolor: gold<\/span>;
\n}
\ndiv#sidebar div.t_center div.p_4 a:hover {
\ncolor: black<\/span>;
\n}<\/div>\n

There are some other links in “p_4” DIV’s. We can take care of them with more specific selectors.<\/p>\n

Suggestion:
\nMake the “change picture” link look like a button.<\/strong>
\nI’ll use the same image as in the welcome bar navigation for this.<\/p>\n

div#sidebar div.t_center div.p_4 a {
\npadding: 2px 11px 3px 10px;
\nposition: relative;
\nbackground-image: url(http:\/\/www.friendburst.com\/theme\/frontend\/tti_flava\/style\/flavahot\/image\/layout\/topnavbar.png<\/span>);
\nbackground-position: center center;
\nborder: 1<\/span>px solid black<\/span>;
\n-webkit-border-radius: 12px;
\n-moz-border-radius: 12px;
\nborder-radius: 12px;
\ncolor: white<\/span>;
\nfont-weight: bold<\/span>;
\n}<\/div>\n

Recant this effect for other links in “p_4” DIVs in the left column.<\/p>\n

div#sidebar div.block div.t_center div.p_4 a {
\nbackground-image: none;
\nborder: none;
\nfont-weight: normal;
\npadding: 0px 0px 0px 0px;
\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],"tags":[],"class_list":["post-3615","post","type-post","status-publish","format-standard","hentry","category-friendburst"],"_links":{"self":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/3615","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=3615"}],"version-history":[{"count":0,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/3615\/revisions"}],"wp:attachment":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/media?parent=3615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/categories?post=3615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/tags?post=3615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}