FANDOM


  • Hello, Kaitou Shinshi-san.

    Would you like to help me setting a sub tabber like in this page? http://zh.kindaichi.wikia.com/wiki/%E9%87%91%E7%94%B0%E4%B8%80%E4%B8%80


    Thank you.

      正在载入编辑器
    • Hi, Fuyuki takagi

      The way I created that sub tabber, or known as stabber here, is using both templates and CSS code in MediaWiki:Wikia.css. CSS only allows admin to edit, so I can't help you to set up such things because I'm not an admin at your wiki, but I can try to guide you through it.

      First of all, you will need to create 2 templates: Start & End, to represent the sub tabber itself. In the Start template, you can see I've used the class "stabber", so you will need to put the CSS code in MediaWiki:Wikia.css with the same class name. It's not necessary to name it stabber, and you can name it whatever you prefer, but just remember it NEEDS to be the same as the class name you use in MediaWiki:Wikia.css.

      Second, put the following code in the MediaWiki:Wikia.css of your wiki:

      /* Stabber Styling */
      .stabber ul.tabbertab {
         border: 0px solid !important;
         border-top: 0px solid #B5B7CF !important;
         border-bottom: 0px solid #B5B7CF !important;
         border-left: 0px solid #B5B7CF !important;
         border-right: 0px solid #B5B7CF !important;
      }
       
      /** add spaces to stabview tabs **/
      .stabber .tabberlive > ul.tabbernav > li {
              margin-right: 4px;
      }
      /** End of add spaces to stabview tabs **/
       
      /** not applying on the last stabview tabs **/
      .stabber .tabberlive > ul.tabbernav > li:last-child {
              margin-right: 0px;
      }
      /** End of not applying on the last stabview tabs **/
       
      .stabber ul.tabbernav {
         background: transparent;
         border-top: none !important;
         padding: 5px 0em !important;
      }
      .stabber ul.tabbernav li a {
         color: #FFFFFF !important;
         border-top: 0px solid !important;
         border-bottom: 0px solid !important;
         padding: 5px 0.3em !important;
         margin-left: 0px !important;
         background: #919191 !important;
         border: none !important;
         font-weight: bold !important;
         font-size: 150% !important;
         -moz-border-radius-topright: 5px !important;
         border-top-right-radius: 5px !important;
         -moz-border-radius-topleft: 5px !important;
         border-top-left-radius: 5px !important;
         position: relative;
      }
      .stabber ul.tabbernav li.tabberactive a {
         border: 0px solid !important;
         border-top: 0px solid !important;
         border-bottom: 0px solid !important;
         color: #000000 !important;
         font-weight: bold !important;
         font-size: 150% !important;
         background-color: #919191 !important;
         cursor: default;
      }
      .stabber .tabberlive .tabbertab {
      	border-bottom: 0px solid #B5B7CF !important;
      	border-top: 0px solid #B5B7CF !important;
      	border-right: 0px solid #B5B7CF !important;
      	border-left: 0px solid #B5B7CF !important;
      }
      .stabber ul.tabbernav li.tabberactive {line-height: 0px !important;}
       
      .stabber ul.tabbernav li.tabberactive:first-child a {
         margin-left: 0px !important;
      }
      /* End of Stabber Styling */

      The above code is using the class of stabber, so if you named your class with something else earlier on in the Start template, you will need to change all of them here. Otherwise, there will be nothing to show up.

      After you have finished all of that, the sub tabber should be done, and the only thing left is to style it. I hope it works, and if you got an problem, just let me know. :)

        正在载入编辑器
    • Thank you very much!

      It's work.

      By the way, how to make a cases navigation like yours?

        正在载入编辑器
    • FANDOM用户
        正在载入编辑器
对此信息点赞
您已对此消息点赞!
查看是谁对此信息点赞
除了特别提示,社区内容遵循CC-BY-SA 授权许可。