design and style your friendburst profile – basic info section

December 9, 2010 · pfeiffer_stylez

• Introduction

• Background

• Top Area
• • Custom Top Banner
• Navigation Bar

• Middle Area

• Profile Header
• Contact Box
• Profile Image

• Left Column
• • BasicInfo Section
• • Music Section

• Right Column
• • Updates Section
••• • Input Area
••• • Updates Area
••• • User Comments
• • Comments Section
••• • Post Comment

• Bottom Area

• Tweaks

•
• Pre-made Layouts

module specific selector

div#js_block_border_profile_info

left side titles

div#sidebar div#js_block_border_profile_info div.content div.info_left {
color: red;
}

right side text

div#sidebar div#js_block_border_profile_info div.content div.info_right,
div#sidebar div#js_block_border_profile_info div.content div.info_right span {
color: blue;
}

right side links and hover effect

div#sidebar div#js_block_border_profile_info div.content div.info_right a {
color: green;
}
div#sidebar div#js_block_border_profile_info div.content div.info_right a:hover {
color: purple;
}

replace rating icons

div.star-rating, div.star-rating a {
background-image:url(URL)!important;
}

The default graphic is…
http://www.friendburst.com/static/jscript/jquery/plugin/star/star.gif
It’s absolute indispensable to make sure that the icons are on EXACT the same position.
I’ll add some pre-made graphics later.

selector for the membership icon
(artist and founder profiles only)

div#sidebar div#js_block_border_profile_info div.content div.info_right img.v_middle

FriendBurst

16 Comments

Pingback: design and style your friendburst profile – index | Blogs » Welcome to FriendBurst! Your Friendship Site
Pingback: design and style your friendburst profile – top area | 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 – contact box | 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 – bottom 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 updates area | Blogs » Welcome to FriendBurst! Your Friendship Site
Pingback: design and style your friendburst profile – profile image holder | 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 – navigation bar | 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 user comments | 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 – comments section – post comment | Blogs » Welcome to FriendBurst! Your Friendship Site
Pingback: friendburst profile layouts – index | Blogs » Welcome to FriendBurst! Your Friendship Site

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.