TYPO3/Use custom themes/ru

From Aimeos documentation

< TYPO3‎ | Use custom themes

<languages/>


Шаблон, используемый по умолчанию, может быть и хорош, но рано или поздно вам понадобиться свой. Шаблоны состоят из файла CSS, нескольких файлов Javascript и изображений, связанных с этими файлами. Большая часть файлов CSS и Javascript подключаются через TypoScript:

Aimeos 2.x

Since version 2.0, 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 old one is still available as "classic". The current TypoScript setup that is included looks like this:

  1. page.includeCSS.aimeos-common = EXT:aimeos/Resources/Public/Themes/elegance/common.css
  2. page.includeCSS.aimeos = EXT:aimeos/Resources/Public/Themes/elegance/aimeos.css
  3.  
  4. page.includeJSFooterlibs.jquery = http://code.jquery.com/jquery-1.11.1.min.js
  5. page.includeJSFooterlibs.jquery.external = 1
  6. page.includeJSFooterlibs.jquery-migrate = http://code.jquery.com/jquery-migrate-1.2.1.min.js
  7. page.includeJSFooterlibs.jquery-migrate.external = 1
  8. page.includeJSFooterlibs.jquery-ui = EXT:aimeos/Resources/Public/Themes/jquery-ui.custom.min.js
  9.  
  10. page.includeJSFooter.aimeos = EXT:aimeos/Resources/Public/Themes/aimeos.js
  11. page.includeJSFooter.aimeos-detail = EXT:aimeos/Resources/Public/Themes/aimeos-detail.js
  12. page.includeJSFooter.aimeos-theme = EXT:aimeos/Resources/Public/Themes/elegance/aimeos.js

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.

Aimeos 1.x

CSS and Javascript files are included via TypoScript:

page.includeCSS.tx_aimeos = EXT:arcavias/Resources/Public/html/classic/css/arcavias.css

page.includeJSFooterlibs.jquery = EXT:aimeos/Resources/Public/html/classic/js/jquery.min.js
page.includeJSFooterlibs.jquery-migrate = EXT:aimeos/Resources/Public/html/classic/js/jquery-migrate.js
page.includeJSFooterlibs.jquery-ui = EXT:aimeos/Resources/Public/html/classic/js/jquery-ui.custom.min.js
page.includeJSFooter.tx_aimeos = EXT:aimeos/Resources/Public/html/classic/js/arcavias.js

Можно заменить один или несколько из этих файлов также через TypoScript, например

Use own files

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

page.includeCSS.tx_aimeos = fileadmin/template/css/arcavias.css

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.

Если нужно лишь немного подстроить макет, используйте отдельные файлы CSS, содержащие стили, переназначающие одноимённые из arcavias.css. Добавить свой файл можно через TypoScript, но он должен быть включен ПОСЛЕ оператора page.includeCSS.tx_aimeos TypoScript, и подключен он будет после файла arcavias.css:

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

Динамически подключаются два Javascript файла, и они связаны с разной настройкой изображений. Эти файлы и папки:

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

При такой настройке копии упомянутых выше файлов можно сохранить в папке "/fileadmin/template".

Осторожно: не добавляйте слеш (/) в конце настраиваемых путей.