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.

Template Questions /

<% require %> custom CSS


Go to End
Reply


14 Posts   4495 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