Owly's coding 404.

Ninpocho Admin · Oct 22, 2019

INDEX
The basics of Coding.
Alignments of text.
Urls and lists.
Insert Pictures and how.
Tables.
Spoilers.
Codes.
Quotes
Anchor use.
Miscs.
Example uses of multiple codes.
Custom-made Coding.

꧁NEWS ꧂
[DD/MM/YY]
[24/03/21]
Adding of Costum-Made Coding

*note: I am a dyslectic person if you do find grammatical errors. Please help me fix them and / or attempt them to explain as to why I made that mistake and how to prevent that next time!

Ninpocho Admin · Oct 22, 2019

The basics of Coding.
So In this part, we will cover basics... Like how can I place in bolding, italics, colors and where can I place my text and what to do with images. A lot of players use the following to display the speech. In a bolding effect. Some of them add an A color to this. Some of them place their texts in an italic fashion.

To bold a text, all you need to do is CTRL+B or use the bar above and enter any text in between the brackets. This goes the same for anything italic CTRL+i or use the bar above, for underlined which is CTRL+U or use the bar above and to last of the ~~strike~~ which is CTRL+S or use the bar above

Code:

bold: [b][/b]
Italic: [i][/i]
Underline: [u][/u]
Strike [s][/s]

To add colors to the words, all you have to do is either click the "Text color" In your top bar or use the following code. Do note, I give two different options on using it, either insert the word of the color or the HEX color of the code.
This is an example being used
This is an example being used
This is an glow example being used.

colors said:
Code:

