One BBCode for Multiple options

Get help developing custom BBCodes or request one.
Post Reply
Dazbobaby
Registered User
Posts: 77
Joined: Fri Feb 13, 2009 7:02 pm
Contact:

One BBCode for Multiple options

Post by Dazbobaby » Sun Jul 14, 2019 9:10 am

is it possible to create a single bbcode that has multiple choices?
Example.

Code: Select all

[stars][/stars]

would become

Code: Select all

[stars=1 or 2 or 3 or 4 or 5][/stars]
This way you could have one bbcode and one number [stars=5] then it would show 5 stars and [stars=4] would show 4... and so on.

I already have the bbcode to display the stars

Code: Select all

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
  color: orange;
}
</style>

<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
Ebikes and Technology The Bionic Cyclist

User avatar
ViolaF
Registered User
Posts: 1452
Joined: Tue Aug 14, 2012 11:52 pm

Re: One BBCode for Multiple options

Post by ViolaF » Mon Jul 15, 2019 3:21 pm

Just make 5 BBCodes and make them invisible in postbox

[star1][/star1]

Code: Select all

<span style="color: orange;" class="icon fa-star checked"></span>

[star2][/star2]

Code: Select all

<span style="color: orange;" class="icon fa-star checked"></span>
<span style="color: orange;" class="icon fa-star checked"></span>
etc...

Then make one with

[star][/star]

Code: Select all

Please enter a digit after BBCode [star1][/star1] to [star5][/star5]
and write as helpline to the user, to make 1 to 5 behind the bbcode

User avatar
ViolaF
Registered User
Posts: 1452
Joined: Tue Aug 14, 2012 11:52 pm

Re: One BBCode for Multiple options

Post by ViolaF » Mon Jul 15, 2019 3:25 pm

Corrections eg. unneeded checked in class (dont work in bbcode here either...)


Just make 5 BBCodes and make them invisible in postbox:

[star1][/star1]

Code: Select all

<span style="color: orange;" class="icon fa-star"></span>

[star2][/star2]

Code: Select all

<span style="color: orange;" class="icon fa-star"></span>
<span style="color: orange;" class="icon fa-star"></span>
etc...

Then make one > visible with

BBCode
[star][/star]

Replacement

Code: Select all

Please enter a digit after BBCode [star1][/star1] to [star5][/star5]
...and write a helpline to the user, to make a digit (1 to 5) behind the bbcode

User avatar
ViolaF
Registered User
Posts: 1452
Joined: Tue Aug 14, 2012 11:52 pm

Re: One BBCode for Multiple options

Post by ViolaF » Wed Jul 17, 2019 9:55 am

Now here is my favorite solution:


Just make 5 BBCodes and make them invisible in postbox:

BBCode:
[star1][/star1]

Replacement

Code: Select all

<span style="color: orange;" class="icon fa-star"></span>
BBCode:
[star2][/star2]

Replacement

Code: Select all

<span style="color: orange;" class="icon fa-star"></span>
<span style="color: orange;" class="icon fa-star"></span>
BBCode:
[star3][/star3]

Replacement

Code: Select all

<span style="color: orange;" class="icon fa-star"></span>
<span style="color: orange;" class="icon fa-star"></span>
<span style="color: orange;" class="icon fa-star"></span>
etc....

---

then... open
styles/prosilver/template/posting_buttons.html

find

Code: Select all

<select name="addbbcode20" class="bbcode-size" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}">
		<option value="50">{L_FONT_TINY}</option>
		<option value="85">{L_FONT_SMALL}</option>
		<option value="100" selected="selected">{L_FONT_NORMAL}</option>
		<!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 -->
			<option value="150">{L_FONT_LARGE}</option>
			<!-- IF not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 -->
				<option value="200">{L_FONT_HUGE}</option>
			<!-- ENDIF -->
		<!-- ENDIF -->
	</select>
after add

