Design Guidelines

Work In Progress
A complete revision and a lot of changes to the guidelines are going to be made as soon as possible, this is mainly due to a new image gallery template that will soon be added and other minor templates that have been or will be also added/improved soon. So everything regarding images and sizing can for now be seen as obsolete.

## Translation Names

We have decided to **not** use the Translation Nation translations of the Original Work as in a lot of places they are misleading. Example: "Teacher Origin" (English Translation from Translation Nation) versus "Original Ancestor" (Our translation based off the Chinese). Teacher Origin doesn't make much sense when looking at it from an English perception, neither is it a correct translation of the Chinese. As such those translations **are not used**.

Another example is the Cultivation Rank "Undying Emperor"(English Translation from Translation Nation) versus "Immortal King". Looking at the Chinese Characters it uses wang 王 which means King. In no shape or form does it imply Emperor. In fact Emperor and King are a vast difference in Chinese.

Furthermore that English Novel is not an official translation. It is just a random translation team who did the translation. Their work is very much appreciated as they allowed Tomato's work to be read by more people especially non-chinese ones, however their translation in some aspect is flawed.

TLDR: We are not using the "English Novels" Terms as they do not make sense, nor uphold the true Chinese Origin.

## Formatting

Please read Fandom Help Wikitext page for all you need to know about formatting on Fandom sites.

### Table formatting guidelines

Due to making the website useable for mobile, please follow these guidelines when making new tables or editing old ones.

I will be adding a lot to this section as I redesign the tables! Please check back here at a later point to see what's changed

* Don't add links into brackets `([[link]])`.

## Personal feeling

Do not get personal feelings involved in edits. I do not care whether you hate a character or not. This wiki is supposed to be **objective**. I don't wanna read stuff like

```
What a stupid Character, he deserves to die
```

on Article Pages.

## Temporary and important warning or alert messages

If you want to temporarily bring something to peoples attention like warnings or alerts, please simply use the class *attention* in a span tag like in the example below, note that those messages must be manually removed once the problem is resolved.

Example warning / alert message

Example:

```
<span class="attention">Insert Your Message Here</span>

```

## Whitespace

Whitespace can be added with the Whitespace Template. {{Whitespace}}

It adds empty space            into your text. It also works on Templates.

In case more Whitespace is needed you can add any number to it, such as {{Whitespace|10}} or {{Whitespace|AnyNumber}}

## Quotes

Use the Template Quote: {{Quote}}

Within the template you can enter information for *quote, author and ref*.

"quote" is where the actual quote goes, "author" whoever said the quote and "ref" is supposed to be a reference to where it was said, e.g. Episode 7 or Chapter 19

Example:

```
{{Quote|quote=Hello, it's me|author=Avenging Angel|ref=On February 8th}}
```
 will give us

> *Hello, it's me* - Avenging Angel
>
>

## Template {Tabs} to browse rootpages & subpages

We put quite some work in modifying the wonderful tabs template. It's become an integral part of the wiki, we can use it as the titles describes to browse rootpages and subpages. It is well documented: **( HERE )**

Please visit the documentation page for more details. Short example below.

So please use this template when wanting to switch between pages.

New! Do not add more than 4 tabs in one line!
 This is to prevent tabs as much as possible from having to be scrolled in view on small screen sizes. It could happen that you could not tell that there are more menu items unless you touched the menu on mobile. So to prevent this as much as possible from happening we will limit the amount of tabs in one line to 4, in a some rare instance where the tab names are very short and allow for more than 4 tabs in one line of course it's permitted, but please test this on your mobile or in devtools on a small format mobile to make sure it works out.

### Layout Options

```

```

```

```

```

```

```

```

```

```

```
{{Tabs
}}

subpages - tabs are subpages of the first if set to 1, otherwise are not; default 1.
subpages + you don't actually need to set subpages to 1 simply removing the line will default to 1.

```

 You can use {{PAGENAME}} as the current page link, **if** you want to use a different name simply use the following syntax.

```
{{Tabs
}}

```

## Adding images to infoboxes

We have set up the infoboxes to hold only 4 pictures from now on, all additional images should go into the gallery of each character. This also means that Characters with more than 4 pictures should have a gallery set. So if you want to add a fifth picture or more please create a gallery subpage for the character you're editing.

Please follow these guidelines for adding images to infoboxes:

* Always create a gallery as in the example below.
* Name the images 1-4.
* Create a gallery subpage for a character when adding more than 4 images. (example below)
* Preferred format webp, if you don't have or can't make webp files, we recommend jpeg/jpg or png.
* Allowed image file types on Fandom (png, gif, jpg, jpeg, webp).

```
image1.webp|1
image2.webp|2
image3.webp|3
image4.webp|4
</gallery>

```

## Adding a gallery to character pages

