1

So I am making a new craft cms website, I have my page entries linked to the template pages/_entry.html, which works fine. I then made another type of pages called news, linked to the template news/entry.html. Both of them have {% extends "_layout" %} to get a common layout and the css styling. when I click preview, the page entries work (including css) but the CSS of news entry doesn't show up, it simply goes to the default styling (which is no styling). I tried making both the news and page entries have their templates linked to pages/_entry.html, and once again, only the page entries show up with proper css styling but not the news entry. I tried this with a product in craft commerce as well, and the same happened where no styling would be present. I even tried switching both news and page entries to news/entry.html but with no luck, I get the same result.

Is this a bug with craft cms or am I doing something horribly wrong?

both pages/_entry.html and news/_entry.html only have {% extends "_layout" %} for now to troubleshoot this process. In my _layout.html I have {%includeCssFile "css/main.css"%} to link to my css file.

Improve this question
2
  • 1
    How do the URLs or your 2 sections "pages" and "news" look like? I guess it is just a relative path problem to your css file.
    – Matthias Redl-Mann
    May 30, 2021 at 17:32
  • @MatthiasRedl-Mann my URL for "pages" looks like: Entry URI Format: {slug} Template: pages/_entry my URL for a product page looks like: Entry URI Format: shop/products/{slug} Template: pages/_entry my URL for "news" page looks like: Entry URI Format: {postDate.year}/{slug} Template: pages/_entry all three of them point to the same template, but only the "pages" have the proper CSS displayed, the rest have no CSS
    – Steven Zhang
    May 31, 2021 at 11:07

3 Answers 3

Reset to default
3

Why use includeCssFile at all for your core CSS? Typically you'd use that for injecting template-specific CSS files (e.g. carousel scripts) that you don't want to load on every page. (The advantage is that you can call that includeCssFile function in deeply nested templates without worrying about template inheritance or whether another partial has already included that CSS file).

So in short, just use a normal <link rel="stylesheet" href="/css/main.css"> for your core CSS file.

Improve this answer
3
  • I tried this and it didn't make any difference unfortunately
    – Steven Zhang
    Jun 2, 2021 at 11:20
  • If that doesn't work, then really your problem is nothing to do with Craft.
    – James Smith
    Jun 8, 2021 at 12:02
  • This is the correct answer IMO. FYI includeCssFile is being deprecated as of Craft 3 so you'd want to replace with do view.registerCssFile as well.
    – RitterKnight
    Jun 9, 2021 at 13:11
1

Can you please try {%includeCssFile "/css/main.css"%} (prepend with a /)

Improve this answer
4
  • I changed {%includeCssFile "css/main.css"%} in my _layout.html template file to {%includeCssFile "/css/main.css"%} but now none of my web pages have css styling anymore, including my home page which worked before
    – Steven Zhang
    May 31, 2021 at 13:43
  • your CSS file is located in <projectRoot>/web/css/main.css. can you confirm that?
    – Matthias Redl-Mann
    May 31, 2021 at 15:26
  • Yep! my CSS file is in web/css/main.css
    – Steven Zhang
    Jun 1, 2021 at 1:47
  • OK, no clue why it does not work, but it must be something very obvious we are missing here. Without seeing this on a public server I can not go further into detail. If you want, you can send me a public URL via E-Mail at mr@getdesigned.at and I will have a look...
    – Matthias Redl-Mann
    Jun 1, 2021 at 5:59
0

ok so after quite a few days, craft then updated and now it works. I didn't really do anything to fix it it just worked after updating

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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