Template:UserTabs

==Summary==

Setting up your Personal Pages

 * Setting up your tabs for your personal pages.
 * Lets start by using my own Talk Page as a working exmaple - have a quick look and you can see lots of nice tabs along the top where a user can categorise all their wiki edits they are involved with (and some personal pages too), this is all quite easy to setup, here are the instructions how to do so:


 * To add your own personal tabs to your user page without having to create a lot of extra pages:
 * First copy & paste the following CSS code onto your own common.css file (this is found under your Preferences->Appearance) or you can use this link: Change the username for your own.

/* For Tabs on YOUR Pages. */ .tab { position: relative; float: left; width: 115px; margin-left: 0px; margin-right: 4px; border: solid 1px #aaa; border-bottom: none; text-align: center; height: 30px; vertical-align: text-bottom; border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 5px; box-shadow: 2px 2px 2px #000; background-color: #D0D0D0; } .clrAll { clear: both; } .tab:hover { background-color: #F9F9F9; } .tabActive { background-color: #E9E9E9; } .tabBody { border: solid 1px #AAA; padding: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #E9E9E9; width: 100%; position: relative; } .tab span { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; } .tabBody .toc { float: right; margin: 5px; } /* End Tabs */ General Sandbox ToDo / Done Characters Links Talk
 * Save the page.
 * Now go to each page you have listed and create the article if necessary then add the following template at the top of the page (and each page you want to have the tabs on):


 * Your user page is the first Tab.
 * Create the page User:your user name/SandBox and add the template with the number 2.
 * Repeat this for the rest of the tabs you have listed.


 * Now lets create the personal template page this uses needs to be created for it to work; simply copy that CSS code you personalised into the following page (you'll be creating an article - a page for this also at the same time.):
 * Click here and replace the word YOU with your own username
 * Paste in the CSS code you previously used (AFTER editing the links).
 * Save the page.
 * Your tabs are now all set-up.


 * If you want further customization, please get in touch with Ague (Contributions &bull; Message)
 * SPECIAL NOTE: Don't forget to add the code (with the correct page number) to each and every page you want the tabs to show up on.

Example

 * All the tabs in the example link to Ague's stuff...

Customization Example

 * NOTE: You must list all your tabs in the template in order for the custom tabs to work. Failure to list the tabs names with a pipe "|" as noted below will result in the default tabs being used.  You have a maximum of 5 tabs to customize.  I'm working on a method to expand and/or enlarge that if needed on request.

/* For Tabs on my User Page */ .tab { position: relative; float: left; width: 100px; margin-left: 0px; margin-right: 4px; border: solid 1px #aaa; border-bottom: none; text-align: center; height: 30px; vertical-align: text-bottom; border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 5px; box-shadow: 2px 2px 2px #000; background-color: #D0D0D0; } .clrAll { clear: both; } .tab:hover { background-color: #F9F9F9; } .tabActive { background-color: #E9E9E9; } .tabBody { border: solid 1px #AAA; padding: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #E9E9E9; width: 100%; position: relative; } .tab span { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; } .tabBody .toc { float: right; margin: 5px; } /* End Tabs */ User: User:/ User:/ User:/ User:/ User:/ Archives Talk