FriendBurst CSS and Profile Design

design and style your friendburst profile – top area

2010-12-05 at 07:49 pm

Blog

RSS

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

transparent top area

div#header_holder div#header {
background-color: transparent;
border: 0px;
}

welcome bar – background and border

div#header_holder div#header div#ttitopnavbar {
background-color: blue;
border: 1px solid red;
border-top-width: 0px;
}
div#ttitopnav {
margin: 0px;
}

welcome bar – welcome text

div#ttitopnavbar div#ttiwelcome div#first_name {
color: white;
}

welcome bar – date

div#ttitopnavbar div#ttiwelcome div#time_stamp a {
color: gold;
}
div#ttitopnavbar div#ttiwelcome div#time_stamp a:hover {
color: black;
}

welcome bar – topnav background image (200×25 px)

div#ttitopnavbar div#ttitopnav {
background-image: url(“URL“);
}

welcome bar – topnav icons hover effect

div#ttitopnavbar div#ttitopnav ul li a:hover {
background-color: transparent;
}

logo bar

div#header_holder div#header div#logo {
background-color: blue;
border: 1px solid red;
}

logo bar – custom FBU logo

div#header_holder div#header div#logo div#custom_logo a {
display: inline-block;
width: 150px;
height: 22px;
background-image: url(“URL“);
}
div#header_holder div#header div#logo div#custom_logo a img {
visibility: hidden;
}

logo bar – hide top ad

No. Be happy and thankful that we are permitted to customize our profiles with CSS. Do not misuse this privilege.

news bar

div#header div#top_nav_holder {
background-color: blue;
border: 1px solid red;
}

“News and Announcement”

div#header div#top_nav_holder div#top_nav {
color: white;
}

news bar – news link

div#header div#top_nav_holder div#top_nav a {
color: gold;
}
div#header div#top_nav_holder div#top_nav a:hover {
color: black;
}

news bar – search field

div#header div#top_nav_search {
background-color: yellow;
border: 1px solid red;
}

news bar – search field input

div#header div#top_nav_search input#search_field {
background-color: transparent;
color: blue;
}

Last 5 posts by pfeiffer_stylez

design and style your friendburst profile - graphic ressources - rss - January 5th, 2011
design and style your friendburst profile - top banner - January 2nd, 2011
friendburst profile layouts - index - December 15th, 2010
design and style your friendburst profile - comments section - post comment - December 12th, 2010
design and style your friendburst profile - updates section user comments - December 10th, 2010

View Counter: 3,340 views

Tags: css, profile, profile design
FriendBurst, Profile Design RSS 2.0 You can skip to the end and leave a response. Pinging is currently not allowed.