Owly's coding 404.

Noba

Well-Known Member
Oct 5, 2017
2,577
Yen
262,750
ASP
791
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-codeBar 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:
  1. This
  2. is
  3. one

  • This
  • is
  • another

BB-codesBar-use
Code:
[LIST=1]
[*]This
[*]is
[*]one
[/LIST]

[LIST]
[*]This
[*]is
[*]another
[/LIST]

[INDENT]Then we have this[/INDENT]


 
Last edited:

Noba

Well-Known Member
Oct 5, 2017
2,577
Yen
262,750
ASP
791
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-1Bar-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:
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!

 
Last edited:

Noba

Well-Known Member
Oct 5, 2017
2,577
Yen
262,750
ASP
791
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-codeBar-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.

 
Last edited:

Noba

Well-Known Member
Oct 5, 2017
2,577
Yen
262,750
ASP
791
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.
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!

ToggledBB-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!)

 
Last edited:

Noba

Well-Known Member
Oct 5, 2017
2,577
Yen
262,750
ASP
791
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]
 
Last edited:

Noba

Well-Known Member
Oct 5, 2017
2,577
Yen
262,750
ASP
791
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

Stats

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