764 - 0
yes

design and style your friendburst profile – profile image holder

2010-12-07 at 07:28 am BlogBlog  RSSRSS  Subscribe

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;
}

Last 5 posts by pfeiffer_stylez


View Counter: 1,311 views


20 Responses to “design and style your friendburst profile – profile image holder”

  1. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  2. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  3. 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 *

    Likes: Thumb up 0

    pfeiffer stylez customizing
    pfeiffer_stylez Reply:

    Ups. ^^
    To me, the hover effect ist black & underlined… that’s why I changed the bg color to white…
    I’ll change it to dfdfdf (some kind of gray), hope that’s better.

    Likes: Thumb up 0

  4. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  5. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  6. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  7. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  8. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  9. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  10. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  11. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  12. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  13. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  14. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  15. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  16. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

  17. [...] • Profile Image [...]

    Likes: Thumb up 0

  18. [...] • Profile Header • Contact Box • Profile Image [...]

    Likes: Thumb up 0

Leave a Reply

You must be logged in to post a comment.