Tips for fancy bbcode toolbar - a reference and some examples

This forum is a collection of helpful tips about features on the board. If you want to learn about board features, this is the place to go. If you are curious about something then post a question
Post Reply
User avatar
OU_Tom
Posts: 1176
Joined: Sun Sep 26, 2021 12:36 pm
1
Has thanked: 147 times
Been thanked: 198 times

Tips for fancy bbcode toolbar - a reference and some examples

Post by OU_Tom »

Another extension that the board supports is a fancy toolbar that looks like this

Image

I never understood what bbcodes are besides the one for embebbing a url or img in a post. The toolbar is so you don't have to remember that actual bbcode. If you click on the images in the toolbar then it will generate the correct bbcode.

It is probably helpful to know a bit about them. I found this page explains what some of the bbcodes do.

If you don't understand what they are then read the above link and you should be able to make fancy posts. If you make it to the end of the bbcode page it even includes an entertaining embedded video of woman singing and crying about cats :lol:

Here are some examples of bbcodes on the toolbar.

Image In the first row the B turns the text bold.

Code: Select all

[b]In the first row the B turns the text bold. [/b]
Image The I italicizes the text

Code: Select all

[i]The I italicizes the text[/i]
Image The U underlines the text

Code: Select all

[u]The U underlines the text[/u]
Image
The double quote creates a quote box

Code: Select all

[quote]The double quote creates a quote box[/quote]
Image the next symbol is used for code so it does not indent or format the code within the code tags

Code: Select all

.e9EfHf {
    font-family: Roboto,arial,sans-serif;
    clear: both;
    min-width: 833px;
    margin-left: 0;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
}


The next 3 symbols are used to create bulleted lists

Image
Image
Image
  • bullet 1
  • bullet 2

Code: Select all

[list]
[*]bullet 1
[*]bullet 2
[/list]
I am going to add more example of lists soon


Image
img is used to embed an image
Image

Code: Select all

[img]https://www.phpbb.com/customise/db/download/188361?mode=view&thumb=1[/img]
Image The next one is the classic one for a link - url
Link to orca

Code: Select all

