on Jun 16, 2015 18:40:58 GMT
Last Edit: Jun 18, 2015 14:56:37 GMT by Hrishikesh
MyBB Coding And Tutorial Explained
Hello to everyone, this is your instructor Hrishikesh here. Today i will be teaching you how to code in MyBB and teaching thread design too. To begin with let me tell you what is MyBB and how it can be used.
What is MyBB : MyBB is a forum coding language and it is very essential for MyBB forums, MyBB resembles Hyper text markup language a lot, some examples are. Html has "</>" and MyBB has "[/]" but there is a little difference. MyBB is much more easier to learn and anyone can learn it. Most forums these days support MyBB codes which includes this forum you are on.
What is the use of MyBB: You can use MyBB for forum thread designs and much more.
To begin with let me teach you some basics. This tutorial will consist basic things you will need to manage yourself on a MyBB forum. Below i will post diagrams and results of every single code.
Hello to everyone, this is your instructor Hrishikesh here. Today i will be teaching you how to code in MyBB and teaching thread design too. To begin with let me tell you what is MyBB and how it can be used.
What is MyBB : MyBB is a forum coding language and it is very essential for MyBB forums, MyBB resembles Hyper text markup language a lot, some examples are. Html has "</>" and MyBB has "[/]" but there is a little difference. MyBB is much more easier to learn and anyone can learn it. Most forums these days support MyBB codes which includes this forum you are on.
What is the use of MyBB: You can use MyBB for forum thread designs and much more.
To begin with let me teach you some basics. This tutorial will consist basic things you will need to manage yourself on a MyBB forum. Below i will post diagrams and results of every single code.
Diagram 1
So as we are starting, let us begin with how to change the font size in your thread/post.
As you can see HERE i have changed my font size. And below is the code how to do it,
If you replace "TEST" with your text the text will change it's size.
"" is the tag for all text statements like for editing color and etc, Basically a tag just like in HTML.
And if you want to bolden your text just use the code below.
Just replace the "Texthere" with your text.|
If you want tostrike your text use the code below.
As you can see HERE i have changed my font size. And below is the code how to do it,
[font size="6"]TEST[/font]
If you replace " size="6" " with any other number, you will be able to change your text size,If you replace "TEST" with your text the text will change it's size.
"" is the tag for all text statements like for editing color and etc, Basically a tag just like in HTML.
And if you want to bolden your text just use the code below.
[b]texthere[/b]
Just replace the "Texthere" with your text.|
If you want to
[strike]Striked Text[/strike]
Replace "Striked Text" with your own text.Diagram 2
As you have learnt above how to change your font size, i will teach you how to change your font color.
As you can see HERE i have changed the font color. Below is the code how to do it.
If you replace "#00FFFF" with any other color hex code, you can change the font color. A list of hex codes can be found (HERE)
if you replace " size="4" " with any other number you can change your font size including the color.
Now i have replaced "#00FFFF" with "#CC00CC" . See the result below.
As you can see HERE i have changed the font color. Below is the code how to do it.
[font color="#00ffff" size="4"]TEST[/font]
If you replace "#00FFFF" with any other color hex code, you can change the font color. A list of hex codes can be found (HERE)
if you replace " size="4" " with any other number you can change your font size including the color.
Now i have replaced "#00FFFF" with "#CC00CC" . See the result below.
THIS text is #CC00CC
Diagram 3
Diagram 3
As you have learn how to change font color, Let me teach you how to change the font align side.
As you can see this is in the middle.
As you can see this is in the left.
As you can see this is in the right.
If you want to align the image towards the right use the code below.
If you want to align the image towards the center use the code below.
As you have learnt how to add image lets learn how to make an image redirect to a url. Just use the code below.
Once you use this code and someone clicks the image, he/she will be redirected to the website.
Below is the code how to do it.
This is the code for align right.
This is the code for align left.
This code is for align center.
Replace "Test" with your text.
And after style="text-align:center;" replace the "center" with either "Left" for left align. "Right" for right align. and "Center" for center align.
If you want to change font size and color with text align use the code below.
Remember to replace the "text-align:left;" the "Left" with your align choice. The "#00FFFF" with color hex code. and "4" with the font size.
Replace "yourimageurlhere.jpg" with the image url.
If you want to align the image towards the left use the code below.
[div style="text-align:right;"]TEST[/div]
This is the code for align right.
[div style="text-align:left;"]TEST[/div]
This is the code for align left.
[div style="text-align:center;"]TEST[/div]
This code is for align center.
Replace "Test" with your text.
And after style="text-align:center;" replace the "center" with either "Left" for left align. "Right" for right align. and "Center" for center align.
If you want to change font size and color with text align use the code below.
[div style="text-align:left;"][font color="#00ffff" size="4"]TEST[/font][/div]
Remember to replace the "text-align:left;" the "Left" with your align choice. The "#00FFFF" with color hex code. and "4" with the font size.
Diagram 4
As you have learnt the text align above now let's learn how to add images + link the image to a certain url.
As you can see , i have linked this image below is the code how to do it.
As you can see , i have linked this image below is the code how to do it.
[img]yourimageurlhere.jpg[/img]
Replace "yourimageurlhere.jpg" with the image url.
If you want to align the image towards the left use the code below.
[div style="text-align:left;"][img src="yourimageurlhere.jpg" style="max-width:100%;"][/div]
If you want to align the image towards the right use the code below.
[div style="text-align:right;"][img src="yourimageurlhere.jpg" style="max-width:100%;"][/div]
If you want to align the image towards the center use the code below.
[div style="text-align:center;"][img src="yourimageurlhere.jpg" style="max-width:100%;"][/div]
As you have learnt how to add image lets learn how to make an image redirect to a url. Just use the code below.
[a href="www.yoursite.com"][img style="max-width:100%;" src="yourimageurlhere.jpg"][/a]
Once you use this code and someone clicks the image, he/she will be redirected to the website.
Diagram 5
As you have learnt how to add images and more, let us learn how to add hyperlinks. Below is an example.
Click Me (Link goes to Google).
Below is the code.
If you replace www.google.com with your website, he/she will be redirected there.
As you know how to add links let me teach you how to add YouTube videos. Below is an example.
If you replace the YouTube link with any other video link, it will be displayed on the page.
Click Me (Link goes to Google).
Below is the code.
[a href="http://google.com"]Click Me[/a]
If you replace www.google.com with your website, he/she will be redirected there.
As you know how to add links let me teach you how to add YouTube videos. Below is an example.
[video src="https://www.youtube.com/watch?v=o2TO5atI4rU"][/video]
If you replace the YouTube link with any other video link, it will be displayed on the page.