Code: Select all

	<select style="color: orange;" name="addbbcode9999" class="bbcode-stars" onchange="bbfontstyle('[star' + this.form.addbbcode9999.options[this.form.addbbcode9999.selectedIndex].value + ']', '[/star' + this.form.addbbcode9999.options[this.form.addbbcode9999.selectedIndex].value + ']');this.form.addbbcode9999.selectedIndex;" title="Please enter a digit after BBCode [star1][/star1] to [star5][/star5]">
		<option value="1">&#9733;</option>
		<option value="2">&#9733; &#9733;</option>
		<option value="3">&#9733; &#9733; &#9733;</option>
		<option value="4">&#9733; &#9733; &#9733; &#9733;</option>
		<option value="5">&#9733; &#9733; &#9733; &#9733; &#9733;</option>
		<option value="" selected="selected">&#9733; Stars</option>
	</select>	
clear all board- and browser-caches

Zwischenablage-1.png
Zwischenablage-3.png

User avatar
Powdered Toast Man
Registered User
Posts: 3
Joined: Sun Jul 21, 2019 10:47 am

Re: One BBCode for Multiple options

Post by Powdered Toast Man » Sun Jul 21, 2019 12:59 pm

You could use this for any font awesome, be it star, calendar, etc, to display from 1 upto 5 symbols. You can choose all the same colour for all of them, some of them or none of them.

Usage:

[fab3]{SIMPLETEXT}[/fab3] will display one symbol

[fab3=1]{SIMPLETEXT}[/fab3] will display one symbol

[fab3=4 all=red]{SIMPLETEXT}[/fab3] will display four symbols all red

[fab3=3 color1=red color2=blue color3=green]{SIMPLETEXT}[/fab3] will display three symbols all different colours.




BBcode:

Code: Select all

[fab3 number={NUMBER;optional} all={COLOR;optional} color1={COLOR1;optional} color2={COLOR2;optional} color3={COLOR3;optional} color4={COLOR4;optional} color5={COLOR5;optional}]{SIMPLETEXT}[/fab3]

HTML replacement:

Code: Select all

<xsl:if test="@number &gt;= 1 or not(@number)">
<xsl:choose>
<xsl:when test="@all"><i style="color: {COLOR}" data-fabs="all" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:when test="@color1"><i style="color: {COLOR1}" data-fabs="1col" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:otherwise>
<i data-fabs="1noc" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i>
</xsl:otherwise>
</xsl:choose></xsl:if>
<xsl:if test="@number &gt;= 2">
<xsl:choose>
<xsl:when test="@all"><i style="color: {COLOR}" data-fabs="all" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:when test="@color2"><i style="color: {COLOR2}" data-fabs="2col" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:otherwise>
<i data-fabs="2noc" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i>
</xsl:otherwise>
</xsl:choose></xsl:if>
<xsl:if test="@number &gt;= 3">
<xsl:choose>
<xsl:when test="@all"><i style="color: {COLOR}" data-fabs="all" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:when test="@color3"><i style="color: {COLOR3}" data-fabs="3col" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:otherwise>
<i data-fabs="3noc" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i>
</xsl:otherwise>
</xsl:choose></xsl:if>
<xsl:if test="@number &gt;= 4">
<xsl:choose>
<xsl:when test="@all"><i style="color: {COLOR}" data-fabs="all" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:when test="@color4"><i style="color: {COLOR4}" data-fabs="4col" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:otherwise>
<i data-fabs="4noc" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i>
</xsl:otherwise>
</xsl:choose></xsl:if>
<xsl:if test="@number &gt;= 5">
<xsl:choose>
<xsl:when test="@all"><i style="color: {COLOR}" data-fabs="all" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:when test="@color5"><i style="color: {COLOR5}" data-fabs="5col" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i></xsl:when>
<xsl:otherwise>
<i data-fabs="5noc" class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i>
</xsl:otherwise>
</xsl:choose></xsl:if>

fab3 test01.png
fab3 test01.png (9.3 KiB) Viewed 434 times


I'm pretty new to bbcodes (and xsl) and I don't know what exact xsl is allowed? While it's modular if you want to add a 6th, 7th, etc symbol, I don't know if there are ways to condense it down?

Post Reply

Return to “Custom BBCode Development and Requests”