Over 11,415,380 people are on fubar. What are you waiting for?

Stevens's blog: "How To's"

created on 12/20/2008  |  http://fubar.com/how-to-s/b266817  |  146 followers
(How_To) Profile Skin Breakdown

This blog is more of a continuation of the blog titled (How To) Create Profile Skins. If you don't already know Fubar is comprised of two fundamental elements called HTML ('Hyper Text Markup Language) and CSS (Cascading Style Sheets). Basically HTML shapes your profile and CSS sets the HTML in place.

This blog will provide the following:

  • Description of each column
  • Show each CSS Class attained to each Column
  • Provide a Live Skin for every member to use (if they want).

Overview

Every members profile is the same (whether skinned or not). The only difference is each member has a different mindset to how they want their profile to look. Some member prefer a Fully Customized Skin while others might just choose a Simple Background.

Each profile has 3 Main Columns (Left, Center & Right) that provides every members statistics (whether it be basic information to profile viewers). Below will list the three columns and what each of its CSS classes do to make sure it works properly.

Instead of writing what each CSS class holds I will only add the necessary class, then at the bottom (In The Conclusion) I will write a functioning Profile Skin Code with each pertaining class.


Column 1

Column 1 is comprised of Two Main Area's of focus. The first area is where the members Username, User Photo and the Members Profile Statistics are located (As Shown In Figure 1-1A).

The second area holds most of the profiles links like Friend Requests, Abilities, etc... are placed (As Shown In Figure 1-1B).

[Figure 1-1A: Column 1-A][Figure 1-1B: Column 1-B]

Column_1-A

Column_1-B

Column 1-A CSS Classes

id="userprofile_headerbar" class="clearfix"

class="profile_display_name"

id="profile_left_col" class="profile_module"

id="profile_box"

class="pic_wrap"

class="pic"

class="side_icon_wrapper"

class="side_icon"

id="edit_photo" class="edit_me"

class="main_link"

class="fubaruserimage"

id="stats_expandable_wrapper"

class="stats expandable" id="stats_expandable"

class="stats_wrapper"

class="stats_bg"

class="stat_col hidden_stat"

class="stat_block"

class="numbers"

class="title"

class="visible_stat"

id="rating_total"

id="rating_count"

id="likes_total"

class="expand" id="stats_tab"

class="chevron top"

class="bottom"

id="rater" class="row"

id="user_rating_box" class="dark"

id="cherry_voting_container" class="cherry_voting_container"

id="userratingimg"

class="message_text_wrapper"

id="rated_message_text" class="message_text"

id="points_message_text" class="points_text"

class="message_text"

id="buzz_meter"

class="large_buzz_desc"

class="buzz_line buzz_normal"

class="large_buzz_wrapper"

class="meter"

class="buzz_wrapper buzz_normal"

class="percent_bar"

id="level_meter"

class="stat_title"

class="user_level_group"

class="large_level_wrapper"

class="profile_level"

class="level_wrapper"

class="percent_bar"

class="profile_level_meter"

id="points"

id="main_achievement"

class="img_container"

class="details"

class="separator"

id="achievements_expandable_wrapper"

class="achievements" id="achievements_expandable"

class="achievements_wrapper_two"

id="achievements_tab"

class="middle"

id="fumafia"

class="fumafia_logo"

class="fumafia_info"

Column 1-B CSS Classes

id="left_nav"

class="left_sub_nav" id="friends_menu"

class="left_sub_nav" id="flirt_menu"

class="left_sub_nav" id="gift_menu"

class="fupal"

class="down_icon"

class="left_sub_nav" id="link_menu"

class="share_bar"


Column 2

Column 2 is located on the center of the page, but recently it there has been a change and now the members Blings/Drinks are now located Figure 2-1A. Below the Blings/Drinks module is where Information About The Member is typically located(Photos, About Me & Interests)(As Shown In Figure 2-1B). Even further than that is where the members current Status Message and Profile Comments are located (As Shown In Figure 2-1C).

[Figure 2-1A: Column 2-A][Figure 2-1B: Column 2-B][Figure 2-1C: Column 2-C]

Column_2-A

Column_2-B

Column_2-C

