Over 16,514,288 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  |  196 followers
(How To) Create A Profile Skin

Now-a-days everyone is online (whether it be Facebook, Twitter or Fubar) and each website (aka. Social Network) has their own style Profile Skin. While Facebook & Twitter have limited to no User Input on Custom Profile Skins Fubar allows its members to customize a limited portion of their Profile Skin. Below I will demonstrate (with limited Screenshots) of (How To) Create A Profile Skin using basic (easy) CSS (Cascading Style Sheets) Codes.

This blog will be Part 1 of a 2 part blog. The next part will list what some of the basic skin functions do.

(How To) Profile Skin Breakdown


The first thing you'll need to do is go directly to your Homepage (whether it be Old Hotness, Old Normal, Old & Janky or fsB) and go to the Main Menu (listed in Figure 1-1) and click on header_arrow.gifMy then Skins (for those on the fsB homepage click this link to go to the My Skins page or change your Homepage Style via your Settings Page.

When the page reloads it will direct you to your skins page (as shown in Figure 1-2) where a skin can either be Browsed or Created. For those who don't fully understand CSS it's recommended you Browse Skins rather than create one so you don't screw up your own.

[Figure 1-2: MySkins Page]


create a skin!   browse skins!

hint: if you activate multiple skins, one will be selected at random each time someone checks out your profile!


no skins configured.

To create your own skin click the Create Skin link. When the page reloads copy the basic skin style and place it into the textarea (as shown in Figure 1-3) on the create skin page add a name to the new skin and click the Submit button.

[Figure 1-3: Create Skin Page]


skin hints



the skin form to the right contains the default fubar user skin.

modify the values to your liking or cut & paste your own page style code!

note: until we have the time to make a better skin editor, this is best left to advanced or tech savy members. if you don't know what you're doing, simply browse all the existing skins and rip one!

.



enter skin below
name:

#userpagecontentstyle {
  background-image: url('URL to image here');
  background-attachment: fixed;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 100%;
}

#userpagecontentstyle div#userprofile_headerbar {
  margin:0;
  padding:0;
  width: 100%;
  height: 0px;
  }

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

#userpagecontentstyle #bling_panel .img_container a {
  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;
   99;
  left: 0px;
  position: relative;
  }

#userpagecontentstyle #bling_panel .img_container img.special_ability_img {
  height: 10px;
  width: 10px;
  float: left;
  margin-left: 2px;
   99;
  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;
  }

#userpagecontentstyle #blog_panel {
  min-height: 45px;
  }

#userpagecontentstyle .news_feed {
  background-color: #000;
  }

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

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

#userpagecontentstyle .profile_display_name {
  font-size: 30px;
  }

#userpagecontentstyle #profile_box {
  border: 1px solid #333333;
  background-color: #000;
  }

#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: Arial,Verdana,sans-serif;
  }

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

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

#userpagecontentstyle #level_meter .level_percent {
  font-size: 9px;
  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: 15px;
  }

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

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

#userpagecontentstyle .fumafia_turf {
  width: 15px;
  }

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

#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(/imgs/user/tabs_bg.png) repeat scroll 4px -14px transparent;
  border-color: #444444;
  border-style: solid;
  border-width: 0 0 1px 1px;
  color: #DDDDDD;
  font-size: 10px;
  height: 14px;
  line-height: 12px;
  opacity: 1;
  padding-top: 0;
  junk;
  right: 0;
  top: 0;
  width: 16px;
   99;
  }

#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(/imgs/user/tabs_bg.png) repeat scroll 4px -14px transparent;
  border-color: #444444;
  border-style: solid;
  border-width: 0 0 1px 1px;
  color: #DDDDDD;
  font-size: 10px;
  height: 14px;
  line-height: 12px;
  opacity: 1;
  padding-top: 0;
  junk;
  right: 0;
  top: 0;
  width: 16px;
   99;
  }

#userpagecontentstyle ul.text_entry_list li {
  margin-bottom: 5px;
  }

#userpagecontentstyle ul.text_entry_list li a {
  font-weight: bold;
  }

#userpagecontentstyle #my_box .main {
  background-color: #000;
  }

#userpagecontentstyle #my_box .section {
  border-bottom: 1px solid #333;
  }

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

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

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

