Over 10,741,348 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  |  142 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
7 months ago
posts
42
views
133,857
can view
everyone
can comment
everyone
atom/rss

followers

Carmelle OnlineAll I want for Christmas is a billion dollars and my lov...
ButtrflyGoddess Onlinehere somewhere
MD 
DJ SANTAS STANKERS OnlineI'm home, and I just don't know if I wanna be online on ...
Gunzle GoofyIncontinence Hot Line, can you hold please?
zyk On Fubarneed fam adds to lvl
FAN AVATORIAN Grrr!MERY CHRISTMAS ALL
CHRISTINA BummedNeeding toys for tots blings for achievements!
RagdollFmTravler9 NinjaJoe Cocker RIP. ..You Are So Beautiful. .
deck the meL with bo... Stepped away♫♫♫..... a beautiful sight, we're happy tonight.... bomb...♫♫♫
Actor in DC HeartbrokenThe entire family has come down with the flu. Ugh! Hop...
FAN Naughty by N... NaughtyRATES RESET--Please hit boomy and get rate returned. He...
birdie QUEEN of the ... FoxyWEARING TINSEL IN MY HAIR..NOT MY FAULT THAT MY HAIRS SO...
Tanya is Tangy NinjaIf I want any shit out of you, I'll squeeze your head.
STRIVING AOB LIFES a... EvilWHERE's ALL THE LOVE!!!!????
Addison Savannah SickOh boy, Strep, And im the sixth case today... On a light...
Gizmo In lovei love boobies i love boobies i love boobies
LB the Innocent Nymph Onlinechanged leveling requirements so I finally leveled. No...
Fah 
What da Neilio Naughtyit's a cold gutter, but it's my gutter
Bee 
JB 
loney611 Onlinethis fuckin sucks
Kay 
TeXaS OnlineMerry Christmas! Questions/Bling&site ideas In Shout box...
S U R F GoodHEY.. Santa Clause is coming to town.. where's those bli...
kini Passed outsick at the holidays is just awful.
JayFM2UniquelyME ExcitedLikes reset so come get them points! !
EaRtHfIrE OnlineI got the Job, YAY! I am now a tax preparer for H&R Bloc
TJxTDSxFE2 DJ BATMAN Passed outOK PPL TOLD ME MY LAST STATUS WAS NOT VERY NICE SO I AM ...
Hotstryker NaughtyI hope everyone has a blessed holiday season where ever ...
Sexi Lil Vixen EvilMorning Fu-ckers! :D
Nemjru ShyCan I get a lil help here, plz? Like Fan Cherry bomb, r...
CALI Stepped awayMERRY CHRISTMAS FU!
SweetSmileAni FE2 vauny OnlineHello SweetSmileAni ! Congratulations, you earned...
Neil Excitedrite who whats to trade 1 credit bling me need 10 in 24 ...

other blogs by this author

 1 month ago
Fu-Pastor_Blog
official fubar blogs
 2 years ago
fubar news by babyjesus 
 13 hrs ago
e by e 
 13 hrs ago
e by e 
 4 years ago
fubar.com ideas! by babyjesus 
 1 year ago
Word of Esix by esixfiddy 

discover blogs on fubar

blog.php' rendered in 1.445 seconds on machine '181'.