[color=red][/color] [color=#4287f5][/color] [glow=red][/glow]

Alignments of text!
For example on the left side

You can also center the text out.

Or place this all on the right side, looks odd tho...

And we have this "align" way of writing the text.

Now to use this, we can have multiple usages as I will show later on. Below here you have the codes again to use them. (or just use the top bar also.)

BB-code	Bar use.
Code: `[left][/left] [CENTER][/CENTER] [RIGHT][/RIGHT] [JUSTIFY][/JUSTIFY]`

Urls and lists

So urls are amazing to add around, for example. Click to return to Home but you can also place an url behind an image as often shown in signatures!

Wihtout url

with url

While lists work a little bit different. You can use the following code:

This
is
one

This
is
another

BB-codes	Bar-use
Code: `[LIST=1] []This []is []one [/LIST] [LIST] []This []is []another [/LIST] [INDENT]Then we have this[/INDENT]`

Go to index

Ninpocho Admin · Nov 11, 2019

Insert Pictures and how!

And pictures, please love to add pictures for it. I never go wider than the site rules on signatures, which is 400 pixels width. and I often do not make them higher than 200 high, because otherwise, it will fill up a whole page. For height, there isn't really a maximum but I never really advise to go bigger than 500px.
The following are a few examples and how they will look like once being used. The text generated by a Latin text generator just to display how things would look. I will post here, the code before the examples used with images before that get's lost. And do mind, the text placement trick also works with images!

BB-code
Code: `[img]INSERT URL HERE[/img] [center][img]INSERT IRL HERE[/img]`

Bar-use-1	Bar-use-2

pixels use:400x200
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in nunc felis. Aenean consectetur augue id odio commodo, ut lacinia quam congue. Sed nisi lorem, interdum sed cursus id, faucibus a dolor. Nunc egestas accumsan nisl, id pharetra est pulvinar vel. Cras libero tellus, blandit in finibus porta, placerat ac est. Nam iaculis nibh arcu, a blandit urna vulputate ac. Mauris et sollicitudin tellus. Duis condimentum quam ac quam luctus fermentum. Vestibulum vel ipsum turpis.

Vestibulum a rhoncus sapien. Donec vitae sodales eros. Pellentesque faucibus mauris quis lectus ullamcorper, eu porta neque faucibus. Vestibulum congue massa sed aliquet lobortis. Duis sit amet dignissim nunc. Duis a venenatis est. Nulla elementum enim nec libero pellentesque, eget semper urna bibendum. Donec venenatis id sapien vitae tristique. Vestibulum at purus id ex laoreet posuere. Mauris vestibulum massa velit, porta faucibus erat gravida non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum fermentum accumsan. Nunc convallis consectetur nunc nec lacinia.

pixels use:200x400
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in nunc felis. Aenean consectetur augue id odio commodo, ut lacinia quam congue. Sed nisi lorem, interdum sed cursus id, faucibus a dolor. Nunc egestas accumsan nisl, id pharetra est pulvinar vel. Cras libero tellus, blandit in finibus porta, placerat ac est. Nam iaculis nibh arcu, a blandit urna vulputate ac. Mauris et sollicitudin tellus. Duis condimentum quam ac quam luctus fermentum. Vestibulum vel ipsum turpis.

Vestibulum a rhoncus sapien. Donec vitae sodales eros. Pellentesque faucibus mauris quis lectus ullamcorper, eu porta neque faucibus. Vestibulum congue massa sed aliquet lobortis. Duis sit amet dignissim nunc. Duis a venenatis est. Nulla elementum enim nec libero pellentesque, eget semper urna bibendum. Donec venenatis id sapien vitae tristique. Vestibulum at purus id ex laoreet posuere. Mauris vestibulum massa velit, porta faucibus erat gravida non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum fermentum accumsan. Nunc convallis consectetur nunc nec lacinia.

----------------------------------------------------------------------------------------------------

So... as you have seen, the second example looks rather off... This is an easy fix for us, we have something that is a fimg. A fimg lets you place an image left or right of the text.

pixels use:200x400
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in nunc felis. Aenean consectetur augue id odio commodo, ut lacinia quam congue. Sed nisi lorem, interdum sed cursus id, faucibus a dolor. Nunc egestas accumsan nisl, id pharetra est pulvinar vel. Cras libero tellus, blandit in finibus porta, placerat ac est. Nam iaculis nibh arcu, a blandit urna vulputate ac. Mauris et sollicitudin tellus. Duis condimentum quam ac quam luctus fermentum. Vestibulum vel ipsum turpis.

Vestibulum a rhoncus sapien. Donec vitae sodales eros. Pellentesque faucibus mauris quis lectus ullamcorper, eu porta neque faucibus. Vestibulum congue massa sed aliquet lobortis. Duis sit amet dignissim nunc. Duis a venenatis est. Nulla elementum enim nec libero pellentesque, eget semper urna bibendum. Donec venenatis id sapien vitae tristique. Vestibulum at purus id ex laoreet posuere. Mauris vestibulum massa velit, porta faucibus erat gravida non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum fermentum accumsan. Nunc convallis consectetur nunc nec lacinia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in nunc felis. Aenean consectetur augue id odio commodo, ut lacinia quam congue. Sed nisi lorem, interdum sed cursus id, faucibus a dolor. Nunc egestas accumsan nisl, id pharetra est pulvinar vel. Cras libero tellus, blandit in finibus porta, placerat ac est. Nam iaculis nibh arcu, a blandit urna vulputate ac. Mauris et sollicitudin tellus. Duis condimentum quam ac quam luctus fermentum. Vestibulum vel ipsum turpis.

----------------------------------------------------------------------------------------------------

So now it looks a whole lot better! To do this you simply do FIMG instead of IMG then place an = behind and type left or right, just where you want to have the image to be.

Code:
Code:

Left: [Fimg=left][/fimg] Right: [fimg=right][/fimg]

In the next one, we will be covering tables and what you can do with those! stay tuned!

Back to index

Ninpocho Admin · Nov 12, 2019

Tables!

And how can we use them:

If you have your bar toggled, you can find them by clicking the following:

Or use the BB-code:

Code:

[table]
[tr]
[td][/td]
[/tr]
[/table]

This is just a simple 1x1 table... more "bigger" tables are quite easy to get.

BB-code	Bar-use
Code: `[TABLE] [TR] [TD]TABLE 1[/TD] [TD]TABLE 2[/TD] [TD]TABLE 3[/TD] [/TR] [/TABLE]` An extra "TD" is an extra table on the right hand side.

Example use for tables:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla vulputate ipsum, et molestie ante volutpat eget. Phasellus gravida massa in purus rutrum, in lobortis enim eleifend. Phasellus nec sem eu lacus pretium volutpat. Duis euismod magna quis libero rutrum, quis sagittis nunc rutrum. Fusce suscipit nibh convallis purus pretium, vitae ultrices dolor interdum. Nam sodales orci sit amet dui consequat laoreet. Aliquam fringilla ex ut nibh sollicitudin, quis hendrerit orci consequat. Quisque id consectetur purus. Vestibulum a maximus libero, nec dapibus neque. Donec accumsan, purus eu euismod dictum, velit nulla sollicitudin metus, finibus suscipit libero nisi eget nibh. Proin fringilla commodo posuere. Nullam commodo tristique est sed condimentum. Vivamus ac enim lacus.

Home page

Go to index

Ninpocho Admin · Nov 12, 2019

Spoilers, codes and other shiny things!
As we covered almost all of it, we will handle the few things that most people seem to be using.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla vulputate ipsum, et molestie ante volutpat eget. Phasellus gravida massa in purus rutrum, in lobortis enim eleifend. Phasellus nec sem eu lacus pretium volutpat. Duis euismod magna quis libero rutrum, quis sagittis nunc rutrum. Fusce suscipit nibh convallis purus pretium, vitae ultrices dolor interdum. Nam sodales orci sit amet dui consequat laoreet. Aliquam fringilla ex ut nibh sollicitudin, quis hendrerit orci consequat. Quisque id consectetur purus. Vestibulum a maximus libero, nec dapibus neque. Donec accumsan, purus eu euismod dictum, velit nulla sollicitudin metus, finibus suscipit libero nisi eget nibh. Proin fringilla commodo posuere. Nullam commodo tristique est sed condimentum. Vivamus ac enim lacus.

Which can be used the following way too (BEWARE, THIS MIGHT NOT WORK ALL THE TIME AS YOU BASICALLY CANNOT NESTLE CODES!)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla vulputate ipsum, et molestie ante volutpat eget. Phasellus gravida massa in purus rutrum, in lobortis enim eleifend. Phasellus nec sem eu lacus pretium volutpat. Duis euismod magna quis libero rutrum, quis sagittis nunc rutrum. Fusce suscipit nibh convallis purus pretium, vitae ultrices dolor interdum. Nam sodales orci sit amet dui consequat laoreet. Aliquam fringilla ex ut nibh sollicitudin, quis hendrerit orci consequat. Quisque id consectetur purus. Vestibulum a maximus libero, nec dapibus neque. Donec accumsan, purus eu euismod dictum, velit nulla sollicitudin metus, finibus suscipit libero nisi eget nibh. Proin fringilla commodo posuere. Nullam commodo tristique est sed condimentum. Vivamus ac enim lacus.

With this, I placed a named spoiler inside another spoiler. This can be done a few times, however, it is fairly easy to break your own coding with this!!

Codings
To show others, let others copy your work easier, you can use the code codings. simply place

Code:

[code]bracket /code bracket (I cannot nestle this code....

in order to use them:

Code:

Do beware you paste your text in between the brackets!

Quotation!
And now!

Quoting stuffies!

This can be done in multiple ways, you can quote a person by using another =

Person A said:
Person A would have been saying something.

Code:

[quote]Without quote is from[/quote]

[quote=Person A] with quote is from[/quote]

Anchors and Goto!
This is personally one of my favorites! And easier to use when you toggle the BB_codes!
First I will layout and example... Which makes it hopefully easier to explain how they work!

Toggled	BB-Code
START TESTER A TESTER B TESTER C	Code: `[anchor=START]START[/anchor] [goto=A]TESTER A[/goto] [goto=B]TESTER B[/goto] [goto=C]TESTER C[/goto]`

An anchor is something it can return to. The Goto is a thing you can click to go to that anchored point. For example our index up above. You click on the goto, then you suddenly are at the place you clicked on! That is the anchor point. A different way to use this is to make the text between the brackets an image.

TESTER A
TESTER B
TESTER C

The other thing that is majorly important. in order to use a Goto and Anchor correct... You must correspond to them.
So if your Goto is called A. then your Anchor for that Goto is called A also. I would use them as simple as possible (caps lock sensitive!)

Go to index

Ninpocho Admin · Nov 12, 2019

miscellaneous

Gradients!

Tester one

Code:

[divboxgradient=HEX-COLORCODE|HEX-COLORCODE]Tester one[/divboxgradient]

Highlight!
Tester text one

Code:

[highlight=HEX-COLORCODE]Tester text one[/highlight]

Progress bar!

Code:

[progress=ENTER NUMBER 1 - 100]x[/progress]

Warning
The following may only be used by STAFF

!	Warning text here

Code:

[Warning]Warning text here[/warning]

Ninpocho Admin · Nov 12, 2019

BB-code examples

Class	Jutsu
Class Name HP: (mod1+lvl) x stamina CP: (mod2+lvl) x chakra control Class Bonus: Class bonus features High: High Stat(s) Average: Average Stats Low: Low Stat(s)	Transformation - M Body Switch - M Infernal Ember - M Thermal Maw - R1

Stats

Agility: 38/50
Stamina: 38/50
Taijutsu: 37/50
Ninjutsu: 37/50
Genjutsu: 37/50
Chakra Control: 38%/50%
Power Level: 225 / 300

Ninpocho Admin · Mar 24, 2021

Custom-made Coding.

Profiles;
Shinrya Kitsune, the Code-Monkey

, has made another amazing BB-code for us, this one is to display your character in a very basic way! Throughout using the 'profile' below!

Below I have made an example of how it can be used, below the coding and the explanation as to how it works.

Nin:
600

Tai:
600

Gen:
600

Stam:
600

Agi:
600

CC:
600

PL:
3600

Level:
15

Name Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed maximus lectus. In at ligula aliquet, venenatis urna quis, pulvinar orci. Etiam elit nibh, cursus ac tempus vel, cursus quis magna. Nulla suscipit ac metus eget consectetur. Vestibulum accumsan nunc eros, id tristique metus gravida eget. Etiam dictum imperdiet sem at porttitor. Nullam consequat odio vel ultrices tincidunt. Nunc vestibulum turpis eu vestibulum sodales.

Duis quis venenatis magna. Sed fringilla, mi eu iaculis laoreet, nisi nunc rhoncus augue, vel cursus purus est ut neque. Pellentesque eget facilisis nisi, at hendrerit tortor. Aenean vehicula pretium sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean leo urna, scelerisque sodales vestibulum vel, porttitor id dui. Vivamus sed ullamcorper nibh. Nulla at nibh facilisis, venenatis tellus et, cursus massa. Nam a scelerisque tortor, et porttitor risus. Nunc purus lacus, vestibulum in nulla eu, dapibus hendrerit nunc. Quisque consectetur orci enim, eu gravida arcu accumsan ac. Vestibulum mollis velit ac vulputate hendrerit. Curabitur in magna orci.

Records

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed maximus lectus. In at ligula aliquet, venenatis urna quis, pulvinar orci. Etiam elit nibh, cursus ac tempus vel, cursus quis magna. Nulla suscipit ac metus eget consectetur. Vestibulum accumsan nunc eros, id tristique metus gravida eget. Etiam dictum imperdiet sem at porttitor. Nullam consequat odio vel ultrices tincidunt. Nunc vestibulum turpis eu vestibulum sodales.

Duis quis venenatis magna. Sed fringilla, mi eu iaculis laoreet, nisi nunc rhoncus augue, vel cursus purus est ut neque. Pellentesque eget facilisis nisi, at hendrerit tortor. Aenean vehicula pretium sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean leo urna, scelerisque sodales vestibulum vel, porttitor id dui. Vivamus sed ullamcorper nibh. Nulla at nibh facilisis, venenatis tellus et, cursus massa. Nam a scelerisque tortor, et porttitor risus. Nunc purus lacus, vestibulum in nulla eu, dapibus hendrerit nunc. Quisque consectetur orci enim, eu gravida arcu accumsan ac. Vestibulum mollis velit ac vulputate hendrerit. Curabitur in magna orci.

Explain with Coding said:

Code:

[sheet][sheetfirstcolumn][sheetportrait][img]image url goes here[/img][/sheetportrait][sheetstats]
[sheetstatblock=Nin]600[/sheetstatblock]
[sheetstatblock=Tai]600[/sheetstatblock]
[sheetstatblock=Gen]600[/sheetstatblock]
[sheetstatblock=Stam]600[/sheetstatblock]
[sheetstatblock=Agi]600[/sheetstatblock]
[sheetstatblock=CC]600[/sheetstatblock]
[sheetstatblock=PL]3600[/sheetstatblock]
[sheetstatblock=Level]15[/sheetstatblock][/sheetstats][/sheetfirstcolumn][sheetsecondcolumn=Name Goes Here][sheethistorybox]
History goes here
[/sheethistorybox][sheetpersonalitybox]
Personality goes here
[/sheetpersonalitybox][sheetdescriptionbox]
Character Description goes here
[/sheetdescriptionbox][/sheetsecondcolumn]
[sheetthirdcolumn=Bloodline][sheetblca]
Content goes here
[/sheetblca][sheetkin]
Content goes here
[/sheetkin][/sheetthirdcolumn][/sheet]

Note: The bbcode "sheetthirdcolumn" has an option. This can be either "Bloodline" or "Core Ability". It's what comes after the = inside the bbcode.
Do NOT change how the bbcodes are connected, or unintended line skips will appear.

Image:
» Make sure you have it cropped in between the maximum dimensions that are shown above.
» Please make sure the URL ends in .PNG .JPG or .GIF* otherwise they won't be functioning. Pictures from Discord are us-able. as long as you have the Image link.
(sheetportrait)(img) image url goes here (/img)(/sheetportrait)

*Please make sure you are a donator when using GIF's

Edit stats;
(sheetstatblock=Nin)600(/sheetstatblock)
(sheetstatblock=Tai)600(/sheetstatblock)
(sheetstatblock=Gen)600(/sheetstatblock)
(sheetstatblock=Stam)600(/sheetstatblock)
(sheetstatblock=Agi)600(/sheetstatblock)
(sheetstatblock=CC)600(/sheetstatblock)
(sheetstatblock=PL)3600(/sheetstatblock)
(sheetstatblock=Level)15(/sheetstatblock)

Just alter that blue-colored number. It's easy as that!

BL/CA table;
(sheetthirdcolumn=Bloodline/Core Ability/BLCA)
You have to choose if you own only one Bloodline or Core ability. For those with Chimera, you can opt to do both. But then write; BLCA, please.
DO NOT USE SYMBOLS THIS WILL BREAK THE CODING.

PLEASE KEEP IN MIND, THIS IS NOT TO COPY, THIS IS SOLE TO SHOW YOU WHERE YOU CAN FILL IN PIECES IN COLOR.

(sheet)(sheetfirstcolumn)(sheetportrait)(IMG)URL goes here(/IMG)(/sheetportrait)(sheetstats)
(sheetstatblock=Nin)600(/sheetstatblock)
(sheetstatblock=Tai)600(/sheetstatblock)
(sheetstatblock=Gen)600(/sheetstatblock)
(sheetstatblock=Stam)600(/sheetstatblock)
(sheetstatblock=Agi)600(/sheetstatblock)
(sheetstatblock=CC)600(/sheetstatblock)
(sheetstatblock=PL)3600(/sheetstatblock)
(sheetstatblock=Level)15(/sheetstatblock)(/sheetstats)(/sheetfirstcolumn)(sheetsecondcolumn=Name Goes Here)(sheethistorybox)
History goes here
(/sheethistorybox)(sheetpersonalitybox)
Personality goes here
(/sheetpersonalitybox)(sheetdescriptionbox)
Character Description goes here
(/sheetdescriptionbox)(/sheetsecondcolumn)
(sheetthirdcolumn=Bloodline/Core Ability/BLCA)(sheetblca)
BL/CA Content goes here
(/sheetblca)(sheetkin)
Kin Content goes here
(/sheetkin)(/sheetthirdcolumn)(/sheet)

General Information

First name:
Middle name(s):
Surname:
Age:
Date of birth:
Race:
Gender:
Sexuality:
Current residence:
Relationship status:
Social status:

Traits of Voice

Accent (if any):
Language spoken:
Other languages known:
Style of speaking:
Volume of voice:

Physical Appearence

Height:
Weight:
Eye colour:
Skin colour:
Shape of face:
Distinguishing features:
Build of body:
Hair colour:
Hair style:
Complexion:
Posture:
Tattoos:
Piercings:
Typical clothing:
Is seen by others as:

Personality

Likes:
Dislikes:
Education:
Fears:
Personal goals:
General attitude:
Religious values:
General intelligence:
General sociability:

Health

Illnesses (if any):
Allergies (if any):
Sleeping habits:
Energy level:
Eating habits:
Memory:
Any unhealthy habits:

History

Birth country:
Hometown:
Childhood:
Teen years:
Adult years:
Past places of residence:
History of family:
Briefly explain life story:

Relationships

Parents:
Siblings:
Any enemies (and why):
Children:
Friends:
Best friend(s):
Important friends/relatives (explain):
Love interest (if there is one):

Combat

Peaceful or violent:
Weapon (if applicable):
Style of fighting:

Others

Occupation:
Current home:
Favourite types of food:
Favourite types of drink:
Hobbies/past times:
Guilty pleasures:
Pet peeves:
Pets:
Talents:
Favourite colours:
Favourite type of music:

Q&A;
Q: Can you change box names?
A: Afraid this is not possible, as they have very unique Coding behind the scenes.

Q: Is it possible to change the background?
A: This is not possible I am afraid.

Q: Can I remove the stats of the main one?
A: That is possible, however it won't be as clean looking as the other boxes then. As it wasn't intended to be used like that.

Owly's coding 404.

Ninpocho Admin

Administrator

Ninpocho Admin

Administrator

Ninpocho Admin

Administrator

Ninpocho Admin

Administrator

Ninpocho Admin

Administrator

Ninpocho Admin

Administrator

Ninpocho Admin

Administrator

Ninpocho Admin

Administrator

Name Goes Here

Records