Template:ChineseWebNovels/doc

Description
This is a new version of Template:ChineseNovels, it uses external CSS, provided below, simply copy and paste it to the wiki's CSS file (for example: MediaWiki:Common.css), then you can alter the CSS to your liking. By default, the CSS uses fandom colors, unlike the original Template:ChineseNovels, which only uses hex colors that are close to the fandom colors. The original Template:ChineseNovels has one particular problem that I wanted to address in this template: the table collapses on the last tab section, which is unwanted. This template fixes that issue and doesn't use wikitext table syntax. Another problem was that importing the original template does not update changes made to the template, which is unwanted. So this template allows you to simply transclude it to the desired wiki while allowing you to change the look with external CSS. This means you don't need to export and import this template to alter the design of it.

Sorting rules
Please ignore an article (a, an, the), a conjunction (and or &), or prepositions (such as for, in, or of) except where they are used distinctively.


 * For example, (The Legend of Futian) should be sorted to L and not T.
 * Or, (A World Worth Protecting) should be sorted to W and not A.

Don't leave empty new lines, and try to avoid whitespace at the end of each link. Keep it clean and alphabetically ordered to make it easy for other users to add and/or replace things. Don't delete content; you can use the talk page if you want to address deletions or any other kind of problem with the template. I will check it regularly.

CSS info
By default, this template has no inline CSS styles applied to it; you need to copy and paste the below CSS into your CSS file and alter it to your liking. It uses the classes  /   /   /. Note that  is only the containing , the actual content is addressed with the selector. To change the look of the tabber itself, you can create selectors, as shown in the CSS provided below. Please refer to Styling Help:Tabber for the CSS selectors needed to style the tabber components; using  will allow you to only style the tabber of this template without affecting other instances of tabber on the wiki.

Usage
Simply paste  to the bottom of your main page to show the template and don't forget to copy the CSS below into your Common.css or other CSS file you would like it to be.

Other
Originally, I wanted to provide parameters to this template, but since it's most likely only used once on the front or main page of a wiki and requires you to have access to the CSS files to set it up correctly anyway, it's rather overkill. However, please feel free to let me know if you would like to have parameters for this template to alter its looks. This would allow anyone, even non-admins, to simply change the look of the template with parameters.

Like for example:.

If you'd like to have this functionality please let me know here.

Main CSS
The CSS below is provided with comments, you can remove them if you don't want them in your CSS file, they are only to help the not so versed in CSS to have an overview of what exactly each rule does.

CSS modifications
Here is a collection of CSS snippets you can use to alter the design of the template, mostly by removing, replacing, and adding code to the selectors outlined in the examples. Please follow the instructions. It's recommended that you have basic knowledge of CSS; however, you should be able to accomplish this even with minimal knowledge if you follow the instructions. If you have trouble, you can always leave a message on my wall, and I will do my best to try to help you with any issues you might run into.

Dot separators
To have simple links with dot separators like the original template has, here is what you need to do. It's pretty simple and demonstrates that you can customize this template to your liking with some easy CSS changes. All you need to do is replace the margin declaration*  of this selector , then remove and replace   selecotor* and rule* with the one shown in the example below. Then simply add the whole rule for this selector. Lastly, remove this entire rule, this will then use the default link highlight setting you have set for the wiki, and you're done.


 * Note
 * I made an additional small change, setting the padding of the selector  for the main CSS to 7px for a more consistent default look; however, this doesn't look so good on the dot selectors version, so please simply change the padding, as shown below in the example, back to 5px. Keep in mind that this is set up to my personal taste, and this only applies when using the dot selectors. Of course, you can set the values to whatever you like; it's all up to your own personal taste. These are all just suggestions.

Rule* means selector* plus declaration*. Declarations are the properties and values, and selectors are the classes they apply to; all together, they are called a rule.

Hide tabs
You can hide tabs and their sections while keeping the rest intact, allowing you to choose only the tabs relevant to the wiki. This allows you to limit the number of links while at the same time getting updates made to the template and also being able to use the other design capabilities as if you were using the full template. These are only additional selectors and do not require you to alter the main CSS.

Hidden tab example

 * This example will remove the Xuanhuan tab and section.

Tab selector list
[data-hash="Xuanhuan_"] [data-hash="Xianxia_"] [data-hash="Western_Fantasy_"] [data-hash="Romance_"] [data-hash="Urban_"] [data-hash="Sci-fi_"] [data-hash="Game_"] [data-hash="Horror_"]
 * A list of selectors you can use to hide or customize the look of individual tabs.

Change the header text
In this example, we change the header text to Affiliation, for example. The CSS for  selector can simply be added without having to remove any of the other declarations. And the whole rule for this selector  is added to the CSS; I suggest placing it right underneath the   selector. This will make it easier for others to understand what's going on.
 * Note
 * Using  means that your padding is inherited from the   padding, you can also use the same value set for   instead. However, using inherit in this case makes perfect sense.