How to Add Custom CSS and Script in AMP Pages
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="AMPstyle.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
@import "css/style1.css";
{% include "css/style2.css" %}
</style>
<script type="application/ld+json" src="../Scripts/appjs/StaticCampaigns.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- <link rel="stylesheet" type="text/css" media="all" href="css/initcarousel.css" /> -->
</head>
<body>
<h>AMP Pages Example.</h>
</body>
</html>
I am getting invalid AMP Page when added CSS and script. i am not able to add stylesheet and CSS not working. Custom CSS and Script is not working. please suggest how can i add custom CSS (@import "css/style1.css";) and Script(src="../Scripts/appjs/StaticCampaigns.js") in AMP pages.
html asp.net asp.net-mvc amp-html
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
asked Nov 23 '18 at 9:49
sushilsushil
2018
add a comment |
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="AMPstyle.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
@import "css/style1.css";
{% include "css/style2.css" %}
</style>
<script type="application/ld+json" src="../Scripts/appjs/StaticCampaigns.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- <link rel="stylesheet" type="text/css" media="all" href="css/initcarousel.css" /> -->
</head>
<body>
<h>AMP Pages Example.</h>
</body>
</html>
I am getting invalid AMP Page when added CSS and script. i am not able to add stylesheet and CSS not working. Custom CSS and Script is not working. please suggest how can i add custom CSS (@import "css/style1.css";) and Script(src="../Scripts/appjs/StaticCampaigns.js") in AMP pages.
html asp.net asp.net-mvc amp-html
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
asked Nov 23 '18 at 9:49
sushilsushil
2018
add a comment |
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="AMPstyle.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
@import "css/style1.css";
{% include "css/style2.css" %}
</style>
<script type="application/ld+json" src="../Scripts/appjs/StaticCampaigns.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- <link rel="stylesheet" type="text/css" media="all" href="css/initcarousel.css" /> -->
</head>
<body>
<h>AMP Pages Example.</h>
</body>
</html>
I am getting invalid AMP Page when added CSS and script. i am not able to add stylesheet and CSS not working. Custom CSS and Script is not working. please suggest how can i add custom CSS (@import "css/style1.css";) and Script(src="../Scripts/appjs/StaticCampaigns.js") in AMP pages.
html asp.net asp.net-mvc amp-html
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
asked Nov 23 '18 at 9:49
sushilsushil
2018
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="AMPstyle.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
@import "css/style1.css";
{% include "css/style2.css" %}
</style>
<script type="application/ld+json" src="../Scripts/appjs/StaticCampaigns.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- <link rel="stylesheet" type="text/css" media="all" href="css/initcarousel.css" /> -->
</head>
<body>
<h>AMP Pages Example.</h>
</body>
</html>
I am getting invalid AMP Page when added CSS and script. i am not able to add stylesheet and CSS not working. Custom CSS and Script is not working. please suggest how can i add custom CSS (@import "css/style1.css";) and Script(src="../Scripts/appjs/StaticCampaigns.js") in AMP pages.
html asp.net asp.net-mvc amp-html
html asp.net asp.net-mvc amp-html
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
asked Nov 23 '18 at 9:49
sushilsushil
2018
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
asked Nov 23 '18 at 9:49
sushilsushil
2018
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
edited Nov 26 '18 at 7:38
Vadim Kotov
4,82863549
4,82863549
asked Nov 23 '18 at 9:49
sushilsushil
2018
asked Nov 23 '18 at 9:49
sushilsushil
2018
asked Nov 23 '18 at 9:49
sushilsushil
2018
2018
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
AMP documents require all CSS to be inline in the page head and require you to use the amp-custom property on the style tag. It looks like you're attempting to add an @import statement in the page head which wouldn't be valid even if this wasn't AMP. I'd suggest compiling it first and then copying the contents into the style tags. Keep in mind there's 50,000 byte size limit too.
For example:
<style amp-custom>
h1 {
color: red
}
</style>
As for the script, you're not able to include authored JavaScript in AMP documents. You'll need to look for an equivalent AMP component.
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444224%2fhow-to-add-custom-css-and-script-in-amp-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
AMP documents require all CSS to be inline in the page head and require you to use the amp-custom property on the style tag. It looks like you're attempting to add an @import statement in the page head which wouldn't be valid even if this wasn't AMP. I'd suggest compiling it first and then copying the contents into the style tags. Keep in mind there's 50,000 byte size limit too.
For example:
<style amp-custom>
h1 {
color: red
}
</style>
As for the script, you're not able to include authored JavaScript in AMP documents. You'll need to look for an equivalent AMP component.
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
add a comment |
AMP documents require all CSS to be inline in the page head and require you to use the amp-custom property on the style tag. It looks like you're attempting to add an @import statement in the page head which wouldn't be valid even if this wasn't AMP. I'd suggest compiling it first and then copying the contents into the style tags. Keep in mind there's 50,000 byte size limit too.
For example:
<style amp-custom>
h1 {
color: red
}
</style>
As for the script, you're not able to include authored JavaScript in AMP documents. You'll need to look for an equivalent AMP component.
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
add a comment |
AMP documents require all CSS to be inline in the page head and require you to use the amp-custom property on the style tag. It looks like you're attempting to add an @import statement in the page head which wouldn't be valid even if this wasn't AMP. I'd suggest compiling it first and then copying the contents into the style tags. Keep in mind there's 50,000 byte size limit too.
For example:
<style amp-custom>
h1 {
color: red
}
</style>
As for the script, you're not able to include authored JavaScript in AMP documents. You'll need to look for an equivalent AMP component.
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
AMP documents require all CSS to be inline in the page head and require you to use the amp-custom property on the style tag. It looks like you're attempting to add an @import statement in the page head which wouldn't be valid even if this wasn't AMP. I'd suggest compiling it first and then copying the contents into the style tags. Keep in mind there's 50,000 byte size limit too.
For example:
<style amp-custom>
h1 {
color: red
}
</style>
As for the script, you're not able to include authored JavaScript in AMP documents. You'll need to look for an equivalent AMP component.
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
answered Nov 23 '18 at 14:30
James IvesJames Ives
1,90611535
1,90611535
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444224%2fhow-to-add-custom-css-and-script-in-amp-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
