Creating a post & using BBcode

Information on how to create posts or set up your profile
Locked
User avatar
seppdroid
CEO DiodeMatrix
Posts: 34
Joined: 1 year ago
Location: The Netherlands
Favorite Game: Halo
Currently working on: RUK
Has thanked: 5 times
Been thanked: 4 times
Age: 17
Contact:

8 months ago

Creating a post and using (custom) BBcode

  • Creating posts on the DiodeMatrix community is pretty easy. But making them look good is the trick :). This post will take you through the basics of creating a post.
  • NOTE: Link to the custom BBcode page here

Creating a post
  • Creating a new topic is simple. just click the "New Topic" button to create one.
    like shown below:
Create_topic.JPG
create topic
Create_topic.JPG (13.3 KiB) Viewed 72 times
Create_topic.JPG
create topic
Create_topic.JPG (13.3 KiB) Viewed 72 times
  • After clicking on the "new topic" button you will be greeted with this screen:
post_topic.JPG
post_topic.JPG (41.22 KiB) Viewed 72 times
post_topic.JPG
post_topic.JPG (41.22 KiB) Viewed 72 times
  • First of all let's add a subject to the post so people know what your post is about.
post_subject.JPG
post_subject.JPG (15.03 KiB) Viewed 72 times
post_subject.JPG
post_subject.JPG (15.03 KiB) Viewed 72 times
Topic
  • We will show you what everything means. Creating a simple post is really easy. The rest of this post will contain small "tutorials" on how to use the UI.

Working with text
  • As you can see you have some options for changing text format/styles. A lot of these options are located in the UI bar as shown below.
UI_topic2.JPG
UI_topic2.JPG (12.24 KiB) Viewed 72 times
UI_topic2.JPG
UI_topic2.JPG (12.24 KiB) Viewed 72 times
  • They may seem familiar but they are really shortcuts for BBcode. I will show you a simple example of using BBcode in a post to bold a text.
  • First of all highlight the text you want to make bold. Then click the "B" button as shown below:
Bold_text.JPG
Bold_text.JPG (11.73 KiB) Viewed 72 times
Bold_text.JPG
Bold_text.JPG (11.73 KiB) Viewed 72 times
Bold_text2.JPG
Bold_text2.JPG (8.58 KiB) Viewed 72 times
Bold_text2.JPG
Bold_text2.JPG (8.58 KiB) Viewed 72 times
  • As you can see the TEXT has B and /b before and after it. This means it will render as Bold text.
  • NOTE: Before publishing a page it might be smart to preview it first. to preview your post just click the "Preview" button between "Save draft" and "Submit".
preview_topic.JPG
preview_topic.JPG (13.12 KiB) Viewed 72 times
preview_topic.JPG
preview_topic.JPG (13.12 KiB) Viewed 72 times

Working with BBcode
  • Mixing with BBCode is always fun, as far as I know, you can use unlimited BBcode in a sentence. So, for example, you can "Quote a bolded text with the size of 150 underlined". Is that a correct sentence? I don't know but it works! It's always easy to highlight your text and click the BBcode shortcut you want to use. Always make sure the code has a start tag and an ending tag.
crazy_bbcode_example.JPG
crazy_bbcode_example.JPG (14.23 KiB) Viewed 72 times
crazy_bbcode_example.JPG
crazy_bbcode_example.JPG (14.23 KiB) Viewed 72 times
  • Let's check if the code has the correct syntax. You can do this by clicking on the "preview" button between "Save draft" and "Submit".
preview_topic.JPG
preview_topic.JPG (13.12 KiB) Viewed 72 times
preview_topic.JPG
preview_topic.JPG (13.12 KiB) Viewed 72 times
  • As you can see it worked and the syntax is correct!
preview_topic.JPG
preview_topic.JPG (19.34 KiB) Viewed 72 times
preview_topic.JPG
preview_topic.JPG (19.34 KiB) Viewed 72 times
  • Always follow the start tag to the ending tag for troubleshooting. Everything that starts also ends :).
UI BBcode shortcuts
  • List of the standard BBcode:
b.JPG
b.JPG (7.95 KiB) Viewed 72 times
b.JPG
b.JPG (7.95 KiB) Viewed 72 times
Simple bold text
i.JPG
i.JPG (7.88 KiB) Viewed 72 times
i.JPG
i.JPG (7.88 KiB) Viewed 72 times
Simple italic text
u.JPG
u.JPG (7.87 KiB) Viewed 72 times
u.JPG
u.JPG (7.87 KiB) Viewed 72 times
Simple underlined text
quote.JPG
quote.JPG (7.97 KiB) Viewed 72 times
quote.JPG
quote.JPG (7.97 KiB) Viewed 72 times
Simple quote tags
code.JPG
code.JPG (7.95 KiB) Viewed 72 times
code.JPG
code.JPG (7.95 KiB) Viewed 72 times
Marking code (bbcode wont be rendered inside a code tag)
list.JPG
list.JPG (7.92 KiB) Viewed 72 times
list.JPG
list.JPG (7.92 KiB) Viewed 72 times
Making a list (more of lists in the guides forum)
orlist.JPG
orlist.JPG (7.93 KiB) Viewed 72 times
orlist.JPG
orlist.JPG (7.93 KiB) Viewed 72 times
(more of lists in the guides forum)
listno.JPG
listno.JPG (7.93 KiB) Viewed 72 times
listno.JPG
listno.JPG (7.93 KiB) Viewed 72 times
(more of lists in the guides forum)
image.JPG
image.JPG (7.96 KiB) Viewed 72 times
image.JPG
image.JPG (7.96 KiB) Viewed 72 times
Inserting a image (more of images down below)
link.JPG
link.JPG (7.92 KiB) Viewed 72 times
link.JPG
link.JPG (7.92 KiB) Viewed 72 times
Using a clickable link (more of extended BBcode below)
size.JPG
size.JPG (8.4 KiB) Viewed 72 times
size.JPG
size.JPG (8.4 KiB) Viewed 72 times
Change size of the text (can be manually changed with size=XXX = max 200)

Using attachments
  • you can also add attachments like pictures, MODfiles,zippies. etc etc. this can simply be done by clicking on the attachment tab and browse for a file. At last, add the file and it will upload to the attachment tab Like shown below.
atachment.JPG
atachment.JPG (44.6 KiB) Viewed 72 times
atachment.JPG
atachment.JPG (44.6 KiB) Viewed 72 times
  • The attachment is now added to the post. If its a picture you can also choose to add it inline. This is simply done by scrolling down to the attachments and click on "Place inline". Here you can also delete attachments. Wherever the type cursor is will be the location where the attachment lands.
pinline_topic.JPG
pinline_topic.JPG (60.51 KiB) Viewed 72 times
pinline_topic.JPG
pinline_topic.JPG (60.51 KiB) Viewed 72 times
  • We recommend uploading pictures from other BB-picture hosts like the one available on the post page. Using other hosts speeds up loading posts quite a bit
pimage.JPG
pimage.JPG (10.43 KiB) Viewed 72 times
pimage.JPG
pimage.JPG (10.43 KiB) Viewed 72 times
  • This works really simple. Maybe even simpler! First, click the blue link then upload the picture and there you have it!
imageCapture.JPG
imageCapture.JPG (112.3 KiB) Viewed 72 times
imageCapture.JPG
imageCapture.JPG (112.3 KiB) Viewed 72 times
Advanced BBcode
  • Some BBcode-tags have more than one option. Let's take the Link tag as an example. If you want to make a simple link clickable then you just highlight the text and click "Link" icon. This will look like so:

Code: Select all

[url]https://www.google.com[/url]
Output =
https://www.google.com
  • but this is pretty useless right? it's more appealing to create a text-link like doing so:

Code: Select all

[url=Https://www.google.com]TEXT[/url]
Output =
TEXT
  • More detailed information about our custom BB-code here
Finishing up
  • If you are satisfied with the preview then you can publish your post! This is simple just click the "Submit" button as shown below
submit_topic.JPG
submit_topic.JPG (18.72 KiB) Viewed 72 times
submit_topic.JPG
submit_topic.JPG (18.72 KiB) Viewed 72 times
  • Congrats you just made a cool post! well..., Nah I won't ruin the fun!
  • in sometimes your post needs to be approved first. then you will get the message as shown below:
aprove_post.JPG
aprove_post.JPG (32.37 KiB) Viewed 72 times
aprove_post.JPG
aprove_post.JPG (32.37 KiB) Viewed 72 times
  • The post we just created is available here. There is a simple trick for displaying BBcode someone is using. Do this by clicking on the "Reply with quote" button. Shown as below
post.JPG
post.JPG (71.76 KiB) Viewed 72 times
post.JPG
post.JPG (71.76 KiB) Viewed 72 times


SEPPDROID C.E.O DIODEMATRIX contact@diodematrix.com :roll:
Locked