BBCode with style

[davidhs]

Link to Mod

BBCode with style

ABOUT...

BBCode with style, 1.5.2
© 2010-2020 by davidhs
© Italian language 2011 by Sages
© Portuguese for Brazil and Portugal language 2012 by Joomlamz
© Russian language 2010-2011 by Bugo


This work is licensed under a Creative Commons Attribution 3.0 Unported License.

DESCRIPTION

Adds the possibility to use CSS styles, CSS classes and attributes like HTML in BBC tags.

New optional attributes of style:

• style, whose value, quoted, are style rules inline.
• class, whose value, quoted, are class names of style.

These attributes are added to the following BBC tags:

• Horizontal rule (hr).
• Image (img).
• List (li, list).
• Table (table, td, tr).

Code Select Expand

[tag class="class_of_style" style="rules"]text[/tag]

New optional attributes in BBC tags:

• img:
  
  
  
  • rotateangle, rotatebgcolor. Rotate an image with a given angle in degree and using a background color for the uncovered zone after the rotation. The background color is an hexadecimal with 3 or 6 digits (#rgb or #rrggbb), a RGB color (r,g,b) or a color name of these:
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    aqua	=	#00ffff	=	#0ff	=	0,255,255
    black	=	#000000	=	#000	=	0,0,0
    blue	=	#0000ff	=	#00f	=	0,0,255
    fuchsia	=	#ff00ff	=	#f0f	=	255,0,255
    gray	=	#808080			=	128,128,128
    green	=	#008000			=	0,128,0
    lime	=	#00ff00	=	#0f0	=	0,255,0
    maroon	=	#800000			=	128,0,0
    navy	=	#000080			=	0,0,128
    olive	=	#808000			=	128,128,0
    orange	=	#ffa500			=	255,165,0
    purple	=	#800080			=	128,0,128
    red	=	#ff0000	=	#f00	=	255,0,0
    silver	=	#c0c0c0			=	192,192,192
    teal	=	#008080			=	0,128,128
    white	=	#ffffff	=	#fff	=	255,255,255
    yellow	=	#ffff00	=	#ff0	=	255,255,0

    If the color does not exist in the image and can not be added, is used the closest color. Default value is 0 (rotateangle) and black (rotatebgcolor). Values without quotes.
  • flip. Flip an image in a direction. Permitted values are: horizontal, vertical. Value without quotes.


• table: border. Width (in pixels) of the border around a table. Value without quotes.
• td: colspan, rowspan. Span columns and rows in a table cell. Value without quotes.

Code Select Expand

[img rotateangle=degree rotatebgcolor=color flip=direction]image[/img]
[table border=number]table content[/table]
[td colspan=number rowspan=number]table cell[/td]

New BBC tags:

• Paragraph style (div): Adds class or style inline to one or more paragraph.
• Character style (span): Adds class or style inline to text within a paragraph.

Code Select Expand

[div class="class_of_style" style="rules"]paragraph with style[/div]
[span class="class_of_style" style="rules"]text with style[/span]

For these new BBC tags are added buttons in the editing box.

EXAMPLE

SMF COMPATIBILITY

• SMF 1.1 to 1.1.21.
• SMF 2.0 to 2.0.17.

Can be installed before or after "nCode Image Resizer" MOD 2.0 (for SMF 2.0-2.0.15).

PHP configuration option "allow_url_fopen" must be activated in php.ini or .htaccess file.

LANGUAGES

• english, english_british.
• italian.
• portuguese_brazilian, brazilian, portuguese_pt.
• russian.
• spanish, spanish_es, spanish_latin.

DOWNLOAD

Link to MOD

MANUAL INSTALLATION

See https://wiki.simplemachines.org/smf/Manual_installation_of_mods

COLLABORATE WITH THIS MOD

This work is licensed under a Creative Commons Attribution 3.0 Unported License.

You are free to share and adapt this MOD. Also you can collaborate in different ways:

• Translate the mod into other languages, adding the translation in https://www.simplemachines.org/community/index.php?topic=379283.0.
• Write comments, detect errors or suggest improvements in support topics
  in English https://www.simplemachines.org/community/index.php?topic=379283.0 and
  in Spanish https://www.simplemachines.org/community/index.php?topic=372850.0.
• Help to expand my collection of coins, banknotes and stamps, sending me something from your country via postal mail (ask me for address by personal message).
• Make a donation via PayPal.

CHANGE LOG

Code Select Expand

Legend:   ! Fixed   + Added   - Removed   * Changed   @ Note

1.5.2   2020-03-07
------------------
@ Can be installed before or after "nCode Image Resizer" MOD 2.0 (for SMF 2.0-2.0.15).
+ SMF compatibility: 2.0.11-2.0.17.
- SMF 2.0.x: Languages: brazilian, brazilian-utf8, spanish, spanish-utf8 (these are not used).

1.5.1   2015-08-26
------------------
! When img tag is disabled only URL is displayed.

1.5     2015-05-23
------------------
@ PHP configuration option "allow_url_fopen" must be activated in php.ini or .htaccess file.
* If rotate or flip of image fail, the original image is shown.
+ SMF compatibility: 1.1.21 and 2.0.10.

1.4.10  2014-10-07
------------------
+ SMF compatibility: 1.1.20 and 2.0.9.

1.4.9   2014-06-23
------------------
! Use HTML entities in ISO-8859-1 languages.
+ SMF compatibility: 2.0.8.

1.4.8   2014-01-25
------------------
+ SMF compatibility: 2.0.7.

1.4.7   2013-10-25
------------------
@ Can be installed before or after "nCode Image Resizer" MOD 1.3-1.4.
+ SMF compatibility: 1.1.19 and 2.0.6.

1.4.6   2013-08-18
------------------
@ This work is licensed under a Creative Commons Attribution 3.0 Unported License https://creativecommons.org/licenses/by/3.0/
+ SMF compatibility: 2.0.5.

1.4.5   2013-04-10
------------------
+ SMF compatibility: 1.1.18.
+ SMF compatibility: 2.0.4.
- SMF compatibility: Support to obsolete series 1.0.x and Beta and RC versions.

1.4.4   2012-12-22
------------------
+ SMF compatibility: 1.0.23.
+ SMF compatibility: 1.1.17.
+ SMF compatibility: 2.0.3.
+ Languages: portuguese_brazilian, portuguese_brazilian-utf8, brazilian, brazilian-utf8, portuguese_pt, portuguese_pt-utf8, thanks to Joomlamz.

1.4.3   2011-12-25
------------------
+ SMF compatibility: 1.0.22.
+ SMF compatibility: 1.1.16.
+ SMF compatibility: 2.0.2.

1.4.2   2011-09-21
------------------
+ SMF compatibility: 1.1.15.
+ SMF compatibility: 2.0.1.

1.4.1   2011-06-23
------------------
+ SMF compatibility: 1.1.14.
+ SMF compatibility: 2.0.
* Uses integration hooks in SMF 2.0 RC4 and next.

1.4     2011-04-09
------------------
+ Optional attribute class in BBC tags: hr, img, li, list, table, td, tr.

1.3.2   2011-04-03
------------------
+ Languages: italian, italian-utf8, thanks to Sages.

1.3.1   2011-03-04
------------------
+ SMF compatibility: 1.0 RC1 to RC2 and 1.0 to 1.0.21.
+ SMF compatibility: 1.1 Beta 3 Public, RC1 to RC3 and 1.1 to 1.1.13.

1.3     2011-02-17
------------------
+ Optional attribute class in BBC tags: div, span.
+ Optional attribute in table BBC tag: border.
+ SMF compatibility: 2.0 Beta 3.1 Public and RC5.
* Join in one package the normal version and the version that is installed after "nCode Image Resizer" MOD 1.3-1.3.1.

1.2.2   2010-11-08
------------------
! Regular expressions of mistake fixes in SMF 2.0 RC2 and RC3.
+ SMF compatibility: 2.0 Beta 4, RC1 to RC1.2 and RC4.
+ Languages: english_british, english_british-utf8 (copy of english).
+ Languages: spanish, spanish-utf8 (copy of spanish_es).
@ There is a version to be installed after "nCode Image Resizer" MOD 1.3-1.3.1.

1.2.1   2010-06-17
------------------
! Source code of img BBC tag.
@ There is a version to be installed after "nCode Image Resizer" MOD 1.3-1.3.1.

1.2     2010-06-14
------------------
+ Optional attributes in img BBC tag: rotateangle, rotatebgcolor, flip.

1.1     2010-05-11
------------------
+ Optional attributes in td BBC tag: colspan, rowspan.

1.0.1   2010-05-09
------------------
+ Languages: russian, russian-utf8, thanks to Bugo.

1.0     2010-04-29
------------------
+ Optional attribute style in BBC tags: hr, img, li, list, table, td, tr.
+ BBC tags (and buttons in the editing box) with style attribute: div, span.
+ SMF compatibility: 2.0 RC2 to RC3.
+ Languages: english, english-utf8, spanish_es, spanish_es-utf8, spanish_latin, spanish_latin-utf8.

[Eliana Tamerin]

Ambitious! I don't know when I might get around to installing this, but there are times when this would have been useful. Very nice mod, I hope it works smoothly and bugfree.

[vicram10]

very nice mod
congratulations

[Arantor]

Nicely done, great to see you dealt with the other stuff too.

One question: were any tests made for XSS attacks? I can't remember if SMF attempts to sanitise bbcodes like that for XSS.

[Bugo]

Russian translation

[davidhs]

One question: were any tests made for XSS attacks? I can't remember if SMF attempts to sanitise bbcodes like that for XSS.

I do not 

Russian translation

Thanks!

[Arantor]

Fortunately, SMF does protect; I just tested for you.

XSS is where HTML is compromised by user input not being sanitised properly, such as trying to embed Javascript into the "" options provided.

[davidhs]

Fortunately, SMF does protect; I just tested for you.

XSS is where HTML is compromised by user input not being sanitised properly, such as trying to embed Javascript into the "" options provided.

Thanks.

New version:

Code Select Expand

1.0.1   2010-05-09
------------------
+ Languages: Add russian, russian-utf8, thanks to Bugo.

[dannbass]

Have you thought of putting html attributes also? the rowspan and colspan would be very helpful also.
Thanks for the mod!

[davidhs]

A great idea, thanks. (There is no colspan / rowspan in CSS).

Soon I will add it.

[dannbass]

I know, I know... it was just an idea to put colspan and rowspan... it's a pain to do that with tables...  to get it to where you can see the effect of colspan.
Thank you!

[davidhs]

New version:

Code Select Expand

Legend:   ! Fixed   + Added   - Removed   * Changed   @ Note

1.1     2010-05-11
------------------
+ New optional attributes in td BBCode tag: colspan, rowspan.

[dannbass]

Great!!!! thank you for doing that so fast!! I'm going to test drive it right now!
Now I don't have to do things like this

Code Select Expand

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

[davidhs]

New version:

Code Select Expand

Legend:   ! Fixed   + Added   - Removed   * Changed   @ Note

1.2     2010-06-14
------------------
+ New optional attributes in img BBCode tag: rotateangle, rotatebgcolor, flip.

[davidhs]

New version:

Code Select Expand

Legend:   ! Fixed   + Added   - Removed   * Changed   @ Note

1.2.1   2010-06-17
------------------
! Source code of img BBCode tag.
@ There is a version to be installed after MOD nCode Image Resizer 1.3-1.3.1.

[tRu3_sKiTz0]

The rotate feature doesn't seem to work for me. I used your example and tested them all on my own forum and everything works except for the rotate image feature.

[davidhs]

The rotate/flip features are made with PHP (with CSS/JavaScript not is possible). If your forum is in a free server (for example) may not allow work with images in PHP.

This page made the rotate/flip (not use any function of SMF):

Code Select Expand

YOUR_FORUM/Source/Subs-BBCodeWithStyle-image.php
You can give the code to the server owner and ask that does not work.

This page have parameters:

Code Select Expand

YOUR_FORUM/Source/Subs-BBCodeWithStyle-image.php?image=url&rotateangle=nr&rotatebgcolor=color&flip=dir
For example:

Code Select Expand

YOUR_FORUM/Sources/Subs-BBCodeWithStyle-Image.php?image=http%3A%2F%2Fimg338.imageshack.us%2Fimg338%2F3980%2Funextrannoentrenosotros.jpg&rotateangle=45&flip=vertical

[tRu3_sKiTz0]

I'm not quite sure what you're getting at there. I'm sorry, I'm a nub, but I do not use a free hosting service or anything and I guess I will look into those other strings but could you post an example that works on yours so I can test it on mine. Maybe I'm just not using the bbcode correctly.

[poolhall]

Great modification, thanks a lot!

[davidhs]

I'm not quite sure what you're getting at there. I'm sorry, I'm a nub, but I do not use a free hosting service or anything and I guess I will look into those other strings but could you post an example that works on yours so I can test it on mine. Maybe I'm just not using the bbcode correctly.

For example, this show image rotate 15º with background red and flip vertical:

Code Select Expand

[img rotateangle=15 rotatebgcolor=red flip=vertical]http://img338.imageshack.us/img338/3980/unextrannoentrenosotros.jpg[/img]