We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 33988
    • 110 Posts
    Hi all,
    I’m doing a little survey about the different approaches to building MODX templates and would love to hear input from everyone possible. But first a few guidelines:

    • Please read what others have written before posting in case you duplicate an idea. Also avoid posting to say you agree or disagree unless you also include justification or a better method in your post.
    • Explain the approach you take when converting a HTML template into a MODX one.
    • Try to include as much detail as you can about how you decide what TVs to create and how to chunk things off (especially important for sites with more than 1 similar template).
    Hopefully we can all improve our template creation skills through this.
      Sal Sodano
      President & Co-Founder of SkyToaster
      My Website Salscode.
      • 21838
      • 284 Posts
      So generally my setup is in github with my MODX-Boilerplate.
      Additionally I usually set up several TVs and chunks for conditional content.
      TVs for client editing, chunks for fix code (maybe localized, too).
        MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)
        • 1169
        • 312 Posts
        I usually use Chunks for Head, header and footer.

        TV’s for extra columns, JS and client specific needs.

        Just about to embark on some Blog style templates for MODX general release.

        Trying to decide if it is best to create one combined template or separate for my first attempt at a HTML5 template.
        I have added the ability to change the color scheme with the use of less.js and the color selection from a system site variable. Details in my signature.

        EDIT
        Trying to decide how to layout my file structure for using both Packman and github for Template publishing. (Packman does not require chunk and snippet folders I use on github.)
          DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31
          • 34162
          • 1 Posts
          This is really layout dependant how to approach the template phase but in general I do these steps ... These are what I do, not something everyone should do smiley but might be good to do wink


          • If images to slice, slice them. Think bit a head for the integration.
          • Start to build the template, first off html base and stylings. Do not create too "loose" stylings, in simple terms. Pretty strict css selectors so if something new is added. You don’t need to go back and revert some code. Check that everything works without Javascript. No integration at this point.
          • Build the JS if ui has something fancy effects coming from it
          • Integration phase,
            [list]
            [li]Create $header, $sidebar(s) (if there is sidebar(s)), $footer chunks. Sometimes I’ve done few separete headers etc. if layout changes drastically I have duplicates where to do template specific calls.
          • Copy paste all the html, clean out static content and change all to MODx tags/snippets/chunks
          • Do the required chunks for extras, modify/add stylings if required
          • Bring in the javascripts
          [/li]
          [li]Test, test, test and fix fix fix[/li]
          [/list]

          Probably forgot quite lot of stuff. But that’s pretty accurate in general level. This is excluding custom snippets coding etc... Just thinking of the front-end requirements. MODx has cut me quite lot of time compared to CMS’s I used before. Usually had to start integration to CMS somewhere close 60% of html/css done. Now I can start pretty much close to point where html/css and is fully done before integration.

          EDIT! I dont use any html/css frameworks if someone asks
            • 32360
            • 16 Posts
            I always use chunks for header, sidepanel, footer , navbar and such.
            Then i also create a tv in the head and call it xtraScript. The intention with this one is to be able to add some extra jquery on a page. I also create a tv in the body tag. Making sure i can style the pages differently if i need to.

              [url=http://www.williamastrom.se]Webdesign and CMS developer William