Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Adding Links to CSS in customised theme

Go to End

6 Posts   2191 Views


Community Member, 7 Posts

12 October 2009 at 9:31am

Hi all,

I'm a new user to SS but loving it so far, it seems to be perfect for multiple sites I host.

I have started writing my current websites themes and got everything working appart from one thing;

I cannot for the life of me get it to find image links to work in the CSS, I'm pretty sure its a syntax problem..

I'm currently storing them in


and addressing them in the CSS as the guide states as

background: #fff url('$ThemeDir/images/intro.jpg') no-repeat;
(for example)

I was wondering if anyone could correct me on the correct way to do this please?

Thanks in advance to any help, I'm looking forward to using SS ^^


Community Member, 191 Posts

12 October 2009 at 11:06am

assuming: themes > your theme > css, images, templates

background: #fff url('../images/intro.jpg') no-repeat;


Community Member, 7 Posts

12 October 2009 at 2:05pm

Thanks, thats exactly what i did in the end. I'm still not sure how the tutorial intends it to work, but it works fine that way :)


Community Member, 323 Posts

13 October 2009 at 3:00am

Could you please point to the page of the guide stating that you can use $ThemeDir in a CSS file? I can’t believe it.



Community Member, 191 Posts

13 October 2009 at 6:44am

Edited: 13/10/2009 6:48am

There's info in the API and I just learned something new. :-)
You can use that in your files.

ThemeDir (line 859)
Returns the root directory of the theme we're working with.

This can be useful for referencing images within the theme. For example, you might put a reference to <img src="$ThemeDir/images/something.gif"> in your template.

If your image is within a subtheme, such as mytheme_forum, you can set the subtheme parameter. For example, <img src="$ThemeDir(forum)/images/something.gif">


Community Member, 7 Posts

13 October 2009 at 8:02am

Yes, after a bit more learning (and developing) I now see I totally misunderstood its purpose, its for use in .ss only and not all ss files as I thought!

So the tutorial is perfect I just need my brain checking! Sorry for the false alarm