The Juice Box Bandit's blog: "Your Profile Breakdown"

First image shows the effect on a good portion of the profile, second image will be of just the fuBling box.

And the image of just the fuBling box:

As described in a previous section, this is the base tables for your UIL+Rate+Default Pic+ASLol+Salute section, the fuBling table, Status table, F4(Fam+Friends+Fans+FanOf) table, MBL(MUMMs+Blogs+Lounges) table, Drink Bar, and two footer sections (will be overridden) profile viewers and viewable tables.

.userprofile_table {
  border: .2em red ridge;
}

As stated before, this covers your boldlinks: Referrals, Photos, fuBling, Status+atom rss, Family, Friends, Fans, Fan of, MUMMs, Blog Posts, Lounges, Drinks, and the overridden profile vieweres links.

.userprofile_boldlinks {
  border: .2em orange ridge;
}

This covers another broad range of areas: the numbers for achievements, All blasts link, last 10 viewers link, number joined (referrals), number of photos all in the ASLol section and the bling me! link.

.userprofile_links {
  border: .2em navy ridge;
}

This covers the base tables for the sections: ASLol, 3 parts of fuBling, 2 parts of Status, 8 parts of F4 (Fam+Friend+Fan+Fanof), The entire interests table, MBL (MUMMs+Blog+Lounges) as a whole, 2 parts of Drink Bar, the entire Comments table, and the overridden footer table for Skins.

.userprofile_transbg {
  border: .2em forestgreen ridge;
}

This covers the majoritive ASLol section, the 2 base tables for your age/sex/location, your numerical points value, Salutes separate from ASLol, Individual interests tables, fuBlings as a whole (just blings, not the header links). For the Status table it includes the date+comment+share section, The status replies (both individually and as a whole). For the F4 (Fam/Friend/Fan/FanOf) section it covers each row of users. For the MBL (MUMMs, Blogs, Lounges) section it covers the inner base table, and each section twice (the lounges link is the only one inbetween these two). Drink bar it covers the drinks+sent by user section as whole. The comments section it covers each comment+replies, and another table down by the Leave a Comment area.

.userprofile_transbg table {
  border: .2em orangered ridge;
}

