20 May 2025, 02:33
Coding BBCODE made easy!  Tutorial 
Last edited by Cirrus Nam on 1 Jun 2025, 19:26, edited 2 times in total.

—cirrus nam
—Watermelon sugar high—
melor baskakova—

1 Jun 2025, 18:46
Coding BBCODE made easy!  Tutorial 
IMAGE TUTORIAL


part 1
Image
[Ignore the subscription things, it is not required to use the site]
After uploading the image of your choice, go to the drop down 'Embed Codes' and pick BBCode full Linked. (^v^)
Image
Img.bb is good because you can create an account and keep track of all your uploaded images if you'd like and it is usually pretty high quality! But sometimes the links, depending on the image file size, can cause it to make the website loading slow.

part 2
Image
After uploading the image of your choice, right click the image and click copy image address.
Image
then place the link inbetween

Code: Select all

[img]image address[/img]
You can use any image from Pinterest this way, with just using right-clicking it's image address! I only use image to link if it's a custom photo I have created, like a banner or a graphic!

part 3 - bonus
This part is just a small bonus, that I wish I had known before, you can actually change the sizes of the images ON-SITE. And here is the code.

Code: Select all

[img=200x200][/img]
You can also play with the dimensions a bit until you find the right look for you! (^v^)

If you have any other questions concerning code, site navigation, or anything else feel free to owl me! again feel free to say any inquiries or even if you can't figure out a code that may be 'broken' I can help fix it! I hope this has been helpful, and have a great day, and I can't wait to see what you create!

—cirrus nam
—Watermelon sugar high—
melor baskakova—

1 Jun 2025, 19:25
Coding BBCODE made easy!  Tutorial 
TABLES TUTORIAL


So when it comes to coding one the biggest skills needed is understanding tables! Which help receive results like shown below, and help just give the coder were freedom for creativity for layouts!

Image Image


So first we have to break up the basics of a table and its coding elements. So the code for a table is:

Code: Select all

[table][/table]
And its icon for the table on the panel looks like this: Image
When you click on the icon, a pop-up will appear and it'll ask you how many lines and how many columns you would like to utilize in your table.

Code: Select all

[table]
[tr]
[td][/td]
[/tr]
[/table]
So for this example I put one for both column and line. So to make a breakdown on what it translates into is,
tr = line [y axis, vertical]
td = columns [x axis, horizontal]
Image

Also it should be noted when coding that the columns are coding within each line, for example columns and lines cannot exist without one or the other, as this'll cause a "code break".

Code: Select all

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

[tr]
[td][/td]
[td][/td]
[/tr]
[/table]
In the example code above I have made two lines each with one column or when filled out creates four squares, as seem in my example below where I used the same image in each column and added the code so you can see where you should write what you would like to fill each square with.

Image
Column 1
Image
Column 2
Image
Column 3
Image
Column 4

Code: Select all

[table]
[tr]
[td][img]/images/upload/jkkzl7jirbn4.webp[/img]
Column 1[/td]
[td][img]/images/upload/jkkzl7jirbn4.webp[/img]
Column 2[/td]
[/tr]
[tr]
[td][img]/images/upload/jkkzl7jirbn4.webp[/img]
Column 3[/td]
[td][img]/images/upload/jkkzl7jirbn4.webp[/img]
Column 4[/td]
[/tr]
[/table]
If you practice playing with the different columns and lines you can try and find what works and doesn't! Again practice makes perfect, and if you are still struggling don't be afraid to reach out! (^^) and I hope this helped clear up any confusion!

—cirrus nam
—Watermelon sugar high—
melor baskakova—