typo3fluidtypo3-9.xfluid-styled-content

Adding custom CSS classes to Fluid widget paginate

Is it possible to add custom css classes to this widget:

<f:widget.paginate objects="{products}" as="paginatedProducts" 
configuration="{itemsPerPage: 1, insertAbove: 1, insertBelow: 0, 
maximumNumberOfLinks: 10}">

Currently the "next" button has a li and link inside of it. I would like the link to become a button. So I want to add a class to the a (inside the li) called 'btn btn-primary'

Solution

  • You can override the template for widgets used in your extension with TypoScript:

    plugin.tx_yourextension.view.widget.TYPO3\CMS\Fluid\ViewHelpers\Widget\PaginateViewHelper.templateRootPaths.10 = EXT:yourextension/Resources/Private/Templates/

    You can then add the classes in your custom template. The path of the custom template should be Resources/Private/Templates/ViewHelpers/Widget/Paginate/Index.html in your extension.

    You can find the default template for the paginate widget here: typo3/sysext/fluid/Resources/Private/Templates/ViewHelpers/Widget/Paginate/Index.html