This covers just about each table in the ASLol section, individual bling+sentby tables, just about every table in the status section (date, comment, share, user's pic, reply, the comment area, all comments combined, and a side bar). F4 table covers individual users. Interests covers the last update, headers, click to close and button, and text area. MBL covers every section individually. Drink bar individual drinks+sentby. Comments covers the user sidebar, reply, and comment area+replies.

.userprofile_transbg table td {
  border: .2em cyan ridge;
}

This covers anything that's a link in your ASLol section (the ?, level percent, progress, salute photo, etc). fuBling table: each bling, name, and sender. Status: user pic, name, the share links, comment, reply, and show all links. F4 each user's pic and name. MBL table: the links to MUMMs, Blog Posts, Lounges, and their sub links. Drink bar the senders names. Comments section: each user's pic/name/reply and any links they've posted as well as the delete and block links.

.userprofile_transbg table td a {
  border: .2em yellow ridge;
}

This covers each bling picture (as opposed to the bling picture's entire table from before).

.dirty_overlay_profile_wrap {
  border: .2em purple ridge;
}

There's actually a background picture to each bling, and that's what this covers.

.dirty_overlay_profile {
  border: .2em green ridge;
}

Simple enough, this is the box toward the mid section of your page to the right of your UIL/display pic section and to the left of your FuBling.

It contains your age, sex, location, fuowned, buzz, level, and all that good stuff.

I labeled it conflicted coding because it shares a lot of css with the tables on the right side of the profile.

I'll get into this in the Major Tables or Background section, for now though just going to go through each part of the Info Box.

This is the first line, it contains your Age, Sex, and if no city link the zip code or country name.
.userprofile_stat_firstline {
  border: .2em red ridge;
}

These both are the city/state link. They both affect the same thing you can use either or,but coding them both with different css won't produce a cool effect. This is a subtable to the Age/Sex table.
This also affects the blast box city/state link, but will be overridden by Fu-Code. For reference though, on the blast box if the city/state isn't designated, the country is ".blank_link".
.show_user_demo {
background-color: cyan;
}
.link_dummy {
  border: .2em cyan ridge;
}

This section affects the tables containing the text:
Name, Buzz, birthday, fu-Owned worth, Joined, Marital Status, Level, Points, Achievements, Blasts, and Profile Views.
It's just the text, not the entire line
.userprofile_stat_header {
  border: .2em purple ridge;
}
If you're having issues with a couple of these not coding, it's because you'll need the following section to clear it up, as "b" is bold text,
and birthday/name both are bolded, so you may have bold text coded elsewhere that affects these.
.userprofile_stat_header b {
 border: .2em purple ridge;
}

This covers all the sections but your level status (rank to rank, %, and points to go section).
.userprofile_stat_data {
  border: .2em orange ridge;
}

This is the percent bars. If you want to code them differently, use ".level_wrapper .percent_bar" for the level bar, and ".buzz_wrapper .percent_bar" for the buzz bar.
I'll make a percent bars section later that shows how they work, and how to change them to make custom bars.
.percent_bar {
  border: .2em indianred ridge;
}

This is the buzz percent displayed in numerical value.
.buzz_percent {
  border: .2em green ridge;
}

This is the buzz percent in name format, in this case "sh*t faced!".
.buzz_line {
  border: .2em white ridge;
}

This is the bolded links, unfortunately this css shares not only the fu-Owned by:, Referrals:, and Photos: links, but also the
fuBling, Status/atomrss, Family, Friends, Fans, Fan of, MUMMs, Blog Posts, Lounges, Drinks, and profile viewers links (though this is overridden by foot Fu-Code).
.userprofile_boldlinks {
  border: .2em navy ridge;
}

The Level Status Table, note that the table to the left of this shares with many other subtables and is a royal pain to individually code.
.user_level_group {
  border: .2em teal ridge;
}

The current level name and next level name gray text. If you want all 3 (the arrow counts) with separate borders/bgs, you can use ".user_level_top span" instead, though they all share the same code.
.user_level_top {
border: .2em orangered ridge;
}

This is the numerical percent value for your current level progress.
.level_percent {
  border: .2em #884411 ridge;
}

This is the points to go section.
.user_level_bottom {
  border: .2em gray ridge;
}

This is your salute images. You can either use ".delayload" or ".userpage_salutes"
.userpage_salutes {
  border: .2em yellowgreen ridge;
}

This is the area including your Display Picture,

Fan, Add, Rate, FuPal, etc.. links.

This image is a little longer than I'd like, but I've outlined each of the tables in different colors to help you skip ahead

to parts you're more concerned with. Just go through the image, find the color, and scroll down.

Some things to know: the table outlined in red is the main table. You'll notice there's 2 sections associated, the main, and a smaller box above it.

This kinda screws with general borders, but you can put a border on a sub table for the same effect.

The main thing you're concerned with is there's a background on this table that puts a gray glow border look on the right side of it.

If this screws with your profile look, just disable it by putting background-image: none; into it's css.

This is the section outlined in red. I used a repeatable image for the background, and as you can see it shows through all the layers. If you have a background image, the default profile puts the image midway up on the right side, and repeats it vertically. This means you'll have to designate where the image is anchored (background-position: top left; for example), and designate if it will repeat (or not) more than just vertically (background-repeat: repeat!important;)

Here's the background image LC/CT/FuBar uses on this table:

Not very big, but can cause problems for you when coding.

If you wish to border this section, typically the easiest way to go around the 2nd table issue, is to blank this section with a transparent background color, background-image set to none!important, no border, and move to the next table down (cyan).

#userpagecontentstyle .userprofile_primarycolumn {
  border: 1em red ridge!important;
  background-color: transparent!important;
  background-image: url()!important;
  background-repeat: repeat!important;
}

This is the cyan outlined area, it's a bit smaller in area, but the good news is that it's one table, not multiple tables. If you want to set a general background, or add a border to this entire section, this is one of the best ways to do so. Simply put your background css into the {css section} and have at it.

#userpagecontentstyle .userprofile_primarycolumn_linkbox {
  border: .5em cyan ridge!important;
}

This is the base table for the interaction buttons (cam pm fam friend fan fupal).

#userpagecontentstyle .user_action_buttons {
  border: .5em blue ridge!important;
}

This is the base table for the rate/like stats, and rating box (1-11/? cherries).

#userpagecontentstyle .dark {
  border: .5em purple ridge!important;
}

This is the main table for the cherry rating box. You can adjust it's size and put a custom background on it, say an increasing explosion towards the 11 cherry? Maybe some thumbs starting at a thumbs down going to a thumbs up? Bunch of x's and a couple green check marks on 10 and 11? Up to you really, be creative! =]]

#userpagecontentstyle .cherry_voting_container {
  border: .5em yellow ridge!important;
}

