{"id":24058,"date":"2021-09-08T06:26:34","date_gmt":"2021-09-08T10:26:34","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=24058"},"modified":"2021-11-18T05:42:33","modified_gmt":"2021-11-18T10:42:33","slug":"test","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles","title":{"rendered":"How To Add Custom CSS to Magento 2 AMP Theme"},"content":{"rendered":"\n

In this article, we will show you how to add custom CSS to your AMP extension<\/a>. As an example, we will customize the mini-cart item counter and change its background color. <\/p>\n\n\n\n

\n

Important Information:<\/strong><\/p>\n\n\n\n

We strongly recommend that you make all changes to your custom AMP theme, not to the default AMP Theme One. This way you can update your AMP theme, avoiding the risk of losing your customizations.<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

Step 1. Create Custom AMP Theme<\/h2>\n\n\n\n

If you have not created your custom AMP theme yet, please follow the step-by-step guide on how to create a custom AMP theme<\/a>. Otherwise, proceed to the next step.<\/p>\n\n\n\n

Step 2. Add Template for CSS<\/h2>\n\n\n\n

Create the custom_css.phtml<\/code> file with the following content:<\/p>\n\n\n\n

app\/design\/frontend\/Plumrocket\/[amp_one_custom]\/Plumrocket_AmpTheme\/templates\/custom_css.phtml<\/div>
<?php \/** @var \\Magento\\Framework\\View\\Element\\Template $block *\/ ?>\n<style amp-custom>\n    .basket__count-wrp {\n        background-color: #6600ff;\n    }\n<\/style><\/code><\/pre><\/div>\n\n\n\n
Here we set styles to change the background color of the mini-cart item counter. However, you can change the code for your own purposes.<\/p>\n\n\n\n
Step 3. Apply Styles to Pages<\/h2>\n\n\n\n
At this point, you need to create a layout file to indicate to which pages you want to add the CSS. In the example below, we use the amp_default<\/strong> handle, which is equivalent to the default<\/strong> handle, to add CSS to all AMP pages. <\/p>\n\n\n\n
You should create amp_default.xml<\/code> file with the following content:<\/p>\n\n\n\n
app\/design\/frontend\/Plumrocket\/[amp_one_custom]\/Plumrocket_AmpTheme\/layout\/amp_default.xml<\/div>
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n      xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <body>\n        <referenceBlock name="head.additional">\n            <referenceBlock name="ampcss">\n                <block name="custom.css" template="Plumrocket_AmpTheme::custom_css.phtml" after="-"\/>\n            <\/referenceBlock>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/code><\/pre><\/div>\n\n\n\n
Once the styles are applied, clear the Magento cache<\/a> to see the results on the frontend:<\/p>\n\n\n\n
\"Adding<\/figure>\n\n\n\n
\n
Why CSS are stored in .phtml files?<\/strong><\/p>\n\n\n\n
By default, the CSS are stored in the .css<\/code> files in the Magento application file system. However, due to the AMP technology requirements, we cannot add CSS files directly to AMP pages. Hence, we include CSS code within a <style amp-custom><\/code> tag using the .phtml<\/code> files.<\/p><\/p>\n\n\n\n
Additionally, we store CSS in .phtml<\/code> files to avoid compatibility issues with Magento CSS file delivery. To make it clear, the Magneto platform has its own minification and deploy system of static files that process CSS files.<\/p><\/p>\n\n\n\n
Moreover, a lot of third-party vendors have Magento optimization extensions that also process CSS files and may cause some issues.<\/p>\n<\/div><\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article, we will show you how to add custom CSS to your AMP extension. As an example, we will customize the mini-cart item counter and change its background color. Important Information: We strongly recommend that you make all changes to your custom AMP theme, not to the default AMP Theme One. This way … <\/p>\n
Continue reading “How To Add Custom CSS to Magento 2 AMP Theme”<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[328],"tags":[],"class_list":["post-24058","post","type-post","status-publish","format-standard","hentry","category-magento-amp-v3-devguide","entry"],"yoast_head":"\nHow To Add Custom CSS to Magento 2 AMP Theme - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"In this article, we will show you how to add custom CSS to your AMP extension. As an example, we will customize the mini-cart item counter and change its\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Add Custom CSS to Magento 2 AMP Theme - Plumrocket Documentation\" \/>\n<meta property=\"og:description\" content=\"In this article, we will show you how to add custom CSS to your AMP extension. As an example, we will customize the mini-cart item counter and change its\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-08T10:26:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-18T10:42:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-extension-adding-custom-css-styles-1.png\" \/>\n<meta name=\"author\" content=\"Admin Docs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Admin Docs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Add Custom CSS to Magento 2 AMP Theme - Plumrocket Documentation","description":"In this article, we will show you how to add custom CSS to your AMP extension. As an example, we will customize the mini-cart item counter and change its","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles","og_locale":"en_US","og_type":"article","og_title":"How To Add Custom CSS to Magento 2 AMP Theme - Plumrocket Documentation","og_description":"In this article, we will show you how to add custom CSS to your AMP extension. As an example, we will customize the mini-cart item counter and change its","og_url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles","og_site_name":"Plumrocket Documentation","article_published_time":"2021-09-08T10:26:34+00:00","article_modified_time":"2021-11-18T10:42:33+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-extension-adding-custom-css-styles-1.png","type":"","width":"","height":""}],"author":"Admin Docs","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Admin Docs","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles#article","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles"},"author":{"name":"Admin Docs","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/015cbe7d3eb39051359cab3a634456a2"},"headline":"How To Add Custom CSS to Magento 2 AMP Theme","datePublished":"2021-09-08T10:26:34+00:00","dateModified":"2021-11-18T10:42:33+00:00","mainEntityOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles"},"wordCount":352,"image":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles#primaryimage"},"thumbnailUrl":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-extension-adding-custom-css-styles-1.png","articleSection":["Developer Guide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles","url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles","name":"How To Add Custom CSS to Magento 2 AMP Theme - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles#primaryimage"},"image":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles#primaryimage"},"thumbnailUrl":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-extension-adding-custom-css-styles-1.png","datePublished":"2021-09-08T10:26:34+00:00","dateModified":"2021-11-18T10:42:33+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/015cbe7d3eb39051359cab3a634456a2"},"description":"In this article, we will show you how to add custom CSS to your AMP extension. As an example, we will customize the mini-cart item counter and change its","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles#primaryimage","url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-extension-adding-custom-css-styles-1.png","contentUrl":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/08\/magento-2-amp-extension-adding-custom-css-styles-1.png","width":1206,"height":561},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/adding-css-styles#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 AMP","item":"https:\/\/plumrocket.com\/magento-amp"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-amp"},{"@type":"ListItem","position":4,"name":"v3","item":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3"},{"@type":"ListItem","position":5,"name":"Developer Guide","item":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide"},{"@type":"ListItem","position":6,"name":"How To Add Custom CSS to Magento 2 AMP Theme"}]},{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/015cbe7d3eb39051359cab3a634456a2","name":"Admin Docs","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d6479b5af6eac763e1302ee1354e543e6b78e779b21bffbc4d599470abbaacc2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d6479b5af6eac763e1302ee1354e543e6b78e779b21bffbc4d599470abbaacc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d6479b5af6eac763e1302ee1354e543e6b78e779b21bffbc4d599470abbaacc2?s=96&d=mm&r=g","caption":"Admin Docs"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/24058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=24058"}],"version-history":[{"count":11,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/24058\/revisions"}],"predecessor-version":[{"id":25119,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/24058\/revisions\/25119"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=24058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=24058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=24058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}