We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 11413
    • 203 Posts
    I’m working on a website for a client and the concept is the following :

    The company is offering different services divided in 4 categories. Each category has it’s own color and when the user go from a category to another, the whole website change its color to fit the new section (got an picture?). Everything is working fine for the design itself, but I wanted to know : as the changes from a category to another are mainly using a different set of pictures, I wondered if there was a more efficient way of changing the layout than what I’m gonna do if there is no answer :

    design 5 templates (4 categories + the homepage), design 5 stylesheets and link them with their respective category.

    thanks in advance,

    Blaise
      Blaise Bernier

      www.medialdesign.com - Solutions for small business, hosting, design and more!
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      I presume that the pages for each category are under their own folders in the Document Tree. So create a TV, use @INHERIT, and put it in place of the css file name in the url in the template head.

      Now, edit it for each category folder to return the css file for that section. All documents under that folder will ’inherit’ that filename. Now you’ll only need a css file for each section.

      You can also create dynamic css files by using a document and using snippets or TVs in the css document, but I’m a bit hazy at the moment on how that would work.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 11413
        • 203 Posts
        Nice, that’s the kind of solution I wanted to have! I’m also gonna use the @inherit binding for my side bar (i just found the tutorial on how to use it and what it can do... really nice thing smiley

        Also, I thought about it... there is a file manager in MODx, but it would be nice to have also a file editor (kind of online notepad) or at least a CSS manager where you could easily copy/paste your CSS files just like we do with the templates... using a FTP application just for one file that you often have to adjust is really annoying smiley

        bye and thanks again for your quick reply!

        bye,

        Blaise
          Blaise Bernier

          www.medialdesign.com - Solutions for small business, hosting, design and more!
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          Use a document for your CSS file. When you create it, set it to not use Rich Text, no template, don’t show in menu, (in fact I store mine in an unpublished folder called Stylesheets), and set its content-type to be text/css. Then you can edit it like a regular document.

          There are some issues with IE and friendly URLs, apparently, but there are ways to work around that.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 11413
            • 203 Posts
            Oh god! Nice idea! and to link my template to it ??
              Blaise Bernier

              www.medialdesign.com - Solutions for small business, hosting, design and more!
              • 25663 MODX Staff
              • 12,272 Posts
              Just call it by it’s alias name.
                Ryan Thrash, MODX Co-Founder
                Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                • 28042 ☆ A M B ☆
                • 24,524 Posts
                or just use the usual modx tag [~xx~] where xx is the document ID where you normally put the link to the css file.

                <link rel="stylesheet" type="text/css" href="[~xx~]" />


                or

                <style type="text/css">
                  @import url([~xx~]);
                </style>


                Keep in mind that the urls to images linked to as background images will be different in this css document, they will be assets/templates/MyTemplate/images, since they’ll actually be linked from index.php.

                another neat thing about this is that it gets parsed just like any document, which means you can put snippets or TVs to have variable and dynamic css!
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org
                  • 11413
                  • 203 Posts
                  Yeah! This is exactly what I had in mind.. a single CSS for a whole website changing its content as needed! Pretty neat! And talking about that, would it be possible to pass some arguments to that ’parsed’ CSS file with GET attributes? like :

                  <link type="text/css" rel="stylesheet" href="[~123~]?sitesection=1&otherargs=somevalue&etc=etc" />

                  If yes, how to get these arguments from inside my page?? In pure PHP there wouldn’t be any trouble... but with MODx, i never did that.

                  Thanks in advance!

                  Blaise
                    Blaise Bernier

                    www.medialdesign.com - Solutions for small business, hosting, design and more!
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    Snippets and TVs take the place of <?php ... ?> php tags in your template and in your documents. TVs are more flexible, since you can edit them for each page.

                    So you could create a style for a certain tag, and instead of specifying a color (for example) you would put the TV tag [*color*], which would have a default value when you create it as a new TV, but you can edit it for any page where you want it to be a different value.

                    It’s really great for using different background images in different sections of your site. Or you could even have it return random images taken from a specified folder (in the filesystem), and specify a different folder full of images to pick from for each section. For example, random product images for your products section, random images of your office and people for your about us section, etc. Really, the opportunities are limited only by the imagination.

                    As far as MODx goes, yes, since it goes through the parser the GET values would be available to any snippets or TVs. But I’m not real sure how the web server or the browser would deal with a css file with arguments. I suppose you’d just have to run it up the flagpole and see if they salute it.
                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 11413
                      • 203 Posts
                      Really, the opportunities are limited only by the imagination.
                      This is what i’m discovering! At first I was not sure of the real use of the TVs, but nowthat I had to use it, I found a whole enw range of uses! I’m still not sure how the widgets work, but I don’t need them for the moment... I’ll think about that later!

                      Still about TVs (it’s hard to be a newbie, sorry forr all the "chain-questions" wink)... I’m using a checkbox list to select wich elements will be in my side bar. I made a chunk for every element and I use a set of values like this : "section1=={{section1chunk}}||section2=={{section2chunk}}||etc..."

                      then, in the default value, I use : "@inherit {{section2chunk}}||{{section3chunk}}||{{section4chunk}}" etc.

                      It works well, bt there is a small problem : the default value is correct when viewed from the outside.... but when you edit the document, even if the first chunk (section2chunk) is visible it’s not selected while all the others are... What is wrong with my stuff? Here is the exact content of the TV :

                      Options :

                      Accueil=={{section_accueil}}||Classique=={{section_classique}}||Pop et Jazz=={{section_pop}}||Conférences=={{section_conferences}}||Arts visuels=={{section_arts}}
                      


                      Default value :

                      @inherit {{section_classique}}||{{section_pop}}||{{section_conferences}}||{{section_arts}}


                      As you can see, it’s a french website smiley The result of this is that I get 5 checkboxes with the good titles. visually, I get the 4 elements I want in my sidebar, but only the last 3 are checked when I edit the TV for the page.

                      thanks a real lot in advance,

                      Blaise
                        Blaise Bernier

                        www.medialdesign.com - Solutions for small business, hosting, design and more!