creating unique css on page creation?

Nando's Avatar


01 Nov, 2015 03:25 AM

I'm working on a bootstrap 3 set up and I've given columns the option to upload an background image, pick a background color and/or decide on dark/light font.

I can take all that and put it on the column div with inline styles no problem but I was wondering if there was a way to take that information and update a css file with the information.

I would need to give each column a unique id without having the end user having to input it. Something like a page name and a unique number... but how?

I would then need to take that info and generate a css file...

Possible? A point in the right direction would be appreciated!!

Thanks in advance

  1. 1 Posted by Ryan Griffith on 02 Nov, 2015 07:51 PM

    Ryan Griffith's Avatar


    Off the top of my head, I think the best way to accomplish this "dynamic CSS file" approach would be configure a with a CSS output and use an Index Block and Velocity Format to generate your CSS rules dynamically. Once this page is set up, you can include it on your pages within a <link> tag as any normal CSS file.

    Note: your setup would contain:

    • A template with a single DEFAULT region and the following to avoid XML validation errors
      <!--#cascade-skip--><pass-through><system-region name="DEFAULT"/></pass-through>
    • The format wraps the CSS output with #protect-top code sections

    To summarize, the <pass-through> element within the Template will allow you to work around the "root node" requirement for valid XML, and the #cascade-skip will remove that element on render. The #protect-top within your Format will move your content to the very top, resulting in a plain text file being generated.

    Please let me know if you have any questions.


  2. 2 Posted by Nando on 04 Nov, 2015 03:08 PM

    Nando's Avatar

    Thanks for the info!

    I created an additional output (css) for my page and tied it with an index block/format.

    For the unique IDs I used a count on each for each.

    On the page head, I'm referencing the css file like this:

    #set ($page = $_XPathTool.selectSingleNode($contentRoot, "//calling-page/system-page/path").value)##
    <link href="${page}.css" rel="stylesheet" type="text/css"/>

    is there a better way?

  3. 3 Posted by Ryan Griffith on 04 Nov, 2015 03:32 PM

    Ryan Griffith's Avatar


    To confirm, are we working with the same page and two different outputs? If so, I would recommend using the [system-asset:configuration=OUTPUT_NAME] pseudo tag so Cascade can render the output appropriately and rewrite the link on publish (ie with the .css extension and Destination URL if applicable). Additionally, you may want to add the ?raw parameter after the pseudo tag to tell Cascade you only want the raw output.

    Putting it all together, you can accomplish this quite easily with Velocity and the $currentPage variable:

    <link href="[system-asset:configuration=CSS]${currentPage.path}[/system-asset:configuration]?raw" rel="stylesheet" type="text/css"/>

    Please let me know if you have any questions.


  4. Tim closed this discussion on 19 Nov, 2015 03:31 PM.

  5. Nando re-opened this discussion on 08 Feb, 2016 03:51 PM

  6. 4 Posted by Nando on 08 Feb, 2016 03:51 PM

    Nando's Avatar

    A little late but I just noticed the code above doesn't render inside cascade - when you see the page preview, there are no styles and when check the preview source code the css link is broken...

  7. 5 Posted by Ryan Griffith on 08 Feb, 2016 08:12 PM

    Ryan Griffith's Avatar


    To confirm, does that <link> resolve to the correct location on publish? Assuming your output is called CSS, this should link directly to the raw rendering of that specific output.


  8. 6 Posted by Nando on 08 Feb, 2016 08:12 PM

    Nando's Avatar

    it does, when published its all good.

  9. 7 Posted by Ryan Griffith on 09 Feb, 2016 01:33 PM

    Ryan Griffith's Avatar

    Thank you for confirming.

    Let me try to set this up locally to see if if I can gather some additional information for you. I will be in touch as soon as I have additional information.

    Please let me know if you have any questions.


  10. 8 Posted by Ryan Griffith on 09 Feb, 2016 01:49 PM

    Ryan Griffith's Avatar


    It appears the issue is related to the ordering of the [system-asset] and ?raw. WIth the snippet I provided, the resulting URL was not valid and looked something like:


    After a little trial and error, if you move the ?raw parameter into the [system-asset] tag the resulting URL is correct. When you have a moment, try the following and let me know how it works out:

    <link href="[system-asset:configuration=CSS]${currentPage.path}?raw[/system-asset:configuration]" rel="stylesheet" type="text/css"/>

    Please let me know if you have any questions.


  11. 9 Posted by Nando on 09 Feb, 2016 01:53 PM

    Nando's Avatar

    that works beautifully - thanks Ryan!

  12. 10 Posted by Ryan Griffith on 09 Feb, 2016 02:00 PM

    Ryan Griffith's Avatar

    Awesome, thank you for following up to confirm the adjustment did the trick.

    I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

  13. Ryan Griffith closed this discussion on 09 Feb, 2016 02:00 PM.

Discussions are closed to public comments.
If you need help with Cascade CMS please start a new discussion.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac


26 Aug, 2016 01:19 PM
25 Aug, 2016 03:02 PM
25 Aug, 2016 12:50 PM
24 Aug, 2016 08:43 PM
24 Aug, 2016 07:20 PM
21 Aug, 2016 01:20 PM