design and style your friendburst profile – profile image holder

profile image holder – background and border

div.profile_image_holder {
background-color: blue;
border: 1px solid red;
padding: 5px;
}

profile image holder – image

div.profile_image_holder a.thickbox img.profile_user_image {
border: 1px solid red;
}

profile image holder – replace profile image
The height property is only necessary if the new image has other dimensions than the profile image.

div.profile_image_holder a.thickbox {
display: block;
height: 150px;
background-color: transparent;
background-image: url(graphic URL);
background-position: center center;
background-repeat: no-repeat;
}
div.profile_image_holder a.thickbox img.profile_user_image {
visibility: hidden;
}

profile image holder – “change picture” link

div#sidebar div.t_center div.p_4 a {
color: gold;
}
div#sidebar div.t_center div.p_4 a:hover {
color: black;
}

There are some other links in “p_4” DIV’s. We can take care of them with more specific selectors.

Suggestion:
Make the “change picture” link look like a button.
I’ll use the same image as in the welcome bar navigation for this.

div#sidebar div.t_center div.p_4 a {
padding: 2px 11px 3px 10px;
position: relative;
background-image: url(http://www.friendburst.com/theme/frontend/tti_flava/style/flavahot/image/layout/topnavbar.png);
background-position: center center;
border: 1px solid black;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
color: white;
font-weight: bold;
}

Recant this effect for other links in “p_4” DIVs in the left column.

div#sidebar div.block div.t_center div.p_4 a {
background-image: none;
border: none;
font-weight: normal;
padding: 0px 0px 0px 0px;
}

20 Comments

  • Pingback: design and style your friendburst profile – contact box | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – top area | Blogs » Welcome to FriendBurst! Your Friendship Site
  • MarsMuzik says:

    i used the top 2 codes, worked like a champ 😉

    * on a side note, when you hover over the working links, the link text is white like the BG. maybe add a color so you can see what you are hovering ? >>> i know you welcome feedback like this *

  • Pingback: design and style your friendburst profile – index | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – contact box | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – music section | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – left column | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – profile header | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – bottom area | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – navigation bar | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – updates section input area | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – updates section | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – updates section user comments | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – basic info section | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – right column | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – updates section updates area | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: design and style your friendburst profile – comments section – post comment | Blogs » Welcome to FriendBurst! Your Friendship Site
  • Pingback: friendburst profile layouts – index | Blogs » Welcome to FriendBurst! Your Friendship Site
  • hwreginald says:

    :mrgreen: :love: 😆 🙄

Commenting on blog posts is coming back soon. You can read the comments here; to talk with a member now, leave a comment on their profile or send them a message.