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  |  138 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
6 months ago
posts
42
views
133,857
can view
everyone
can comment
everyone
atom/rss

followers

Carmelle Trying to workLE BLING TRADE ANYEONE?
ButtrflyGoddess Onlinetrying to regain my self composure and take care of me. ...
MD 
DJ SNEAKY NinjaI'm thinking about of deleting my account as its just ge...
Gunzle On FubarIncontinence Hot Line, can you hold please?
clamdigger BummedGO HAWKS
FAN AVATORIAN FOB GI... Grrr!GOING MIA FOR A DAY OR TWO SORRY
VenusMaria OnlineSummer is here!!!!
SaBiA Stepped awayits not to late to enter a salute for the halloween cont...
NONAME OnlineVaffanculo pezzo di merda! Ma vattelo a pigliare in culo
oh go to meLL Stepped awayHappy Halloween Eve! [i'm not hurr. leave a msg.]
Actor in DC OnlineTickle Me Tuesday! I'm off to clean and pick out my Chr...
Naughty by Nature NaughtyNaptime with the ice pack for the injection site on back...
Heavens Hottie xFBBx... GoodCollecting Fubar Birthday blings! Send me one I will sen...
birdie QUEEN of the ... ShyI KNOW YOU'RE HERE BECAUSE I CAN SMELL YOUR BRAAA-INNNS
STRIVING EvilI NEED!!!!!!!!!
TSmooth In loveWhy so serious??
What da Neilio Onlinemissed most of you! ha :-P
Kazucrash ExcitedFantastic!!
Bee NinjaOn andf Off... In and Out
BOMB ME SOUTHERN GIR... GoofyI WILL PAY 300 MILL FOR EACH CHERRY BOMB SENT TO ME SB M...
JB 
Keres OnlineWhat's Interesting on Fu these Days? Anything changed si...
loney611 Onlinethis fuckin sucks
zephy Onlinewould love to have some bling
Kay 
TeXaS OnlineFuBar Halloween Costume Contest 2014 Link is on my Page,...&site
S U R F GoodGood afternoon..Welcome another "Devils Day" Watch out f...
AngelicFireyEyes GoodI am going to be moving again. This time my own home. I ...
JayFM2UniquelyME ExcitedI have some 25 credit bling in favs that is dirty
Jbad Stepped awaywork work that is my rl right now
Spinja Ninja:)
Sexi Lil Vixen FoxyCherry Bombs Cherry Bombs... Just what I needed today! ;

other blogs by this author

 1 month ago
Fu-Pastor_Blog
official fubar blogs
 2 years ago
fubar news by babyjesus 
 12 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.5634 seconds on machine '215'.