2

I'm a UX designer with some front end skills (though a complete novice with server config and Craft). I'm hoping someone can help me with something that seems rather basic.

Setup: Mac Book Pro running High Sierra (10.13.5). Using MAMP 4.4.1 (free version) PHP 7.2.1, MySQL, and Craft 3. The site loads in a browser when I visit: http://localhost:8888/.

My craft files are here: Macintosh HD/Applications/MAMP/htdocs/.

The template file in question is here: Macintosh HD/Applications/MAMP/htdocs/templates/_layouts/base.html

In the base.html file, in the head section, I am attempting to link to several CSS files. Here's the entire head section:

<head>
    {% block head %}
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      {% css %}
        <link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/typeplate.css">
        <link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/grid.css">
        <link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/screen.css">
      {% endcss %}
    {% endblock %}
</head>

The CSS files in question are here: Macintosh HD/Applications/MAMP/htdocs/src/css.

The Problem: When I load the home page, the CSS does not load.

Things I've Tried:

  • I've tried removing the siteURL bit, and just hardcoding things instead (like this: http://localhost/src/css/typeplate.css), and I get 404 errors for the 3 css files under the network tab in Chrome developer tools.
  • I've tried removing the {% css } brackets around the stylesheet links, and the network tab in Chrome dev tools just tells me "failed" when the links are hard coded. When the links have {{ siteUrl}} in them, I can see the browser looking for the files at www.mywebsite.com/src/css/typeplate.css. But the files aren't currently there - this is a local dev site only.
  • I've tried changing the dev siteUrl in general.php from "null" to "http://localhost/", and the web page stops loading altogether.
  • I've tried different hard coded URL's, like (../src/css/typeplate.css).
  • I've searched StackExchange for similar problems, but I can't seem to make sense of any of the answers.

Can anyone help? Thank you so much in advance.

|improve this question
  • "I've tried changing the dev siteUrl in general.php from "null" to "localhost"" - try changing that to 'localhost:8888'. If it doesn't load, set 'devMode' => true in your craft/config/general.php file, reload the page and see if you get an error. – Brad Bell Jul 10 '18 at 22:30
  • 1
    Thanks so much for the suggestion, Brad. I tried both things, and the home page will not load. It says "This page isn’t working localhost is currently unable to handle this request. HTTP ERROR 500" – Chris Treadwell Jul 10 '18 at 23:28
  • Strike my previous comment, Brad. I had a syntax problem (forgot the comma at the end of the row!). So, now there's no error. However, I still have the wrong file path, apparently. The browser is looking at localhost:8888/src/css/typeplate.css, and it says 404 for the CSS file in the network tab in Chrome developer tools. And when I put that file path into the browser's address bar directly, I get a craft 404 page that's got a bunch of stuff on it that I can't hardly make any sense of. What would be the file path for my src folder? – Chris Treadwell Jul 11 '18 at 1:16
  • Update: after some searching, I decided to move my src/ folder into the web/ folder, since Craft seems to be looking only there and not at anything above that directory. Then, my CSS links were updated to relative paths like this: src/css/typeplate.css. And that worked. – Chris Treadwell Jul 11 '18 at 1:37
  • Glad you're all sorted, Chris... would you mind adding your solution as an official answer in case it ends up helping someone in the future? – Brad Bell Jul 11 '18 at 23:17
2

After some searching, I decided to move my src/ folder into the web/ folder, since Craft seems to be looking only there and not at anything above that directory. Then, my CSS links were updated to relative paths like this: src/css/typeplate.css. And that worked.

|improve this answer
  • 1
    Glad you found a solution Chris! If you're wondering why many projects have CSS files in the /src folder, it's because often these days, people use an automated workflow to combine and compress multiple CSS/JS files from /src, and then place the result in /web One of the tools for this is called Gulp (there's also Grunt), and nystudio107.com/blog/… gives a great overview of how it works. – James Greig Jul 13 '18 at 5:39

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.