TYPO3/Use custom themes

From Aimeos documentation

Other languages:
Deutsch 0% • ‎English 100% • ‎русский 0%

The default theme might be nice but you want to use your own one sooner or later. A theme consists of a CSS file, several Javascript files and the images references by those files. You can find more about themes in the Developers section.

Since version 2015.x, theming was simplified and common CSS and JS code moved to separate files. The default theme is named "elegance", a golden high quality theme. The current TypoScript setup that is included looks like this:

  1. page.includeCSS.aimeos-common = {$plugin.tx_aimeos.theme.css.common}
  2. page.includeCSS.aimeos = {$plugin.tx_aimeos.theme.css.aimeos}
  3. page.includeCSS.aimeos-custom = {$plugin.tx_aimeos.theme.css.custom}
  5. page.includeJSFooterlibs.polyfill = https://cdn.polyfill.io/v2/polyfill.min.js
  6. page.includeJSFooterlibs.polyfill.external = 1
  7. page.includeJSFooterlibs.jquery = https://code.jquery.com/jquery-2.2.4.min.js
  8. page.includeJSFooterlibs.jquery.external = 1
  9. page.includeJSFooterlibs.jquery-ui = EXT:aimeos/Resources/Public/Themes/jquery-ui.custom.min.js
  11. page.includeJSFooter.aimeos = {$plugin.tx_aimeos.theme.js.aimeos}
  12. page.includeJSFooter.aimeos-detail = {$plugin.tx_aimeos.theme.js.aimeos-detail}
  13. page.includeJSFooter.aimeos-theme = {$plugin.tx_aimeos.theme.js.aimeos-theme}
  14. page.includeJSFooter.aimeos-custom = {$plugin.tx_aimeos.theme.js.aimeos-custom}

The easiest way to edit the theme configuration is via the TYPO3 constant editor.

The jQuery and jQuery migration library are fetched from the jQuery CDN by the browser to speed up the delivery to the user.

The aimeos-detail.js file is only required for the product detail page. To reduce the amount of code that needs to be retrieved by the browser at the first page request, you can unset the "aimeos-detail" JS configuration option with

page.includeJSFooter.aimeos-detail >

in the TypoScript setup section and include the line only on the detail page.

Use own files

You can replace one or more of these files by using TypoScript, e.g.

  1. page.includeCSS.tx_aimeos =  fileadmin/template/css/aimeos.css
  2. page.includeJSFooterlibs.jquery = fileadmin/template/js/jquery.min.js

Please make sure the TypoScript statements are executed after the Aimeos setup.txt is included so they can really overwrite the statements from that file! If you've imported the page tree from the .t3d file, the Aimeos setup.txt is included in the "Shop" page. To overwrite the CSS file for example, you need to include the statements above in the setup section of this page. Adding them to the root page would have no effect.

If you only want to tweak the layout a little bit use a separate CSS file that contains the styles that should overwrite the ones from the aimeos.css. You can add your file via TypoScript but it must be included AFTER the page.includeCSS.tx_aimeos TypoScript statement so it's included after the aimeos.css file:

  1. page.includeCSS.myproject =  fileadmin/template/css/myfile.css

The images directory must be configured differently. First you have to set the base URL for the new template files:

  1. plugin.tx_aimeos.settings.client.html.common.template.baseurl = fileadmin/template

Then you can add your own copies of these files to the "/fileadmin/template" directory.

Don't add a trailing slash (/) at the end of the configuration value.