Column 2-A CSS Classes

id="profile_main_col"

id="bling_box"

class="tabs"

class="on" id="bling_panel_tab"

id="drinks_panel_tab"

class="main show" id="bling_panel"

class="img_grid"

class="fav_icon"

class="big bling_container"

class="bling_img"

id="bling_button_fixed"

class="see_more_fixed"

Column 2-B CSS Classes

id="my_box"

id="tabs_my_box"

id="my_about_me_tab"

id="my_interests_tab"

id="my_about_me"

class="section vitals"

class="link_dummy show_user_demo"

class="section last bio"

Column 2-C CSS Classes

id="status_box"

id="status_container"

class="user_list two_col"

class="up"

class="col_main"

class="stream_message"

class="stream_source"

class="feed_online_icon"

class="news_feed"

class="fb_module_header borderless"

class="basicInputForm"

class="simple_status_form_msg"

class="fieldPosition"

class="fieldWrap"

class="field defaultText"

class="simple_status_form_hidden"

id="set_online_status" class="set_online_status"

class="set_online_status_btn"

class="btn cyan"

class="simple_comment_form_err"

id="main_feed_list"

class="col_left user_thumbs_container"

class="pic_container"

class="thumbs_container extended"

class="thumbs"

class="thumbs_counts"

class="stream_message"

class="user_name"

class="news_feed_comment"


Column 3

Column 3 is the final column on the members Profile Page and it holds everything from the members Friends to the members Profile Viewers (As Shown In Figure 3-1B to Figure 3-1G). There is a box that I did show (Figure 3-1A that will not be on anyone elses profile but that of the members. It usually is just there to show how many Bling Credits you have and links to buy more or gift a Bling Pack to another member.

[Figure 3-1A: Column 3-A][Figure 3-1B: Column 3-B]

Column_3-A

Column_3-B

Column 3-A CSS Classes

id="profile_right_col"

class="my_credits_module"

class="credits_cnt"

class="label"

class="whats_this"

class="get_more"

class="send_gifts"

class="power_ups"

Column 3-B CSS Classes

id="ranking_wrapper_profile_new"

class="profile_ranking"

class="profile_ranking_stats"

class="current_ranking ranking_default_size_xlarge ranking_default"

class="content_ranking_text_norank"


[Figure 3-1C: Column 3-C][Figure 3-1D: Column 3-D]

Column_3-C

Column_3-D

Column 3-C CSS Classes

id="friends_box"

id="friends_panel_tab"

id="family_panel_tab"

id="friends_panel"

id="family_panel"

class="friend_container"

class="friendfam_fav_rank"

Column 3-D CSS Classes

id="fans_box"

id="fan_panel_tab"

id="fanof_panel_tab"

id="fan_panel"

id="fanof_panel"


[Figure 3-1E: Column 3-E][Figure 3-1F: Column 3-F]

Column_3-E

Column_3-F

Column 3-E CSS Classes

id="blog_panel_tab"

id="lounge_panel_tab"

id="blog_panel"

id="lounge_panel"

class="text_entry_list"

id="blogs_lounges_etc_box"

Column 3-F CSS Classes

id="videos_panel_tab"

id="mums_panel_tab"

id="videos_panel"

id="mumms_panel"


[Figure 3-1G: Column 3-G]

Column_3-G

Column 3-G CSS Classes

Same As Column 3-C


Conclusion

In Conclusion, when each of the spread out sections are joined together they look like the three images below (Linked). Each profile can look a different way or have a different feel (dependent on what the member wants). Just remembr when you add a skin to your profile (whether You Create The Skin or Someone Else Creates The Skin) that skin can always be ripped and used on someone else's profile. Also remember if you don't want to create your own Profile Skin you can always Browse Skins and choose one that suits what you want, but remember what I just said in the last sentence..

[Column 4-A]

Column_4-A

[Column 4-B]

Column_4-B

[Column 4-C]

Column_4-C

Working Profile Skin Code

/* V:2 */

#pagecontent {
  background: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/14541.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
}

#userpagecontentstyle .profile_module .main {
  padding: 13px 13px 22px;
  border: 3px ridge #2B65EC;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
}