* On the characters page go to the top of the page.
* Paste the following at the very top of the page and hit save.
* Then simply click on the Gallery Button at the top of the page you just saved.
* Read further on Gallery page for the next step

```
{{Tabs|tab1=Overview|tab2=Gallery}}

```

### Gallery page

* On the gallery page paste the following code.
* Add all the images you have, including the ones you added into the infobox as shown in the example below.
* Hit save and you have created gallery subpage for the given character now.

```
{{Tabs|tab1=Overview|tab2=Gallery}}
==Donghua==
<gallery orientation=portrait bordersize=none>
image1.webp|1
image2.webp|2
image3.webp|3
image4.webp|4
image5.webp|5
.
.
.
</gallery>
[[Category:Gallery]]

```

One last note as you can see in the example above we use ==Donghua==, if you want you can also add another gallery like in the example above with the title ==Manhua==, or ==Novel== if you want to add images of that kind.

* Make sure to only add images of the series, Donghua, Manhua or Novel, any images not related to the series will be deleted.
* If you don't add a picture a placeholder will automatically be present as the image for that character.

## Images

Please follow these instructions when adding images to pages. Add images inside a gallery if possible, even if it's a single image, we want to make use of the gallery settings for images as shown below in the examples. Please refer to help with galleries for in depth instructions and commands used in galleries.

### Use this format for gallery pages

```
<gallery orientation=portrait bordersize=none>
image1.png|'''[[WikiPageName]]'''|link=WikiPageName
image2.jpeg|'''[[WikiPageName]]'''|link=WikiPageName
image3.webp|'''[[WikiPageName]]'''|link=WikiPageName
</gallery>

```

* No size needs to be set, as it's controlled by **orientation=portrait**.
* Always set bordersize to none **(bordersize=none)**.
* You can use positioning `position=[left/center/right]`, but this is mostly unnecessary.
* For captions we prefer the default left position with bold text and `captionsize=large`, and we use `captionposition=within` to set the captions inside the images.

### Use these formats for single images and two or more images next to each other

#### Single image

```
<gallery widths=420 bordersize=none>
image1.png
</gallery>

```

#### Two or more images next to one another

```
<gallery widths=240 bordersize=none>
image1.png
image2.jpeg
</gallery>

```

* **420px** for a single image.
* **240px** for two images next to one another.
* **185px** for three images with right sidebar and four or five images without right sidebar.
* We don't recommend using larger or smaller sizes, as it will either push the images below the info boxes because they are too big, or simply be too small to clearly see.

#### Caption style example with single image

```
<gallery widths=420 bordersize=none captionsize=large captionposition=within>
image1.png|'''[[WikiPageName]]'''|link=WikiPageName
</gallery>

```

* If you want to use captions please use the following 2 attributes inside the opening gallery tag `captionsize=large captionposition=within`.
* Add the caption to each image individually and use a pipe between commands like this: `|'''[[WikiPageName]]'''|link=WikiPageName`, always make the caption/link bold as shown in the example, also if it's a simple caption without link.
* Adding `link=WikiPageName` will link the image itself to the actual page. You should only use this on images that should take you somewhere, else you want the modal to pop up for people to see the full size image, like with datasheets for example.

### Inline images

Of course there are occasions when you will want to add images with text around them, that's when you use single images without gallery tags like `[[Image:SomeImage.webp|420px]]`, please refer to adding images for instructions on how to do so, but please follow the sizing guidelines explained on this page.

You can find all the supported file formats for fandom on this page… uploading files. But we suggest you use either WEBP, JPEG or PNG.

(The preferred method is using gallery, this will make it easier later for others to add more images.)

### LICENSING

First and foremost when uploading images please use fair use licensing on all screenshot images that are taken from the series, or from anywhere else, instructions on how to do so are below. If you're uploading other images that aren't copyrighted, you don't have to use licensing, but know that there is even an option for that in the license dropdown menu if you wish to use that, but it's not a big deal not doing so.

I had a discussion about this the other day with one of the people from fandom. And it's true not many people do this, but he was quite clear that doing so is better, and is actually a must for all users.

Presuming you're using the **( images )** section to upload your image here is how to apply a license.

1. Click on ADD NEW IMAGE on top right of that page.
2. On the modal that opens, click SELECT A FILE.
3. Open the dropdown menu and select the the appropriate license before you click on UPLOAD FILE.
4. As you can see (screenshot) I made a mistake and did not SELECT A FILE first, I had to reselect the license.
5. Once you have your image and license selected, you can click on UPLOAD FILE.

* This will show on the images page when you have successfully applied the license.

* If you happen to make a mistake and uploaded the file without selecting the license. You can still do so afterwards, simply go to your image by first clicking the image in the gallery and then on the image's title in the modal top left corner. This will bring you to your image file.

4. Then simply add the following code to the image and save.

```
== Licensing ==
{{Fairuse}}

```