Jump to:

3444 Posts in 1030 Topics by 871 members

Template Questions

SilverStripe Forums » Template Questions » <% require %> custom CSS

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

Page: 1 2
Go to End
Author Topic: 4330 Views
  • chrisdarl
    Avatar
    Community Member
    33 Posts

    <% require %> custom CSS Link to this post

    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

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: <% require %> custom CSS Link to this post

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

  • chrisdarl
    Avatar
    Community Member
    33 Posts

    Re: <% require %> custom CSS Link to this post

    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.

  • chrisdarl
    Avatar
    Community Member
    33 Posts

    Re: <% require %> custom CSS Link to this post

    Any ideas anyone?

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: <% require %> custom CSS Link to this post

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

  • chrisdarl
    Avatar
    Community Member
    33 Posts

    Re: <% require %> custom CSS Link to this post

    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

  • Hamish
    Avatar
    Community Member
    712 Posts

    Re: <% require %> custom CSS Link to this post

    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
    }

  • chrisdarl
    Avatar
    Community Member
    33 Posts

    Re: <% require %> custom CSS Link to this post

    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?

    4330 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.