#userpagecontentstyle #left_nav {
  background-color:#000;
  border:1px solid #333;
  padding: 10px 13px;
  }

#userpagecontentstyle #left_nav ul li a {
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  }

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

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

#userpagecontentstyle .tabs li{
  background: url(/imgs/user/tabs_bg.png) repeat-x scroll 0 -98px #000000;
  float: left;
  font-size: 11px;
  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;
  text-align:center;
  }

#userpagecontentstyle .tabs li.on{
  background: #000 url(/imgs/user/tabs_bg.png) 0 -8px repeat-x;
  }

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

#userpagecontentstyle #rater .message_text {
  color: #888;
  }

#userpagecontentstyle #status_box .title {
  font-size: 20px;
  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: #191919;
  }

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

#userpagecontentstyle .news_feed ul.user_list.mini .nub {
  background: url(/imgs/simple_home/nub_dark.png) no-repeat scroll 17px 0 transparent;
  border: 0 none;
  height: 5px;
  left: 17px;
  junk;
  top: -5px;
  width: 5px;
  }

#userpagecontentstyle .news_feed .fb_module_header h2.title {
  background: url(/imgs/simple_home/news_icon.png) 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 {
  font-style: italic;
  color: #aaaaaa;
  font-size: 11px;
  }

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

#userpagecontentstyle .stream_message {
  font-size: 13px;
  }

#userpagecontentstyle .stream_source {
  font-size: 10px;
  color: #777;
  }

After you have clicked the Save Skin button the page will be directed to a Saved Skin Page (shown in Figure 1-4), once loaded you'll then be redirected back to your MySkin Page (shown in Figure 1-5) with your new skin loaded.

[Figure 1-4: Skin Has Been Saved]


successfully created new skin 'Skin Name Here' (?????) and added to your skin list!


[Figure 1-5: Modified MySkin Page]


create a skin!   browse skins!

hint: if you activate multiple skins, one will be selected at random each time someone checks out your profile!


my skins
activenameripscreatorcreate date 
YESNOCustom Made SkinmeDec, 20 2010preview skin  |  edit skin   |   delete skin

As you can see in Figure 1-5 there is a tab that says Active (by default this will say NO). All you have to do to activate your new skin is to change that option to YES. The page will reload and your new skin will be active (shown in Figure 1-6 (This will be a screenshot)).

[Figure 1-6: Activated Profile Skin]
Skin Preview Image

Follow the above steps and you will have created your own Basic Skin.


If you have any further questions about this or any other profile skin topics
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..



© This blog is subject to change at any given time

© This blog does have a copyright notice and cannot be copied unless given permission by its owner




Copyright© Creating Profile Skins™ ~ All Rights Reserved
Updated Blog: 06/30/2018 - 23:35 EST
Blog Designed/Moderated 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.[?]

giphy icon
last post
2 years ago
posts
36
views
216,340
can view
everyone
can comment
everyone
atom/rss

followers

522051  
NYCPARTYANIMAL  OnlineGood Morning!
Sabia  
kini  
ExPhillyFinst369  Green EyeBusiness plan : 1. hold sign that says "free hugs" 2. Wh...
Pain  
Plato  
birdie QUEEN of the ...  HeartbrokenThank you all for being you..muahzzz
StrivingTDS  OnlineSHITFACE ?? PIMPOUT ?? HUMMER ???
NbN  
DR Coo  
Alexa  
Damitt  
Gypsy  
Keres  
Anomoly  NinjaCheck out Scrappers Blog about activating PowerUps durin...
MD  
HDxx  
JBAD  
Aryes  
Bee  
zyk  
Mooney  
SALT  
Dream Weaver  OnlineCome like and polish my bling!
Joy  
JB  
CALI  
Kay  
Jack  
Neil  
geno71  
skydaddy  ZZZThank U
DMAN1973 OG  BlazingMy first status of the New Year! I'm happy to have frien...

other blogs by this author

 1 year ago
Fu-Pastor_Blog
official fubar blogs
 8 years ago
fubar news by babyjesus  
 13 years ago
fubar.com ideas! by babyjesus  
 10 years ago
fubar'd Official Wishli... by SCRAPPER  
 10 years ago
Word of Esix by esixfiddy  

discover blogs on fubar

blog.php' rendered in 0.3612 seconds on machine '5'.