Custom themes¶
Target group: Developers, Integrators
Adapt an existing theme¶
If you want to adapt an existing theme, and not necessarily create a new one, you may want to consider adding another path to the default templates via adapting the root paths as so:
page {
1365499 = FLUIDTEMPLATE
1365499 {
templateRootPaths {
150 = EXT:my-ext/Resources/Private/cookieman/Templates/{$plugin.tx_cookieman.settings.theme}/
}
partialRootPaths {
150 = EXT:my-ext/Resources/Private/cookieman/Partials/
}
layoutRootPaths {
150 = EXT:my-ext/Resources/Private/cookieman/Layouts/
}
}
}
This way, you also do not need to add a cookieman-theme.css
and cookieman-theme.js
file, which are necessary when creating a full custom theme.
Create a new theme¶
Note
We are happy to receive pull-requests for new themes!
This is a recommendation how to set up your template structure for a custom extension.
Set your base path in TypoScript constants:
plugin.tx_cookieman.settings.resourcesBasePath = EXT:your_ext/Extensions/cookieman/Resources
Choose a new theme name:
plugin.tx_cookieman.settings.theme = myTheme
Create folder
EXT:your_ext/Extensions/cookieman/Resources/Private/Themes/myTheme/
. Add 3 folders:Templates
,Partials
,Layouts
.These folders will have the highest priority when looking for templates, partials or layouts now. The fallback will be
EXT:cookieman/Resources/Private/*
.Create folder
EXT:your_ext/Extensions/cookieman/Resources/Public/Themes/myTheme
. This will hold the filescookieman-theme(.min).css
andcookieman-theme(.min).js
. Reimplement the methods cookieman.show() and cookieman.hide() incookieman-theme(.min).js
.Copy the .css, .js and .html files as needed from a default theme.
Adapt the HTML/CSS/JS as needed.
Storing user consent¶
These HTML element attributes control the functionality:
<* data-cookieman-save>¶
- Save and close
Example:
<button class="btn btn-default" style="display: none" data-cookieman-save> {f:translate(key: 'save')} </button>
<* data-cookieman-accept-all>¶
- Mark all checkboxes
Example:
<button class="btn btn-primary" data-cookieman-accept-all data-cookieman-save> {f:translate(key: 'accept')} </button>
<* data-cookieman-accept-none>¶
- Uncheck all checkboxes
(will just leave the groups with the options preselected=1, disabled=1 checked)
They can appear multiple times and also together on the same element.
Example:
<button class="btn btn-primary" data-cookieman-accept-none data-cookieman-save> {f:translate(key: 'deny')} </button>