BBcode List: Custom Bullet for a Features List

Get help developing custom BBCodes or request one.
Post Reply
User avatar
orynider
Translator
Posts: 271
Joined: Wed Nov 16, 2005 12:48 pm
Location: Arad, România
Name: Florin-Ciprian Bodin
Contact:

BBcode List: Custom Bullet for a Features List

Post by orynider »

Creating an BBcode List with a custom bullet character.
For example to list your favorite colors you could use:
  • Red
  • Blue
  • Yellow
  • Red
  • Blue
  • Yellow
  • Red
  • Blue
  • Yellow
  • Red
  • Blue
  • Yellow
The question remains how to get the custom list’s with √ bullet for a features check BBcode list ?
  1. Red
    Blue
    Yellow
Last edited by orynider on Sun Aug 05, 2018 11:29 pm, edited 2 times in total.
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: BBcode List: Custom Bullet for a Features List

Post by Lumpy Burgertushie »

assuming you are talking about your "features" page you can't use bbcode in a page's html. bbcode is only for use in posts.

if you want to create a normal html ordered list or unordered list and use different icons check this out:
https://www.sitepoint.com/use-webfont-i ... ml5-lists/
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
orynider
Translator
Posts: 271
Joined: Wed Nov 16, 2005 12:48 pm
Location: Arad, România
Name: Florin-Ciprian Bodin
Contact:

Re: BBcode List: Custom Bullet for a Features List

Post by orynider »

Lumpy Burgertushie wrote: Sun Jul 29, 2018 7:55 pm assuming you are talking about your "features" page you can't use bbcode in a page's html.
No, I'm looking on a way to post a table or list of features for my projects in a customized or standard phpBB block and after in a phpBB post on forums when I install phpBB 3.2 with the CMS.

Now I'm upgrading the bbcode adding tables between "code" and "sniper/tables" a extension that allow us to insert a table block in a standard phpBB post.

So, I could re-use my first message from the page in construction when I open the forum, but I would have to replace "[√]" with "[*]" in the phpBB post.
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26505
Joined: Fri Aug 29, 2008 9:49 am

Re: BBcode List: Custom Bullet for a Features List

Post by Mick »

orynider wrote: Fri Aug 03, 2018 8:32 amI'm looking on a way to post a table
Is this any good to you? viewtopic.php?f=438&t=2480821
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
User avatar
orynider
Translator
Posts: 271
Joined: Wed Nov 16, 2005 12:48 pm
Location: Arad, România
Name: Florin-Ciprian Bodin
Contact:

Re: BBcode List: Custom Bullet for a Features List

Post by orynider »

Mick wrote: Fri Aug 03, 2018 8:46 am Is this any good to you? viewtopic.php?f=438&t=2480821
But this is: viewtopic.php?f=456&t=2386686

:D

If the [table][/table] bbcode work, anyone knows how to get custom bullet √ work as |&disc;|&circle;|□ works ?

For example to list your favorite colors you could use:
  • Red
  • Blue
  • Yellow
  • Red
  • Blue
  • Yellow
  • Red
  • Blue
  • Yellow
  • Red
  • Blue
  • Yellow
The question remains how to get the custom list’s with √ bullet for a features check BBcode list ?

Red
Blue
Yellow
User avatar
3Di
I've Been Banned!
Posts: 17538
Joined: Mon Apr 04, 2005 11:09 pm
Location: I'm with Ukraine 🇺🇦
Name: Marco
Contact:

Re: BBcode List: Custom Bullet for a Features List

Post by 3Di »

Code: Select all

[list=none]
√ [color=#FF0000]Red[/color]
√ [color=#0040FF]Blue[/color]
√ [color=#FFFF00]Yellow[/color]
[/list]
  • Red
    Blue
    Yellow
That's not the point, just a proof of an abstract concept.

You can use an Image as a List Item Marker, or whatever.
https://learn.shayhowe.com/html-css/cre ... em-styling

On a side note: using radic for a check list isn't so "nice", that's more a Math's stuff.
There are fa icons for this purpose which can be used, instead.

https://fontawesome.com/icons/square?style=regular
https://fontawesome.com/icons/check-squ ... le=regular
Or https://fontawesome.com/icons?d=gallery&q=check

BBcode usage:

Code: Select all

[fa]{IDENTIFIER}[/fa]
HTML replacement

Code: Select all

<i class="icon fa-{IDENTIFIER} fa-fw" aria-hidden="true"></i>
Usage:

Code: Select all

[list=none]
[fa]check-square[/fa] a
[fa]check-square[/fa] b
[fa]square[/fa] c
[/list]
Result:
fa-list.png
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Buy me a coffee -> Image
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades
User avatar
orynider
Translator
Posts: 271
Joined: Wed Nov 16, 2005 12:48 pm
Location: Arad, România
Name: Florin-Ciprian Bodin
Contact:

Re: BBcode List: Custom Bullet for a Features List

Post by orynider »

Code: Select all

[fa={SIMPLETEXT}]{IDENTIFIER}[/fa]

Code: Select all

<i class="icon fa-{IDENTIFIER} fa-fw" aria-hidden="true" style=" font-size: {SIMPLETEXT}px;"></i>

Code: Select all

Font Awesome Icon: [fa=15]icon-name[/fa]

http://mxpcms.sourceforge.net/forum/vie ... 43&p=64351
User avatar
mrgoldy
Former Team Member
Posts: 1394
Joined: Tue Oct 06, 2009 7:34 pm
Location: The Netherlands
Name: Gijs
Contact:

Re: BBcode List: Custom Bullet for a Features List

Post by mrgoldy »

I would indeed go with 3Di's approach, using Font Awesome icons.
Please note that phpBB currently uses Font Awesome 4.7, so you can not use the newer icons available in FontAwesome 5.

Font Awesome provides a way of using FA icons as list bullets.
You will need a <ul class="fa-ul"> and then inside the <li>'s, you can add a FA icon as a bullet with <i class="icon fa-THE_ICON fa-li"></i>. Commonly in phpBB, FA icons use the fa-fw class (Fix Width), but if you want to use them as a list's bullets, you can replace them with fa-li.

So, to turn this into BBCodes:
  1. Font Awesome List
    BBCode usage:
    [FAL #createChild=LI]{TEXT}[/FAL]

    HTML Replacement:
    <ul class="fa-ul"><xsl:apply-templates /></ul>
  2. Font Awesome Icon
    BBCode usage:
    [FALI]{IDENTIFIER;postFilter=strtolower}[/FALI]

    HTML Replacement:

    Code: Select all

    <i aria-hidden="true">
    	<xsl:attribute name="class">
    		<xsl:text>icon fa-</xsl:text>
    		<xsl:value-of select="@content"/>
    		<xsl:text> fa-li</xsl:text>
    	</xsl:attribute>
    </i>
    You can add a lot more options to the BBCode usage and HTML replacement, but this the basic set up.
    If you want me to post a full list of native possibilities, let me know and I'll show you the BBCode usage and HTML replacement for that.
Then in your post, you can create a custom list with:

Code: Select all

[fal]
	[*] [fali]check-square[/fali] This list item is checked!
	[*] [fali]square[/fali] This list is not checked!
[/fal]
phpBB Studio / Member of the Studio

Contributing: You can do it too! Including testing Pull Requests (PR).
phpBB Development and Testing made easy.
Post Reply

Return to “Custom BBCode Development and Requests”