Back Reply

Coding BBCODE made easy! Tutorial

Last edited by Cirrus Nam on 1 Jun 2025, 19:26, edited 2 times in total.
i am slowly forgetting your face

Coding BBCODE made easy! Tutorial
IMAGE TUTORIAL


part 1
Image posted by the member
[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 posted by the member
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 posted by the member
After uploading the image of your choice, right click the image and click copy image address.
Image posted by the member
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!
i am slowly forgetting your face

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 posted by the member Image posted by the member


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 posted by the member
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 posted by the member

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 posted by the member
Column 1		 Image posted by the member
Column 2
Image posted by the member
Column 3		 Image posted by the member
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!
i am slowly forgetting your face
Back Reply