Year of the Dragon: Through May 28th, claim free Expansion Pack (excluding Vecna Unleashed) or a Greater Elixir of Discovery! Speak to Xatheral in the Hall of Heroes. edit
Thank you for your patience while we continue to upgrade DDOwiki to the latest MediaWiki LTS version. If you find any errors on the site, please visit the Discord chat server and let us know.
Game mechanics • Newbie guide • In development • DDO Store • Social Media
Challenges • Classes • Collectables • Crafting • Enhancements • Epic Destinies • Favor • Feats
Glossary • Items • Maps • Monsters • Places • Quests • Races • Reincarnation • Skills • Spells
Please create an account or log in to remove ads, build a reputation, and unlock more editing privileges and then visit DDO wiki's IRC Chat/Discord if you need any help!
Template:UserTabs
Summary
Setting up your Personal Pages[edit]
- Start with your user page
- Make this your first line: {{UserTabs|1|<Name>}}
- Replace <Name> with your username.
- Make this your first line: {{UserTabs|1|<Name>}}
- Next your talk page
- Make this your first line: {{UserTabs|8|<Name>}}
- Replace <Name> with your username.
- Make this your first line: {{UserTabs|8|<Name>}}
- You can now use the red links on the tabs on your user/talk page to create the other pages
- Make the first line of each page: {{UserTabs|<#>|<Name>}}
- Replace <Name> with your username and <#> with the tab number.
- Make the first line of each page: {{UserTabs|<#>|<Name>}}
- If you want further customization, please get in touch with Ague (Contributions • 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.
Parameters[edit]
{{UserTabs |Tab Number = The tab number going from the 'General' Tab being 1 and incrementing by one as you go left to right. |Member Name = Pretty self explanatory I would hope... }}
Example[edit]
- All the tabs in the example link to Ague's stuff...
<css> /* 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 */
</css>
Customization Example[edit]
- 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.
- {{UserTabs|1|Ague|General|SandBox|Test Tab|Monkey|Elephant|Potato}}
<css> /* 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 */
</css>
CODING
<css> /* 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 */
</css>