#userpagecontentstyle div#userprofile_headerbar {
  border-style: none;
  border-width: none;
  color: #FF0000;
  -moz-border-radius: 2.05em;
  padding: 0px 0px 0px 0px;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: CENTER;
  filter: alpha(opacity=99);
  -moz-opacity: 0.99;
  opacity: 0.99;
  -khtml-opacity: 0.99;
  background-image: url(ENTER YOUR PICTURE URL HERE AND ADJUST THE HEIGHT IN THIS BOX);
}

#userpagecontentstyle .copyright_notice{
  original: DOS;
  rewritten: Stevens;
}

#userpagecontentstyle #activated_bling_panel .img_container a {
  border: 0px ridge #2B60DE;
  display: block;
  margin: 0 auto;
  width: 50px;
}

#userpagecontentstyle #bling_panel .img_container a {
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/3666921374.gif);
  display: block;
  margin: 0 auto;
  width: 50px;
}

#userpagecontentstyle #activated_bling_panel .img_container {
  position: relative;
}

#userpagecontentstyle #bling_panel .img_container {
  position: relative;
}

#userpagecontentstyle #activated_bling_panel .img_container img.special_ability_img {
  height: 10px;
  width: 10px;
  float: left;
  margin-left: 2px;
  left: 0px;
  position: relative;
}

#userpagecontentstyle #bling_panel .img_container img.special_ability_img {
  height: 10px;
  width: 10px;
  float: left;
  margin-left: 2px;
  left: 0px;
  position: relative;
}

#userpagecontentstyle #activated_bling_panel .img_container .fromline {
  white-space: nowrap;
  display: block;
  text-align: center;
  width: 58px;
  padding: 0;
  position: relative;
}

#userpagecontentstyle #bling_panel .img_container .fromline {
  white-space: nowrap;
  display: block;
  text-align: center;
  width: 58px;
  padding: 0;
  position: relative;
}

#userpagecontentstyle #lounge_panel {
  min-height: 45px;
  border: 5px;
  border style: ridge  border color: #2B60DE;
}

#userpagecontentstyle #blog_panel {
  min-height: 45px;
  border: 5px;
  border style: ridge  border color: #2B60DE;
}

#userpagecontentstyle .news_feed {
  background: url();  font-family: Verdana;
  color: #2B60DE;
}

#userpagecontentstyle #status_box {
  background: url();  font-family: Verdana;
  color: #2B60DE;
}

#userpagecontentstyle .profile_container a {
  color: #5ED5D5;
}

#userpagecontentstyle .profile_display_name {
  font-size: 30px;
  font-family: Brush Script Std;
  color: #2B60DE;
  border: 3px ridge #2B65EC;
  height: 50px;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
}

#userpagecontentstyle #ranking_wrapper_profile_new {
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
  background-repeat: repeat;
  min-height: 45px;
  border: 3px SOLID#306EFF;
  font-family: tahooma;
  font-size: 15px;
  font-weight: bold;
  color: #306EFF;
}

#userpagecontentstyle #profile_box {
  border: 3px solid #2B65EC;
  background-color: #000000;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif)!important;
  background-repeat: repeat!important;
  background-position: 50% 100%!important;
  height: 550px;
}

#userpagecontentstyle #profile_box .stats {
  background-color: #000;
}

#userpagecontentstyle #profile_box .stats_bg {
  background: url(/imgs/user/stats_bg.png) top right repeat-y;
  background-color: #000;
}

#userpagecontentstyle #main_achievement .achievements {
  background: url(/imgs/user/achievements_bg.png) repeat-y scroll right top #000000;
}

#userpagecontentstyle .achievement_desc {
  font-weight: bold;
}

#userpagecontentstyle .stat_col .title {
  font-size: 9px;
  font-family: hobo std;
}

#userpagecontentstyle .stat_title {
  font-weight: bold;
}

#userpagecontentstyle #buzz_meter .buzz_percent {
  font-size: 12px;
  font-weight: bold;
}

#userpagecontentstyle #level_meter .level_percent {
  font-size: 11px;
  font-weight: bold;
}

#userpagecontentstyle #level_meter .user_level_top .current_level {
  font-size: 11px;
}

