Home → Velocity Formats →

creating unique css on page creation?

• Edit

Nando

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

   

   Hi,

   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.

   Thanks!

   • Edit

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

   

   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)##
   
   #if($page.contains("_cascade"))##
   #else##
   <link href="${page}.css" rel="stylesheet" type="text/css"/>
   #end##
   

   is there a better way?

   • Edit

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

   

   Hi,

   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.

   Thanks!

   • Edit

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

   

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

   • Edit

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

   

   Hi,

   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.

   Thanks!

   • Edit

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

   

   it does, when published its all good.

   • Edit

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

   

   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.

   Thanks!

   • Edit

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

    

    Hi,

    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:

    /entity/open.act?type=page&id=c641b725c0a801ee040fb45f745418cc&confId=c6409b52c0a801ee040fb45fe9e9a1ce?raw

    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.

    Thanks!

    • Edit

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

    

    that works beautifully - thanks Ryan!

    • Edit

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

    

    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!

    • Edit

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