We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 32942
    • 141 Posts
    Hey, folks!

    I’v a question.
    Can someone explain me howto create (and if it is sensefull) to modularize the template like this?
    Originally the code looked like this:


    <!-- following is the layer skeleton of the site -->
    ...
    <div id="page_margins">
    <div id="page" class="hold_floats">

    <div id="header">...</div>
    <div id="main">
    <div id="menu">...</div>
    </div>
    ...
    <div id="footer">...</div>

    </div>
    </div>

    ..

    The problem I encounter is that I don’t know how to turn that code to following one:
    <!-- Shows the layer skeleton with layers chosen to be activated and the according template -->
    [!Ditto &tpl=`sample` &showheader=`Yes` &showmain=`Yes` showmenu=`Yes` &showfooter=`Yes`!]
    ^^ ?huh`? howto do that ?

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

    <head>
    [[Metadata]]
    <base href="[(site_url)]" />
    <title>[(site_name)] | [*pagetitle*]</title>
    [[Stylesheets]]
    [[Javascripts]]
    </head>
    <body>
    [!Ditto &tpl=`sample` &showheader=`Yes` &showmain=`Yes` showmenu=`Yes` &showfooter=`Yes`!]
    </body>
    </html>
    [glow=yellow,2,300]
    thanks in advance![/glow]
    I’ll do some accessible templates for the community if ready..4free
      • 25663 MODX Staff
      • 12,272 Posts
      I don’t think that’s the appropriate use of Ditto, but it definitely makes sense to modularize templates. I’m in fact working on a custom template myself for internal custom application interfaces, along the lines of Mollio, but accommodating more types of content and different navigation structure. And mootools.js of course!
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
        • 32942
        • 141 Posts
        I’m actually trying to realize a template like the one in the 1st post and need help with the part where modularization begins.
        It’s no problem I could code sume php stuff for that but..the hard thing is to make it dynamic and flexible.
        It’ll be possible to cache JS and CSS code in mysql this way.

        No need for external files anymore..save it all in the DB =) and the code looks still neat.

        yep, that was just a sample of what I’m planning to do, I don’t know if ditto can handle this (I don’t think).
        however, I’m also devvin a site for a customer..so

        -----
        [[Javascripts]] contains mootools etc. ;-) I just hate to see that plain JS code in my pure xhtml skeleton, external JS is fine, but ie. 10 external scripts make the code look messy also. Thats why sectioning I mean modularization makes sense.
        I don’t want to see anything ’bout JS in my template anymore when I’m finished with JS. so I call it [[Javascripts]] hehe
        -----
        help?
          • 32942
          • 141 Posts
          OK, now !

          I have a really good concept now =))
          just not the time to realize it in time..due to complexity although not that hard, but time consuming.

          GRIDS!!
          aww It’s hard to explain in english..
          gonna try to explain l8ta.
          stay tuned.

          daddy it’z born..the xhtml skeleton..don’t say puh only XHTML1.0.. http://webstandards.org/ recommends XHTML1.0 Strict for SEVERAL reasons..

          <?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

          <head>
          [*Metadata*]
          <base href="[(site_url)]" />
          <title>[(site_name)] \_/ [*pagetitle*]</title>
          [*Stylesheets*]
          [*Javascripts*]
          </head>
          <body>
          <div id="wrapper"><!-- #wrapper: Ebenenhülle -->
          <div id="container" class="ie_floatfix"><!-- #container: Flusskontrollcontainer -->

          <!-- #header: Beginn Kopfzeile -->
          <div id="header">
          [!DataGrid? &tpl=`Navigation` &navigation=`autohide`! &gridcontent=`[*Navigation*]`]
          [!DataGrid? &tpl=`FormLogin` &loginhomeid=`[(site_start)]` &gridcontent=`[*FormLogin*]`!]
          </div>
          <!-- #header: - Ende -->

          <!-- #main: Beginn Inhaltsbereich -->
          <div id="main">
            [!DataGrid? &tpl=`[(site_template)]` &columns=`[(site_columns)]` &gridcontent=`[*Main*]`!]
          </div>
          <!-- #main: - Ende -->

          <!-- #Footer: Beginn Fußeile -->
          <div id="footer">
            [!DataGrid? &tpl=`[(site_template)]` &columns=`[(site_columns)]` &gridcontent=`[*Footer*]`!]
          </div>
          <!-- #Footer: - Ende -->

          </div><!-- #container: - Ende -->
          </div><!-- #wrapper: - Ende -->
          </body>
          </html>
          ^^MAYBE U UNDERSTAND WHAT I’M TRYING TO REALIZE WITH [!DataGrid?....
          else { sad}

          The css for this template is 80% ready, crossbrowser + accessible + tripleA..
          But you can do that css work yourself, it’s not the main problem, just peanuts.

          IT is like trying to explain the function of function of a function of a function of a function ...is the functions xyz..for me.
          ---
          new avatar  wink
            • 19638
            • 39 Posts
            I am not sure i have understand everithing but for modularisation i prefef to use chunks :
            for ex :
            <head>
            {{Metadata}}
            {{Stylesheets}}
            <base href="[(site_url)]" />
            <title>[(site_name)] \_/ [*pagetitle*]</title>
            </head>

            etc...
            Actualy y use one chunks for the head content, the header, the footer and the "blocks" : part of a side-bar (login / menu / lastnews etc.).
            The main advantages is than one chunk can be used in different templates and the main source code is more readable (a sort of Oo xhtml :-p ).
              • 32942
              • 141 Posts
              Using chuncks is OK, but it’s not that easy in this example, because a plugin or snippet needs to fill the placeholders with specific content (ie.: for automatic metatags or sitespecific things).

              So every [*metatadata*] or whatever is an object which has functions that have to decide which content is placed where and when. Remembers me to java...whyever..

              -------------------------
              aww just finished the sketch
              of a project..gonna use ajax
              (+flash) and this example
              boys n’ gals look for the term
              sIFR2 hihii
                • 32942
                • 141 Posts
                @rthrash are you ready with your modular template?
                I am ready except the php part.


                Hey dudez =)

                I got an idea!
                Why not use a hidden comment instead of cookies or by php generated SSIDs??
                Here is an example:
                [*session-id*] is a simple php script that generates in example SHA-1 id’s that are saved in a variable.
                Very simple huh? OK here is the clue, this variables content is saved in a chunk that is a html comment in the header of any site. <!--MODx-SSID:BB4D1540913373FBB79E9E78EB51CC85DBFE1E95-->
                NOW, you only need to code a script, that forbids users to write "<!--MODx-SSID:" and searches any page for this comment and if valid (= same SHA-1 code as in DB) you get access something. This is better, and more secure than storing cookies and far better than the example.com/?PHP-SSID solution.

                I will code this if I have any time. But don’t expect it too early.. I’ve several projects and have to study, so I would be happy if a MODx core coder integrates something like this into MODx by default.
                What’s your opinion about that?

                HOWEVER Here’s finally a quite good template for you hardcore coders!
                I’ll supply you the css if ready, but you can do it yourself also. Just don’t forget about browser bugs and clearing floats.
                [*head*] is a php snippet that saves the title, metatags, javascripts, stylsheets and content aggregation into your pages.
                But you need to code that snippet first ;-)
                ^^ Automaticaly chosen, -Title, -Javascript, -Stylsheet, -Metatag and -rss feeds for your sites.


                <?xml version="1.0" encoding="UTF-8"?>
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
                [*head*]
                [*session-id*]
                <body>
                <div id="page_margins">
                <div id="page" class="hold_floats">

                <!-- #header: Beginn Kopfzeile -->
                <div id="header">
                <!-- #topnav: Hauptnavigation -->
                <div id="topnav">
                [*site_navigation*]
                </div>
                <!-- #topnav: - Hauptnavigation Ende -->
                </div>
                <!-- #header: Ende Kopfzeile -->

                <!-- #main: Beginn Primärer Inhaltsbereich -->
                <div id="main">

                <div id="primary_column mod"><!-- Erste Division -->
                <div class="primary_content mod clearfix"><!-- Erste Division: Inhaltsbereich -->
                [*content_navigation*]
                </div>
                </div>

                <div id="secondary_column mod"><!-- Zweite Division -->
                <div class="secondary_content mod clearfix"><!-- Zweite Division: Inhaltsbereich-->
                <h2>[*longtitle*]</h2>
                [*content*]
                </div>
                </div>

                <div id="tertiary_column mod">
                <div class="tertiary_content mod clearfix"><!-- Dritte Division: Inhaltsbereich -->
                [*page_details*]
                <!-- IE Column Clearing -->
                <div id="ie_clearing"><img class="zerosize" src="1px.gif" alt="hidden 1pixel gif" /></div>
                <!-- Ende: IE Column Clearing -->
                </div>
                </div>

                </div><!-- #main: Ende Primärer Inhaltsbereich -->

                <!-- #Footer: Beginn Fußzeile -->
                <div id="footer" >
                <p><strong>example.com</strong></p>
                </div>
                <!-- #Footer: Ende -->

                </div>
                </body>
                </html>

                  • 25663 MODX Staff
                  • 12,272 Posts
                  I’m still not understanding what you’re wanting to accomplish. With that said, this won’t make it into MODx by default as it’s not something that’s needed by everyone, but there’s no reason why you couldn’t take advantage of it. MODx is a solution framework, not a direct solution. wink
                    Ryan Thrash, MODX Co-Founder
                    Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                    • 32942
                    • 141 Posts
                    hey I mean the SESSION ID part only^^ that may be default some day
                      • 22303 MODX Staff
                      • 10,725 Posts
                      Uh, yeah, I have no idea what this is getting at either huh What would embedding these IDs in a template accomplish? And how in the world is it related to sessions huh

                      I have a strange feeling of fear coming over me...