#userpagecontentstyle #level_meter .user_level_top .next_level {
  font-size: 11px;
}

#userpagecontentstyle #profile_box #main_achievement .details {
  background: url(/imgs/user/achievements_bg.png) repeat-y scroll right top #434242;
}

#userpagecontentstyle #profile_box #main_achievement .details p {
  font-size: 10px;
}

#userpagecontentstyle #profile_box #main_achievement .details .title {
  font-size: 11px;
}

#userpagecontentstyle #fumafia {
  border: none;
}

#userpagecontentstyle .fumafia_logo {
  margin: 0;
}

#userpagecontentstyle .fumafia_logo img {
  height: 16px;
}

#userpagecontentstyle .fumafia_info {
  text-align: left;
}

#userpagecontentstyle .fumafia_info a {
  color: #fff;
}

#userpagecontentstyle .fumafia_turf {
  width: 15px;
}

#userpagecontentstyle .fumafia_turf img {
width: 30px;
}

#userpagecontentstyle .bling_fav_rank {
  -border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  background: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif) repeat scroll 4px -14px transparent;
  border-color: #2B65EC;
  border-style: solid;
  border-width: 0 0 1px 1px;
  color: #2B65EC;
  font-size: 10px;
  height: 14px;
  line-height: 12px;
  opacity: 1;
  padding-top: 0;
  right: 0;
  top: 0;
  width: 16px;
}

#userpagecontentstyle .friendfam_fav_rank {
  -border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  background: url() repeat scroll 4px -14px transparent;
  border-color: #2B65EC;
  border-style: ridge;
  border-width: 1px;
  font-size: 10px;
  height: 14px;
  line-height: 12px;
  opacity: 1;
  padding-top: 0;
  right: 0;
  top: 0;
  width: 16px;
}

#userpagecontentstyle #my_box .main {
  background-repeat: repeat;
  background-position: top;
  border-color: #2B65EC;
  border-width: 3px;
  border-style: solid;
  background-color: transparent!important;
  background-attachment: fixed;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
}

#userpagecontentstyle #my_box .section {
  border-bottom: 1px solid #333;
  font-family: Verdana;
  color: #2B60DE;
  font-size: 15px;
  font-weight: bold;
  background-repeat: repeat;
  background-position: CENTER;
  background-color: transparent!important;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
}

#userpagecontentstyle #my_box .section .show_user_demo {
  font-size: 8px;
}

#userpagecontentstyle #my_box .section.last {
  margin: 0;
  border-bottom: 5px;
}

#userpagecontentstyle .section_title {
  font-size: 15px;
  font-weight: bold;
}

#userpagecontentstyle #left_nav {
  background-color: #000;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
  border: 3px solid #2B60DE;
  padding: 10px 13px;
}

#userpagecontentstyle #left_nav ul li a {
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

#userpagecontentstyle .left_sub_nav {
  margin-left: 12px;
}

#userpagecontentstyle .left_sub_nav li a {
  font-weight: normal;
  color: #2B60DE;
  cursor: pointer;
}

#userpagecontentstyle .tabs li {
  background: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif) repeat-x scroll 0 -98px #000000;
float: left;
  font-size: 12px;
  font-family: Verdana;
  color: #2B60DE;
  font-weight: bold;
  margin-right: 2px;
  min-width: 89px;
  padding: 7px 10px;
  text-align: center;
  border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
}

#userpagecontentstyle .tabs li.on {
  background: #000 url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif) 0 -8px repeat-x;
}

#userpagecontentstyle .tabs li a {
  color: #fff;
}

#userpagecontentstyle #status_box .title {
  font-size: 15px;
  font-weight: bold;
}

#userpagecontentstyle #status_box .user_status_wrapper {
  background-color: #000;
}

#userpagecontentstyle .news_feed ul.user_list li.last {
  border: 0;
}

#userpagecontentstyle .news_feed ul.user_list.mini {
  background-color: #000000;
}

#userpagecontentstyle .news_feed ul.user_list.mini li {
  border-color: #000;
}

