On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • I have a homepage with several parallax sections, each with a background populated from inline CSS styling. I use MIGX TV to manage the sections. However, inline CSS is not best practice and I would like to create a resource as a CSS file, that when included by a resource, populates the CSS with the MIGX table for that resource. Or whatever is best practice for MODX. I hope I'm being clear, his is what I have.

    Draft Site:
    https://c0092.paas1.tx.modxcloud.com/

    Current inline styling:
    .parallax {
            section.module.parallax-[[+idx]] {
              background-image: url("[[+parallaxImage]]");
              background-position: 50% 0;
              background-repeat: repeat;
              background-attachment: fixed;
              background-size: cover;
              /* background-color: rgba(0,123,255,0.4); */
              background-blend-mode: screen;
              }

    HTML:
    <section class="module parallax parallax-[[+idx]]" data-type="background" data-speed="10">
                        <div class="parallax-container">
                            <h2 class="mx-auto d-flex justify-content-center"><span>[[+parallaxTitle]]</span></h2></span>
                        </div>
                    </section>

    • If I'm understanding you (and I'm probably not), it might make sense to put the CSS into Multiple files, and the filenames or paths to those files into the MIGX TV (or a regular TV).

      Then in the head section of the template, you can do this:

      <link rel="stylesheet" type="text/css" href="[[!*TvName]]"> 



      Another common way to go is to write a custom snippet that evaluates the current conditions (for example, checking the current resource ID), and injects the appropriate CSS file this way:

      $modx->regClientCSS('path/to/css/file');




        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
      • From your code I can assume that only background and class name changes.

        I would do it like that:
        .parallax {
                section.module.parallax {
                background-position: 50% 0;
                background-repeat: repeat;
                background-attachment: fixed;
                background-size: cover;
                background-blend-mode: screen;
        }
        
        <section class="module parallax parallax" style="background-image: url(...);" data-type="background" data-speed="10">
        ...
        </section>
        


        Or
        .parallax {
                section.module.parallax {
                background-position: 50% 0;
                background-repeat: repeat;
                background-attachment: fixed;
                background-size: cover;
                background-blend-mode: screen;
        }
        
        .p-1 {background-image: url(...);}
        .p-2 {background-image: url(...);}
        .p-3 {background-image: url(...);}
        
        <section class="module parallax parallax p-1" data-type="background" data-speed="10">...</section>
        <section class="module parallax parallax p-2" data-type="background" data-speed="10">...</section>
        <section class="module parallax parallax p-3" data-type="background" data-speed="10">...</section>
        


        A good option is also to use javascript to load the right image when parallax comes to viewport. I think that inline CSS for background-image is a good option smiley If you realy want a separate CSS then create a resource with type CSS and generate all backgrunds there. I don't see a point to create a separate CSS for each parallax.

        Basically this is not a modx problem smiley Figure it out what is the best way for you and we can give you advice how to do it in modx.