{"id":10501846,"date":"2018-07-17T15:46:17","date_gmt":"2018-07-17T15:46:17","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/css-doesnt-load-2\/"},"modified":"2018-07-17T19:04:59","modified_gmt":"2018-07-17T19:04:59","slug":"css-doesnt-load-2","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/css-doesnt-load-2\/","title":{"rendered":"CSS doesn&#8217;t load"},"content":{"rendered":"<p>Hello. I&#8217;m using the AMP plugin to build a theme from scratch. I know this is not best practice, but I&#8217;m trying to learn a little bit.<\/p>\n<p>The first issue I encountered is that after activating the AMP plugin, my site looks &#8220;styleless&#8221;.<\/p>\n<p>I&#8217;ve commited the theme as for now in <a href=\"https:\/\/github.com\/AeonFr\/weblike-wordpress-amp-theme\" rel=\"noopener noreferrer\" target=\"_blank\">this github repository<\/a> in order to let anyone play with it and see if their result is the same.<\/p>\n<p>I&#8217;m still gonna try to explain my process:<\/p>\n<p>I&#8217;ve created a new theme and added a few stuff to functions.php, most notably:<\/p>\n<pre>\n# add AMP support\nadd_theme_support( 'amp' );\n\n\/*  ... *\/\n\n# Register styles\nfunction weblike_enqueue_styles(){\n  wp_enqueue_style( 'teutonic', get_template_directory_uri() . '\/css\/includes\/teutonic.css' );\n  wp_enqueue_style( 'weblike', get_template_directory_uri() . '\/css\/main.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'weblike_enqueue_styles' );\n\n\n# Disable admin toolbar\nadd_filter('show_admin_bar', '__return_false');\n<\/pre>\n<p>I&#8217;ve registered two stylesheets: the <a href=\"https:\/\/teutonic.co\" rel=\"noopener noreferrer\" target=\"_blank\">teutonic CSS<\/a> and a main stylesheet with very little code (only one CSS class).<\/p>\n<p>Note: This issue still holds after disabling teutonic. My first though is that teutonic was including some unsupported AMP features (it has a lot of css variables and all text sizes are <code>calc()<\/code>&#8216;d).<\/p>\n<p>Now after doing this, my header.php looks like this (the head tag is almost exactly as the one in this theme I&#8217;m using as a guide: <a href=\"https:\/\/github.com\/xwp\/ampnews\/blob\/develop\/header.php\" rel=\"noopener noreferrer\" target=\"_blank\">ampnews\/header.php<\/a>).<\/p>\n<p>This should make my site AMP right away&#8230; right? (That&#8217;s what I understand the plugin does&#8230; at least)<\/p>\n<p>Yet&#8230;<br \/>\n&#8211; the styles are disabled completely in my site.<br \/>\n&#8211; the most familiar thing with an inline style is this piece of code: <code>&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;\/style&gt;&lt;\/noscript&gt;<\/code> and this one<br \/>\n<code>&lt;style amp-custom&gt;&lt;\/style&gt;<\/code> (an empty script tag)<br \/>\n&#8211; there are no <code>style=&quot;&quot;<\/code> attributes<br \/>\n&#8211; of course, all styles appear inmediately after disabling the plugin<\/p>\n<p>I would post a screenshot but I&#8217;m too lazy to upload it to an external web service :sorry:<\/p>\n","protected":false},"template":"","class_list":["post-10501846","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/10501846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/10501846\/revisions"}],"predecessor-version":[{"id":10501857,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/10501846\/revisions\/10501857"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=10501846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}