#userpagecontentstyle .news_feed ul.user_list.mini .nub {
  background: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif) no-repeat scroll 17px 0 transparent;
  border: 0 none;
  height: 10px;
  left: 17px;
  top: -5px;
  width: 5px;
}

#userpagecontentstyle .news_feed .fb_module_header h2.title {
  background: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif) no-repeat scroll 0 1px transparent;
  font-size: 20px;
}

#userpagecontentstyle .simple_status_current {
  font-size: 12px;
}

#userpagecontentstyle .simple_status_current_title {
  color: #5ed5d5;
  font-weight: bold;
}

#userpagecontentstyle .simple_status_current_text {
  background-color: #000000;
  width: 200px;
  height: 100px!important;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
  border-width: 8px;
  border-color: #2B60DE;
  border-style: double;
  -moz-border-radius: 1.05em;
  color: #2B60DE;
  font-family: verdana;
  font-size: 20px;
  font-weight: bold;
}

#userpagecontentstyle .simple_status_current_clear {
  font-size: 10px;
}

#userpagecontentstyle .stream_message {
  font-size: 15px;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
}

#userpagecontentstyle .stream_source {
  font-size: 15px;
  background-image: url();}

#userpagecontentstyle textarea {
  background-color: #000000;
  width: 450px;
  height: 300px!important;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(http://i70.photobucket.com/albums/i101/charl17171/fubar_files/profile_breakdown/anime-thunder-strike-lightning-31000.gif);
  border-width: 8px;
  border-color: #2B60DE;
  border-style: double;
  -moz-border-radius: 1.05em;
  color: #2B60DE;
  font-family: verdana;
  font-size: 20px;
  font-weight: bold;
}

Preview Of Skin

live_preview


If you have any further questions about this topic or any topic related to coding
Please feel free to leave a comment on this blog or private message a Fubar Bouncer and they will try to help you the best they can.
For faster results you can also visit the Support Lounge and the staff/members will help you to the best of their abilities..




Copyright© Profile Skin Breakdown™ ~ All Rights Reserved
Blog Designed By: §tevens
click tracking
Leave a comment!
html comments NOT enabled! comment approval required.
NOTE: If you post content that is offensive, adult, or NSFW (Not Safe For Work), your account will be deleted.[?]

last post
1 month ago
posts
42
views
179,387
can view
everyone
can comment
everyone
atom/rss

followers

Pain Needs Love ShyRates Reset ! Love on me while I sleep xoxo
DJ MAD DOG Trying to workI dont like to beg but i need blinged 10 times to level....
MD 
Gunzle GoofyEvery time I see a mattress on the top of a car, I think...
zyk 
FAN AVATORIAN Sick*COUGH COUGH COUGH COUGH HACK HACK* SICK OF THIS COUGHIN
SaBiA FuBaR BoUnCeR Heartbrokendamn allergies
Ragdoll NinjaDid all the Official stuff you do when you lose your job...♥♥♥♥♥
FAN Naughty by Nature NaughtyAs of Reset Bronze FM2 Niko and Louie 357 KGB going for ...
Striving Evil** REWARD ** for the Safe return of my SEX LIFE !!!!!!!...
x Mrs THuMPSTaR x In love♪ I can see the patterns on your face I can see the mira...♪♥♥
Kazucrash ExcitedBig middle finger to yall
Bee 
Tom Tom FE2 Xx Synde... Ninjalast day of this getting up at 4am bs until next week sc...
Killsenemy EvilProwling around stalking kittens
Kay 
J 
Joy 
roberth Onlinethank you to all my 1000 friends
SweetSmileAni Prince... OnlineI am proud of my parents, even though our life simple bu...
Neil ExcitedBye fu time for a break
BoMb N i T r O RLBF2... Sickhave a wonderful day on and off doing work catch me if y...♥
JB 

other blogs by this author

 2 wks ago
Volunteer Blog
 6 months ago
Fu-Pastor_Blog
official fubar blogs
 3 years ago
fubar news by babyjesus 
 12 hrs ago
e by e 
 5 years ago
fubar.com ideas! by babyjesus 
 2 years ago
Word of Esix by esixfiddy 

discover blogs on fubar

blog.php' rendered in 1.7193 seconds on machine '215'.