4

I'm a newbie to Craft and am working with a raw version of Craft CMS 2.6.2903 on localhost and am trying to understand some of the basics. The problem that I am encountering at the moment is to do with the Twig includeCssFile command.

I want to create a folder that will contain all my CSS details, so I went to _layout.html and moved all the CSS script from between the style tags into a new script which I saved at craft/templates/styles/index.css. I then deleted the style tags from _layout.html.

I added this line to the <head> section of the _layout.html script:

{% includeCssFile "styles/index.css" %}

So that the <head> section looked like this:

<head>
<meta charset="utf-8" />
<title>{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}< /title>
<link rel="home" href="{{ siteUrl }}" />
{% includeCssFile "styles/index.css" %}
</head>

and once again the Home page worked perfectly.

The problem occurred after I moved the whole styles folder up one level (i.e. to the same level as the templates folder).

I changed the calling code to {% includeCssFile "../styles/index.css" %} and refreshed the home page and had lost all the page styling. I played around with removing the '../' and changing it to './' and even '/' but it still didn't work. When I returned the styles folder to the templates folder, it all worked okay again.

There have been a couple of similar questions already posted on this group, but they haven't resolved my problem (link 1, link 2)

Can someone please tell me what I need to do?

Community
  • 1
Crafty Cockney
  • 83
  • 7

2 Answers2

3

Whenever Craft receives an URL request, it tries to figure out what resource to serve the client. Among other things, it'll look inside your templates folder and try to find the requested resource there – which is why a request to styles/index.css works if that file exists inside your templates folder. However, Craft only looks at files in your templates folder when it evaluates the request URL, nowhere else – which is why ../styles/index.css doesn't work.

In any case, it's usually a bad idea to serve external resources (CSS, JS files etc) from outside your public web root. If you can, put your CSS and JavaScript files somewhere in your public root directory, and make sure you're not using relative URLs for {% includeCssFile %} – i.e. you should use {% includeCssFile '/styles/index.css' %} if you have a folder called styles in your public web root (alongside your index.php file).

Another option is to inline your CSS files, in which case you can put the files whereever you want. I recommend the Inlin plugin for all your inlining needs:

<head>
    <style>
        {{ craft.inlin.er('styles/index.css') }}
    </style>
</head>

If you want to inline files without a plugin, you can use the Twig source function – outlined in this answer.

Community
  • 1
Mats Mikkel Rummelhoff
  • 22,361
  • 3
  • 38
  • 69
  • 1
    Thank you @Mats. I placed the styles folder inside the public folder and used this line

    {% includeCssFile "public/styles/index.css" %}

    to 'call' it.

    Worked like a charm.

    Thanks also for the 'inlin' plugin info as well.

     – Crafty Cockney Aug 14 '16 at 14:47
  • 2
    No problem, happy to help out. It might be obvious, but it's also worth mentioning that you don't have to use includeCssFile to add an external stylesheet to your markup – a plain old, hard coded <link> tag will do just fine (one of the best things about Craft is that it makes no assumptions about your front end). The primary use case for includeCssFile is when you want to include a CSS file from inside a {% block %} tag or an included template partial. – Mats Mikkel Rummelhoff Aug 14 '16 at 18:21
  • Re 'plain old hard code' - You know what it's like when you've got the chance to use some exciting new (Twig) code. You just 'medically' need to use it :)

    The only problem I have with accessing the CSS code via the 'new' method is that when I do a 'Live Preview' within 'Entries', all the CSS code is lost. When I hard-code the CSS code into '_layout.html' (as per original setting), the 'Live Preview' works fine. However, when I use a full URL like this {% includeCssFile http://localhost/sitename/assets/styles/index.css %} the Live Preview works fine.

     – Crafty Cockney Aug 15 '16 at 00:45
  • To resolve my own problem above, this link solves everything. Just place it in the craft/config/general.php script and use it like this <link rel="stylesheet" href="{{ siteUrl }}assets/styles/index.css">. However, I cannot get it to work in conjunction with the includeCssFile command. – Crafty Cockney Aug 15 '16 at 01:47
  • @CraftyCockney i just stumbled across this question and solved your problem by using {% includeCssFile siteUrl ~ "assets/styles/index.css" %} – GlabbichRulz Mar 30 '18 at 14:20
1

In regards to the includeCssFile issue, I was able to get siteUrl to work by using {% includeCssFile siteUrl~"css/application.css" %}.

royalenfield
  • 11
  • 2