This is the rating / likes stat box. Shows your average rating, with the number of rates below it. A green number and text below it explaining that's the number of people that liked you today (within the 24 hour period after reset). Don't like the fubar grayscale cherry background? You can make your own and put it in here if you'd like! On the outline picture I made it so there's no image just to show it's editable.

#userpagecontentstyle .rating_count_wrapper {
  background-image: none!important;
  border: .5em green ridge!important;
}

This is the main apparent table for your primary (display) photo. You can size this to your liking or leave it, this is customizable.

#userpagecontentstyle .userprofile_primary_photo {
  border: .5em orange ridge!important;
}

This outline mainly shows there's a 3 part layer here that divides up your display pic, rating/likes area, UIL (User Interaction Links), and (not shown I have it blocked with NoScript) the facebook widget.

#userpagecontentstyle .userprofile_primarycolumn_linkbox table td {
  border: .5em white ridge!important;
}

This is the 1-11/? cherries box.

#userpagecontentstyle img#userratingimg {
  border: .3em pink ridge!important;
}

This is the 2 boxes containing your avg rating+number of rates, and likes+"likes today".

#userpagecontentstyle .rating_count {
  border: .2em beige ridge!important;
}

These two boxes are the number of rates (under avg rating), and the "likes today" text.

#userpagecontentstyle .subscript {
  border: .2em navy ridge!important;
}

These are the 6 tables each containing a user interaction link (1.Cam 2.PM 3.Fam 4.Friend 5.Add 6.FuPal). You can add backgrounds, but they share the same coding so individual backgrounds would be an issue. The boxes (tables) are as wide as the main table below it.

#userpagecontentstyle .user_action_buttons li {
  border: .2em orangered ridge!important;
}

These are the UIL's themselves. These also appear in the tooltip window (pops up when you hover over someone's pic) as the like or dislike buttons. Although they share the same attribute, the tooltip window is uneditable.

#userpagecontentstyle a.btn {
  border: .4em salmon ridge!important;
}

This is the "FuPal" image on the last UIL. Basically like this:  (button[FuPalImg]button). You can hide it, change the size, and I'll have to check but I think you can hide the image and make your own cool looking image to put in it's place.

#userpagecontentstyle a.btn img {
  border: .3em black solid!important;
}

This is the dashed gold box containing your Average Rating red numbers.
#userpagecontentstyle #rating_total {
  border: 2px gold dashed!important;
}

This is the gold box next to it containing your number of likes today (just the number, not text).
#userpagecontentstyle #likes_total {
  border: .1em gold ridge!important;
}

Now we're getting somewhere where we can customize!

This section of coding is your "Header Pic" or "Welcome Mat" to your profile.

It is located below your User Interaction Links, Name, and CustomURL section.

This is where you find, make, or adjust a picture to set the theme to your profile.

I've used a border to outline this section in red.

The CSS will be posted after this picture:

#userpagecontentstyle .userprofile_headerbar {
   height: ;
   background-color: transparent!important;
   background-image: url();
   background-repeat: ;
   background-position: ;
   border: ;
   -moz-border-radius: ;
}

Portions in red are optional, most people tend to exclude them.

The height should be about the same as the picture you chose to be your welcome mat.

For the example picture I used a "1em red ridge" border to outline the section in red.

You don't have to have one, I usually don't as the borders on the rest the profile tend to be enough.

The background-color I typically leave transparent out of habit, as having one set can override the picture at times.

As for your background-image, put the URL (http address) to your picture in the parenthesis: (←these things→).

If your image isn't meant to be tiled (or looks like crap tiled)

I'd recommend background-repeat be set to: no-repeat.

Is your picture huge and you just want a section of it to show?

Maybe you just want it to be anchored in a certain way?

background-position you can use terms like: Top, Center, Bottom; with Left, Center, Right.

For more info on background positioning and css I recommend checking out w3schools via quick google search.

If you have questions feel free to ask.

This is your Name and CustomURL:

These are the action links:

This is where people with active blasts appear, simple right?

Pretty simple, this is the instant message box between your "Live Feed" and the "Blast" box.

Located at the top of just about every page in the middle, you can click "Pop Out" and

have all your chats in another window if that makes it easier.

Simple enough, this is the box with all your notifications, actions, etc...

It's also one of the areas I like to put text in when making pictures. =]]

  As stated, this is the entire top section above the interaction links bar.

It contains the current happy hour host (if applicable),

Contains users online right now and users being pimped out,

and also contains the fubar userbase stats.