[url=https://orcaforum.kofo.mpg.de/app.php/help/bbcode]Link to orca[/url]
I am skipping the flash that is for a flash video. That is the lightning bolt.

Image. the next one is to embed a video. when you first click on it, a popup appears .


Screen Shot 2022-01-02 at 6.35.49 PM.png
Screen Shot 2022-01-02 at 6.35.49 PM.png (39.62 KiB) Viewed 229 times


If you click on the dropdown where the 'Youtube' is then it gives you a list of sites that support video.

Screen Shot 2022-01-02 at 6.55.03 PM.png
Screen Shot 2022-01-02 at 6.55.03 PM.png (1.34 MiB) Viewed 229 times


BTW - if you copy a video link directly into a post then it will do that same thing as this bbcode so you don't need to use this one

Image Copy text

Image Paste text

the last one on that line removes bbcodes

If you move across the lower row on the toolbar from left to right here is what clicking on the fancy images will do

Image
Highlight the text. By default, highlights are yellow; you can change the color.

highlight this sentence.

Code: Select all

[highlight=yellow]highlight this sentence.[/highlight]
Image
preformatted does this 

Code: Select all

[pre]preformatted does this [/pre]
Image
strikethrough does this

Code: Select all

[s]strikethrough does this[/s]


Image

NormalTextthis text is inside superscript tag

Code: Select all

NormalText[sup]this text is inside superscript tag[/sup]

Image

NormalTextThis text is inside the subscript tag

Code: Select all

NormalText[sub]This text is inside the subscript tag[/sub
Image

glow does this

Code: Select all

[glow=red]glow does this[/glow] 
Image blur blue does this

Code: Select all

[blur=blue]blur blue does this[/blur]

Image fade does this

Code: Select all

[fade]fade does this[/fade]
Image shadow blue does this

Code: Select all

[shadow=blue]shadow blue does this[/shadow]
Image dropshadow does this - turns the text blue

Code: Select all

[dropshadow=blue]dropshadow does this - turns the text blue[/dropshadow]
Image
align center does this
align left does this
align right does this

Code: Select all

[align=center]align center does this[/align]
[align=left]align left does this[/align]
[align=right]align right does this[/align]

Image dir - reverses all the characters in between the tags
text direction does this - reverses all the characters in between the tags

Image marquee left will cause the text to move across the page :lol:

:lol: marquee right will cause the text to move across the page towards the right :lol:

Code: Select all

[marq=left]marquee left will cause the text to move across the page :lol:[/marq]

[marq=right]:lol: marquee right will cause the text to move across the page towards the right :lol:[/marq]
Image The spoil tag hides the 'spoil - eye with the slash does this' text. If you click on 'Show Spoiler' then you can see the spoiler

► Show Spoiler

Code: Select all

[spoil]spoil - the eye with the slash does this[/spoil]
Image The hidden tag only allows board members to see the text.

Hidden Content
This board requires you to be registered and logged-in to view hidden content.

Code: Select all

[hidden]hidden - the lock - hides the text from guests[/hidden]

Guests will see a message will the following message. If the login then they can see the 'hidden' text


Screen Shot 2022-01-02 at 9.18.27 PM.png
Screen Shot 2022-01-02 at 9.18.27 PM.png (50.9 KiB) Viewed 198 times


Image
Off Topic
offtopic does this

Code: Select all

[offtopic]offtopic does this[/offtopic]

Image
 ! Message from: OU_Tom
the red triangle with the exclamation mark does this
.



I guess that one is intended for moderators who edit/censure posts :lol:

Image
nfo art does this
Imageif the page is making a noise and it sounds like a tiger that is coming from the red cloud aka soundcloud. it is used for playing soundcloud audio url. The soonerscoop and some other Oklahoma football sites use soundcloud . If you find good podcasts on soundcloud then you can use the 'red cloud'.




Code: Select all

[soundcloud]https://soundcloud.com/soonerscoop/u40-alamo-bowl-preview-bob-stoops-was-the-hero-we-needed]
Image the embedded video can be used to embedded video. it pops up something like below that you can use to embed a youtube video

Screen Shot 2022-01-02 at 6.35.49 PM.png
Screen Shot 2022-01-02 at 6.35.49 PM.png (39.62 KiB) Viewed 230 times

Image the last item documents how you can create fancy tables . here is example that is provided if you click on chart of the far right

Screen Shot 2022-01-02 at 6.35.34 PM.png
Screen Shot 2022-01-02 at 6.35.34 PM.png (89.32 KiB) Viewed 230 times

here is an example of a table that I created . You use pipes (vertical bar) to seperate the columns

SeasonAVGGPGSABRH2B3BHRRBISLGBBHBPSOOBPSBSBAFLD%
2019.2636363137353681827.511171023.38068.953
2020.370242473222770523.671936.44845.950
2021.392606016662651201452.71727914.49588.963
TOTAL.34014714737611912827127102.633532243.4441821.956

Code: Select all

Season |AVG |GP |GS |AB |R |H |2B |3B |HR |RBI |SLG |BB |HBP |SO |OBP |SB |SBA |FLD%
----- |--- |-- |-- |-- |--|--|-- |-- |-- |----|----|-- |----|-- |----|-- |----|----
2019 |.263 |63 |63 |137 |35 |36 |8 |1 |8 |27 |.511 |17 |10 |23 |.380 |6 |8 |.953
2020 |.370 |24 |24 |73 |22 |27 |7 |0 |5 |23 |.671 |9 |3 |6 |.448 |4 |5 |.950    
2021 |.392 |60 |60 |166 |62 |65 |12 |0 |14 |52 |.717 |27 |9 |14 |.495 |8 |8 |.963
TOTAL |.340 |147 |147 |376 |119 |128 |27 |1 |27 |102 |.633 |53 |22 |43 |.444 |18 |21 |.956
::rice2:: :dude:
Post Reply

Create an account or sign in to join the discussion

You need to be a member in order to post a reply

Create an account

Not a member? register to join our community
Members can start their own topics & subscribe to topics
It’s free and only takes a minute

Register

Sign in