Styling the AMP view
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.
Styling the AMP view
Styling the AMP view works just like normal HTML pages which are styled by using CSS. The AMP-Extension comes with a small Static-Template, which contains some basic styles. To use it just include the Static-Template.
Static-Template styles are contained in a TypoScript-Node:
plugin.tx_amp {
settings {
stylesheets.basic (
body {
background-color: white;
padding: 15px;
}
/* ..more styles.. */
)
}
}To add additional styles for a specific AMP view, you need to add them to the additionalTypoScript node as follows:
plugin.tx_amp {
settings {
stylesheets.additional (
/* Specific styles for the EXT:openimmo */
body {
background-color: red;
}
/* ..more styles.. */
)
}
}Internally the AMP-Extension merges stylesheets.basic and stylesheets.additional and compresses it, so that it fits well into the AMP view.
Warning:
AMP doesn't allow all styles! More information on: https://www.ampproject.org/docs/guides/responsive/style_pages
TYPO3 - AMP
Accelerated mobile pages (short: AMP) are "load-optimized" webpages, specifically designed for mobile devices like smartphones or tablets.