RozbehSharahi / bootstrap_grids

TYPO3 Extension "bootstrap_grids"
10 stars 38 forks source link

How to add my own styles in Accordion CE? #67

Open baden32 opened 4 months ago

baden32 commented 4 months ago

I would like to define different layouts for my Accordions CE and I can see in Plugin option a "Style" selector:

image

Can someone let me know how to define my own styles here? I can imagine in TS config, but how?

Thank you in advance for your help. Regards Joël

xperseguers commented 4 months ago

Hello Joël,

Not using this extension, but from what I see there's no built-in support for adding new styles via configuration. As we see here:

https://github.com/RozbehSharahi/bootstrap_grids/blob/master/Configuration/FlexForm/flexform_accordion.xml#L21-L24

"None" is hardcoded, and that's the only possible value. There's no itemsProcFunc or whatever which would allow to add new items via configuration.

But this is pure TCA, so you can easily add you own items the way you want:

  1. Copy that file into your site extension, e.g., under EXT:site/Configuration/FlexForm/bootstrap_grids_accordion.xml
  2. Add the items you want:
<items type="array">
    <numIndex index="0" type="array">
        <numIndex index="0">LLL:EXT:bootstrap_grids/Resources/Private/Language/locallang_db.xlf:grid.label.none</numIndex>
        <numIndex index="1"></numIndex>
    </numIndex>
    <numIndex index="1" type="array">
        <numIndex index="0">My custom style 1 (or LLL:EXT: string or course)</numIndex>
        <numIndex index="1">STYLE_1</numIndex>
    </numIndex>
    <numIndex index="2" type="array">
        <numIndex index="0">My custom style 2 (or LLL:EXT: string or course)</numIndex>
        <numIndex index="1">STYLE_2</numIndex>
    </numIndex>
</items>

And then override the value of flexformDS you find in the default configuration file: https://github.com/RozbehSharahi/bootstrap_grids/blob/master/Configuration/TypoScript/pageTs/tsconfig.ts#L206 (again as part of the pageTS of your site extension) to point to that custom definition file you just created and you're done!

HTH