FANDOM



Tabview and scroller functions combined. The idea here is to have the whole fanfic easily accessible while also requiring minimal hand movement in viewing other chapters or viewing the comments.

Note for self: Sub-pages titled "Assets 1", "Assets 2" and "Assets 3" are being used for this example blog.



Notes:

  • Tabview is a self-contained module -- blanket formatting modules can't be applied directly to tabview or across all the tab pages
    • Formatting of the pages within tabs has to be done manually (i.e. from the actual source pages themselves)
    • Two <div> tags are being used to produce the gap between the scrollbar and the text (the scrollbar isn't a selectable HTML element, so I can't figure out a way of putting a margin arount the scrollbar)
      • Outer <div> tags contain the overflow-y:auto attribute
      • Inner <div> tags have a width of 99% to create the margin




Tabview Component

This code is placed on the "contents page". The individual chapters will each need their separate blogs.


<tabview>
User_blog:USERNAME/Chapter 1|Tab Title for Chapter 1
User_blog:USERNAME/Chapter 2|Stuff you type here becomes the tab's title
User:USERNAME|This tab would actually show a profile page
A mainpage without a namespace|These tabs can show more than just userblogs
</tabview>


Scroller Component

To enable the scrollbars for this set-up, this formatting needs to be applied to every individual chapter. Tabview itself is a self-contained module on Wikia, so attempting to apply the scrollbar directly to Tabview will not give the desired results.


<div style="height:700px; overflow-y:auto;">
<div style="width:99%;">
All of the text of the chapter goes here. Make sure everything 
that's supposed to be in your fanfic is inside BOTH of the div tags.
</div>
</div>




Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.