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 mechanicsNewbie guideIn developmentDDO StoreSocial Media


ChallengesClassesCollectablesCraftingEnhancementsEpic DestiniesFavorFeats

GlossaryItemsMapsMonstersPlacesQuestsRacesReincarnationSkillsSpells


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

From DDO wiki
Jump to navigation Jump to search

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.
  • Next your talk page
    • Make this your first line: {{UserTabs|8|<Name>}}
      • Replace <Name> with your username.
  • 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.


  • If you want further customization, please get in touch with Ague (ContributionsMessage)
  • 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>