A Detailed Tutorial on how to make a centered Profile
Allot of questions has been poping up lately, about "Howmake a Centered Profile".
So I did this Tutorial for you guys to understand how to do it.
----------------------------------------------
First off, those centered Profiles are in essence, mostly all of the profile sections hidden, except for the "About Me" section.
From there, you just use pure HTML to input the rest of your content on your page.
Your Profile Picture, Links, etc...
will be all HTML.
Now let's get started then.
I'll explain each step.
----------------------------------------------
1) As with all other CSS codes, you start with the declaration of
<*style> tags to define the style you are using.
The attribute can be written in this form:
-----------------------
<*style type="text/css">
-----------------------
2) Hide the top-most nav section:
--------------------------------
#p_nav_header { display: none; }
--------------------------------
This is of course optional, but I see this seems to be the trend for those centered profiles.
3) Center your Profile name:
-------------------------------------
#profile-name {text-align: center;}
-------------------------------------
This code, and the one below are both optional. But it looks better with a centered profile.
4) Center your Profile Nav:
-----------------------------------
#profile-nav {text-align: center;}
-----------------------------------
5) Hide your User Details
This is a very Important Step!
The "user-details" is the large section just below the "profile-nav".
It encompasses the "Main body" and "Main Footer"
This step is also optional.
If you wish to hide this section completely like many do, then use:
-----------------------------
#user-details {display:none;}
-----------------------------
Once you do this step, you'll need to recreate your own Profile Picture, and User Links using HTML.
Now if you don't want to hide it, just skip this step for now.
Later I'll explain (in step 11) how to use your usual, profile picture and links, but have them centered.
6) Hide all tables to the Right:
-------------------------------
#content-right {display: none;}
-------------------------------
This step is not optional.
This hides all of the tables to the right.
(Friends, Albums, Fives, Comments)
Of course, there is always the option to hide your left tables and center the right ones instead.
But that way you can't add any content, which is the important thing,
and I don't see anyone doing that either, so...
I'll just ignore that idea ;)
7) Center all Left content.
-------------------------------------------
#content-left {padding-left:250px; padding-right:250px;}
-------------------------------------------
This is probably the most important step of all!
It is not optional.
This will create a padding, 250px to the left and right of the left tables.
Pushing them to the direct center of your profile.
Now you should see your layout starting to take shape.
8) Remove all unnecessary sections.
----------------------------------
#recent-updates {display:none;}
#interests {display:none;}
#groups {display:none;}
#widgets {display:none;}
#journalDetail {display:none;}
----------------------------------
You can choose what you want to remoave, and not remove.
Refer to the CSS Layout chart at the homepage of this group to decide what you may want to hide or not.
[CSS Layout Chart] Using {display:none;} after any section you wish to hide.
9) Center all Text
---------------------
td{text-align:center}
---------------------
This is also an important step!
It is not optional if you want everything to be centered.
This simply centers all of the text in all the tables in your profile.
10) You now close your CSS style declaration with this tag:
------------------------
<*/style>
------------------------
This is the last step of CSS editing, for those who included step 5!
English
