Tips for fancy bbcode toolbar - a reference and some examples

[OU_Tom]

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



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

Here are some examples of bbcodes on the toolbar.

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]

The I italicizes the text

Code: Select all

[i]The I italicizes the text[/i]

The U underlines the text

Code: Select all

[u]The U underlines the text[/u]

The double quote creates a quote box

Code: Select all

[quote]The double quote creates a quote box[/quote]

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

• bullet 1
• bullet 2

Code: Select all

[list]
[*]bullet 1
[*]bullet 2
[/list]

I am going to add more example of lists soon



img is used to embed an image

Code: Select all

[img]https://www.phpbb.com/customise/db/download/188361?mode=view&thumb=1[/img]

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.

. 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 (39.62 KiB) Viewed 663 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 (1.34 MiB) Viewed 663 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

Copy text

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


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]

preformatted does this 

Code: Select all

[pre]preformatted does this [/pre]

strikethrough does this

Code: Select all

[s]strikethrough does this[/s]

NormalText^{this text is inside superscript tag}

Code: Select all

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

NormalText_{This text is inside the subscript tag}

Code: Select all

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

glow does this

Code: Select all

[glow=red]glow does this[/glow] 

blur blue does this

Code: Select all

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

fade does this

Code: Select all

[fade]fade does this[/fade]

shadow blue does this

Code: Select all

[shadow=blue]shadow blue does this[/shadow]

dropshadow does this - turns the text blue

Code: Select all

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

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]

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

marquee left will cause the text to move across the page

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

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]

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

spoil - the eye with the slash does this

Code: Select all

[spoil]spoil - the eye with the slash does this[/spoil]

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 (50.9 KiB) Viewed 632 times

Off Topic

offtopic does this

Code: Select all

[offtopic]offtopic does this[/offtopic]

!	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

nfo art does this

if 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]

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 (39.62 KiB) Viewed 664 times

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 (89.32 KiB) Viewed 664 times

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

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

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