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.

Customising the CMS /

Adding Links to CSS in customised theme


Reply


6 Posts   1446 Views

Avatar
CHKM

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

theme_name/images

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 ^^

Avatar
socks

Community Member, 191 Posts

12 October 2009 at 11:06am

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

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

Avatar
CHKM

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 :)

Avatar
Juanitou

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.

Regards,
Juan

Avatar
socks

Community Member, 191 Posts

13 October 2009 at 6:44am

Edited: 13/10/2009 6:48am

There's info in the [url=http://api.silverstripe.org/sapphire/view/ViewableData.html]API[/url] and I just learned something new. :-)
You can use that in your template.ss 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">

Avatar
CHKM

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