CSS Facelift for Facebook - Part 1
June 12th, 2007
UPDATE: These techniques will no longer allow you to customize your Facebook profile.
Facebook now has over 24 million active users keeping in touch with friends and colleagues. Some people are predicting that it will become the de-facto social networking tool for the web. It’s certainly a very useful service, but as I spent more time with Facebook looking at all those identically designed profile pages I started to miss the individuality that accompanied personal websites and blogs.
Let’s look at how you can take a Faceook profile and using a bit of CSS and the new Facebook Markup Language, create something a bit more personalized. In Part 1 we’ll look at how to start adding your own xHTML and CSS.
In May the Facebook Platform was unveiled, allowing third-party creators to publish mini applications that Facebook users could add to their profile pages. While this provided opportunities to customize the features available to each user, these applications were deliberately kept isolated on the page with little ability to affect the overall appearance of the rest of the profile. Any CSS included in an third-party application is rewritten so that every rule is prefixed with the ID of the application within the page. This means any CSS rules you specify can only apply to content within the same application and won’t modify the appearance of elements elsewhere on the page.
If you write some CSS to modify a link:
a { color: #fc3; }
Facebook will change it to look something like this:
#box_app_2361343200 a { color: #fc3; }
Your CSS will now only apply to links within the element with the ID box_app_2361343200—the 3rd party application you have control over.
This means that in order to modify the appearance of a Facebook profile we’ll need to work with just the elements within the add-on application and more-or-less ignore the existing elements on the profile. We’ll be able to add content to our new profile, but the decision to use a custom profile unfortunately means some of the Facebook features won’t be displayed on your profile page. Don’t worry though, you’ll still be able to link to these features and make full use of them.
To get started you’ll either need to have your own application and use it to generate the CSS, xHTML and FBML, or use an application like FaceSpace or Code which allows you to include your own code within your profile.
Here is a screenshot of my Facebook profile before the Facelift:
And after I’d added some custom code:
Feel like creating something a bit more customized for your profile page? Let’s get started!
Within FaceSpace we start by creating the style tags and container DIV we’ll be using to create the new profile:
<style>
...
</style><div id="newprofile">
...
</div>Next we start adding the basic CSS we’ll need to begin customizing our layout. First we move the application box up to the top of the page, and use it to cover up the existing profile:
.inside_the_box {
position: absolute;
top: 0px;
left: 0px;
background-color: #222;
z-index: 999;
height: 3600px;
width: 100%;
padding:0;
}Next we hide the application’s header/menu to leave us with a blank “page” to work with:
.moveable { display:none; }
Now we can position the container DIV we created earlier:
#app2361343200_newprofile {
width: 420px;
margin: 0 auto !important;
background: #eee;
background: #000;
padding: 5px 20px;
}Pay attention to the revised ID names used by Facebook. app2361343200_ was appended to our ID name for newprofile in the generated xHTML on the profile, so we need to use #app2361343200_newprofile in our CSS to style this element. Class names are a bit easier—you can write them out normally and Facebook will handle applying the extra ID to both your xHTML and CSS quite seamlessly.
Now that we’ve covered up the existing profile with our new “page” and positioned our new profile on the page, we can use a variety of CSS techniques now to start building a custom Facebook profile!
UPDATE: These techniques will no longer allow you to customize your Facebook profile.
That is slick my friend!
I would love to a clone of the working entries used for the finished page.
I got all excited, but it looks like they’ve locked this down…
I get
#app_content_2361343200 #app_content_2361343200_newprofile {...}
and
generated, so the id and the css don’t match!
oops: I meant:
dammit, 3rd time lucky:
div id = app2361343200_newprofile
(sorry for spamming – wish I could edit my comments!)
The Facebook staff made some changes that prevents this CSS from working. The containing DIV is now set to position:relative, and more importantly overflow:hidden. Now any code you add with position:absolute will be based on the location of the containing DIV, and if you try using negative margins, or make it very wide then the overflowing sections will be hidden from view.
It’s good to see that they’re on the ball with keeping the application updated and running the way they want it to be. I’d like to be able to have more customizable profiles, but I respect that they really don’t want to allow their users to do that.
Indeed, that was the problem I was having. I was trying to add digital ink to my profile, I use a tablet PC for illustration and design, and I would love to scribble about….anyone know of a was to achieve this on facebook and/or myspace?
excuse me i ment
“does anyone know of a way to achieve this”
Handwriting recognition still has it’s flaws
is there any way id be able to just get the code that you put into the FaceSpace text box…
not everybody knows html as well as you do. please help us in simply giving some kind of code.
Unfortunately, as I mentioned earlier, you can no longer use this technique to create a custom profile page on facebook. You can only use CSS to style the contents of a section of the page.
The closest you could get would be to duplicate standard profile info inside your FaceSpace / Code application, then hide the regular (unstyled) information from your regular profile view.
so this canr be done anymore , if there is a way to do please post it on here , cause its really would be awesome , keep up the good work m8
WHATS THE CUSTOM CODE YOU USED TO MAKE THE DEMO ONE?
?
and where do you add it?
??
I’d like to change the title of the ‘friends’ section of my facebook profile. For example, Barack Obama, the US presidency hopeful, has changed his ‘friends’ to ‘supporters’. I think it’s probably a minor change and if I could just access the template I could do it. I’m also using a Mac if that makes any difference.
Does anyone know what is required? Thanks.
what about using javascript to acess the dom elements?
How would you go about hiding the content of the old profile? as you mentioned in your last comment as the way to go since the facebook staffers foiled your plan
just wanted to be notified when there is a response – hence the extra comment
how can i edit nd make my facebook look realy good x wb xox
Javascript isn’t really an option to modify facebook profiles. Javascript code is stripped from FBML before rendering inside your profile.
Cool, thanks though – good to know.
i still dont know how to even get a new profile on facebook, can someone show me how to do it??
I’d like to replace my name/status/networks/looking-for with a small header graphic. Is this not possible? I’d be happy just to make the text the same color as the background.
And I don’t really understand how to target a specific section for CSS-ifying. Where are those app numbers coming from? I’ve used FaceSpace and Code and neither have appended my code with the app number.
FBML makes my brain hurt.
Stuart thanks for doing this work for someone like me who knows very little CSS. I know it must be a real headache dealing with some of these comments that are rather demanding and simply idiotic. Hopefully, a means will be found to work around these profiles to hack them into something insanely great.
why do they even make you have their standard theme. it leaves no room for customization.
Steph,
the reason they don’t allow customization on themes is because they got out of control over at myspace because individuals that lack any design ability made some very horrible myspace pages. so they decided to do away with such customizations all together. which sucks, but in the same right its nice to be able to visit a page and not have music or layouts scream at you.
I doubt facebook will allow modifications to the layout since they need to have the ads placed on the page for revenue. And the ads need to be noticeable. It would have been nice though to be able to make at least subtle changes.
I agree that myspace pages can look aweful, and this was one of the things that put me off using myspace. The way it looked.
Hi friends,
How are you?hope you all fine…
Please tell me how to edit this profile interface…?I know CSS but i can’t find where to put this CSS CODE to change the interface of FACEBOOK PROFILE.
tc
Will we able to go to websites that have layouts for facebook,will we be able to put the background layouts on our profile like myspace.If so where do we look for layouts.
Stephanie