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've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

<% require %> custom CSS


Go to End


14 Posts   6455 Views

Avatar
chrisdarl

Community Member, 33 Posts

16 April 2009 at 4:51am

Edited: 16/04/2009 5:04am

Hi there,

I'm trying to use <% require customCSS() %> in my .ss template to add a image selected in the CMS as a background image to my div element. I'm using the following code, but it doesn't seem to be working :

<% require customCSS( .left-block-2 { background : url($LeftBlock2_Image.URL); } ) %>

I've also tried:
<% require customCSS( .left-block-2 { background : url($Top.LeftBlock2_Image.URL); } ) %>

Any ideas anyone?

Thanks in advance,
Christopher

Avatar
Carbon Crayon

Community Member, 598 Posts

16 April 2009 at 5:26am

Hi Chris

Does it give you anything in terms of the CSS or does it just not include any css at all? Are there <style> tags included?

If you want a quick fix you could just include it inline in the actual DOM element style="background : url($LeftBlock2_Image.URL)"

Avatar
chrisdarl

Community Member, 33 Posts

16 April 2009 at 5:51am

Hi Aram,

if i put something like :

<% require customCSS( .left-block-2 { background : red; } ) %>

I get <style> tags in my head tag, with the CSS Code inside.

When I put either of the previous code, I don't get any style tags in the head or body.

Sadly I cannot use style attribute because that breaks W3C validation.

Avatar
chrisdarl

Community Member, 33 Posts

23 April 2009 at 2:26am

Any ideas anyone?

Avatar
Carbon Crayon

Community Member, 598 Posts

23 April 2009 at 4:29am

Hi Chris

Sorry I didn't get back to you I forgot to subscribe and missed your followup :)

Do you actually need to require this? Can you not just put the <style> directly into the template, that should work find. As it is I don't think you will manage to get the image url within the <% require %> context.

If I were you I would just go with:

<style>
.left-block-2 { background : url($LeftBlock2_Image.URL);}
</style>

I can't see any real reason not to do it that way.....

Avatar
chrisdarl

Community Member, 33 Posts

23 April 2009 at 7:17am

The reason I'm wanting to use the require feature because of W3C validation of xHTML Strict pages doesn't allow <style> in the body.

No solution to this then? Perhaps I may need to write my own method in the page_controller

Avatar
Hamish

Community Member, 712 Posts

23 April 2009 at 10:37am

No solution to this then? Perhaps I may need to write my own method in the page_controller

Yeah, if you just throw it into the page_controller init() method, it should work fine.

eg:

function init() {
   parent::init();
   // custom page css requirements here   
}

Avatar
chrisdarl

Community Member, 33 Posts

23 April 2009 at 11:07am

Do you think that this should be something that silverstripe should support? I imagine it's pretty essential for people that want completely valid W3C websites?

Go to Top