Over 30,047 people are online! Join now and start making friends!

Stevens's blog: "How To's"

created on 12/20/2008  |  http://fubar.com/how-to-s/b266817  |  125 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
3 wks ago
posts
41
views
131,305
can view
everyone
can comment
everyone
atom/rss

followers

Pain Grrr!ღ Im usually all about Live , Laugh , Love and Dance but...ღ
ButtrflyGoddess Fubar Bouncer OnlineHappy Birthday April!!!
Brian Moya RLBF2 Kelton In loveWow been a min...
MD 
Gunzle On FubarDo you reciprocate?
clamdigger Excitedneed drinks from noobs (green usernames) to level
DJ Magic OnlineThe good ones are either taken or too afraid to be taken
FAN AVATORIAN FOB TABI OnlineFATE ONE POWERFUL FORCE YOU CANT FIGHT RESISTANCE IS FUT...
CHRISTINA BummedWifey kept me up way too late last night!! Off to work! ...
VenusMaria OnlineMerry Christmas to all my Fufriends!!!
SaBiA On Fubarmorning
RagdollFmTravler9 OnlineLooking to make 117 more friends for Achievement Much L...
aLphameL Stepped awaystill working on this abominable report. have a good nig...♥
Naughty by Nature NaughtyGONE ON BREAK until I can come back and really play the ...
Devastation NinjaXOXOXO
STRIVING EvilApproach with CAUTION today.....
T Smooth HeartbrokenGO PACERSSSS
What da Neilio Naughtydrop a bomb on em
Kazucrash FM2 SexyRe... NaughtyGoodnighters Fu
Bee Stepped awayPlease Rate and LIKE me...... Need points....
SOUTHERN GIRL MFKN O... In loveNI NI my sexy's MY HUBBY IS STILL NEEDING FAMILY ADDS AN...♥
JB 
Thanatos OnlineHappy Easter!
Killsenemy HeartbrokenI miss my Baby.She was my whole world, but that wasn't e...
Kay 
DJ CoowLer SC7 NaughtyLOOKING FOR DJ'S ROCK AND COUNTRY !!!
Xx TeXaS xX EvilYou never Know what kind of fruit your life bares till i...
Annie FuOwned Heart ... In loveHELLO EVERY PLEASE HELP MY NUMBER ONE FRIEND HE NEEDS TE...
JayFM2UniquelyME ExcitedMy fu wife is going for 30K likes April 25th. Like her a...
Jim FM To EarthAngel Grrr!My VIP Has Expired And Due To Lots And Lots Of Medical E...
Othercat RLM2 Smokin... OnlineWhoohoo! I got my 5th Inferno!!!
Texas Jenn Excited+750% bonus points using Rock Star bling! +500% bonus p...
BerrySweet ExcitedHere we meet again.. shhhhh! Rocking into a thrilling Th...

other blogs by this author

 3 wks ago
Fu-Pastor_Blog
official fubar blogs
 1 year ago
fubar news by babyjesus 
 12 hrs ago
e by e 
 3 years ago
fubar.com ideas! by babyjesus 
 1 year ago
Word of Esix by esixfiddy 

discover blogs on fubar

blog.php' rendered in 1.0389 seconds on machine '236'.