Take the 2-minute tour ×
Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. It's 100% free, no registration required.

When I navigate to [home]/news/2014/poster my relative links to stylesheets break. I am using:

<link href="css/myStylesheet.css" rel="stylesheet">

How do I stop these links breaking in this scenario?

share|improve this question
add comment

2 Answers 2

up vote 7 down vote accepted

The links aren't working because that's a relative URL, from whatever the last "directory"-looking segment in your page's URL is.

To resolve this, you can either make your URLs root-relative:

<link href="/css/myStylesheet.css" rel="stylesheet">

Or relative to the site URL:

<link href="{{ siteUrl }}css/myStylesheet.css" rel="stylesheet">

The drawback to root-relative URLs is, it makes your site a little less portable - you'll only be able to install the site in a web root (no subfolders) without having to update all URLs.

If this is a localized site with multiple site URLs, then both solutions could have issues. In that case it might make sense to define your own custom config setting in craft/config/general.php:

'baseResourceUrl' => "http://example.com/",

Then call glad from your templates instead of siteUrl:

<link href="{{ craft.config/baseResourceUrl }}css/myStylesheet.css" rel="stylesheet">
share|improve this answer
    
Thanks for adding the config settings for localized sites, Brandon. Wasn't quite sure if I encountered problems because me redefining siteUrl with define('CRAFT_SITE_URL', '{siteUrl}en/'); in en/index.php. Additional question: is the "new" technique to set siteUrl with an array 'siteUrl' => array('de' => 'http://example.com/', 'en' => 'http://example.com/en/') preferable? –  Christian Seelbach Jun 26 at 10:42
    
Thanks Brandon. I thought of the 'baseResourceUrl' option but thought there might be a simpler solution. –  blairrorani Jun 26 at 18:11
    
@ChristianSeelbach Yes the new siteUrl config setting is a better way to define locale-specific URLs than defining CRAFT_SITE_URL constants. With the config setting, Craft will know what an entry’s URL is in all locales, so “Share” links will always be correct, for example. –  Brandon Kelly Jun 26 at 19:19
1  
@BrandonKelly Not to be a jerk, but there's a typo (baseReaourceUrl) in the third code block I can't edit. People like me copy those things and become confused later. –  Matt Stein Jun 27 at 17:35
    
@MattStein thanks! –  Brandon Kelly Jun 27 at 20:27
add comment

You need to make the url absolute, or relative to the root. The url() function will help you to keep this maintainable.

{{ url('assets/build/css/main.css') }}

This will prepend the {{ siteUrl }} to the path, so if you move the site later, or are running in a multi environment setup, the path will be updated.

share|improve this answer
3  
A word of warning about url(): it is subject to whether Craft thinks the server supports index.php redirecting, even if you're only pointing it to a static file. So only use it with static file URLs if you've set the omitScriptNameInUrls config setting to true. –  Brandon Kelly Jun 26 at 9:49
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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