We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 53414
    • 34 Posts
    Trying to create a template for my home page. I have 2 examples as are below.

    The 1st one
    Template_developer
    works but has a lot of embedded css & stuff I'm unsure what all of it does.

    example: <div class="content-area content-right col-md-9 col-sm-8 col-sm-8">

    I'm not too up on css and don't know why we have all these div classes? Can I put this in a Snippet or should I embed in the template. I really need a guide to css.

    The 2nd one
    TemplateHome
    was made by me but doesn't work.

    Ideally the Home will have three menus; one at top and two at left. I plan to use WayFinder for this but will try to get the Home page working first.

    ===============================================
    Template_developer --this one works
    Modx Template examples.odt

    /* BaseTemplate Code */
    /* vv setup by Developer */

    [[includeTemplate? &tpl=`header_devel.html`]]
    [[*pagetitle]]
    [[*content]]
    [[includeTemplate? &tpl=`footer_devel.html`]]


    TemplateHome -- by me doesnt work tho
    /* BaseTemplate Code from book */

    [[$header_jk_html]]
    [[*longtitle]]
    [[Wayfinder? &startId=`0` &level=`2`]]
    [[*content]]
    [[$footer_jk_html]] [ed. note: julius nepos last edited this post 5 years, 10 months ago.]
      • 3749
      • 24,544 Posts
      The divs are so their content can be positioned and styled using CSS, which contains definitions of what to do with the various classes in the opening div statement. I think your example also handles things differently depending on the screen size using media queries in the CSS. HTML code normally goes in a template, or sometimes in a chunk pulled into a template with a chunk tag. It's *not* appropriate for snippets, which contain pure PHP code.

      Your own Home template looks fine to me, assuming that it has opening and closing html, head, and body tags and that your code is inside the body section. Can you explain how it's not working?

      FYI, uploading screenshots no longer works in the Forums. You need to save the image(s) somewhere else and give a link to them.

      Another tip: When you're showing code (HTML, CSS, JavaScript, or PHP), highlight it and click on the code icon, <> in the bar above the message editor. It will preserve its formatting and make it easier to read .

        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
        • 53414
        • 34 Posts
        Quote from: BobRay at May 11, 2018, 04:52 AM

        Your own Home template looks fine to me, assuming that it has opening and closing html, head, and body tags and that your code is inside the body section. Can you explain how it's not working?

        It gives an http 500 error; www.coinsandhistory.com is currently unable to handle this request.
        HTTP ERROR 500

        Actually I've always been able to post pictures here but the forum trims them to ~900 pixels across. Thus I cut them in half and post the right half below the left since the orig image size is ~1800 pixels across.

        My latest TemplateHome which gives the http500 error.
        The files header_jk_html and the other one exist as Chunks in the top level of the Chunks directory. I commented out the Wayfinder call as I haven't bothered configuring it yet but that didn't help. Also commented out most of the lines, and stuck the code in the http://www-db.deis.unibo.it html tester where it displayed correctly. Of course the tags [[*content]] & etc displayed the tag names rather than doing the call. It only doesn't work with my website.

        /* BaseTemplate Code from book */
        [[$header_jk_html]]
        <html>
            <head>
                <title>[[++site_name]] - [[*pagetitle]]</title>
                <base href="[[++site_url]]" />
            </head>
        <body>
            <h2>[[*longtitle]]</h2>
            <!-- [[Wayfinder? &startId=`0` &level=`2`]] -->
            [[*content]]
        </body>
        </html>
        [[$footer_jk_html]]





        [ed. note: julius nepos last edited this post 5 years, 10 months ago.]
          • 46886
          • 1,154 Posts
          You do have some pages working right? You could start with that template (you can duplicate it and play with the copy), attach a resource to it, and open the resource to see how things are working.

          For every little piece it has the danger to break everything. So for a Wayfinder call, you need a working webpage to put it in. If the page isn't working, then the call isn't going to help. Its certainly possible that a call like that could mess things up if done wrong, but we have to mitigate potential causes of the error. In this case, by the way, the wayfinder call calls to ID=0, which is going to return an error.

          Let me break down the parts of the page:

          <head> this is important stuff like your site's name and info for google, javascript goes in here and some calls to your css file or other local files.

          <body> this is the main part, what you see when it opens.

          Now, I think the biggest problem you have here are the two matching calls to chunks I guess:
          [[$header_jk_html]]
          [[$footer_jk_html]]

          The first problem is I am almost sure they need to be inside the <html> or <body> tags, as BobRay said. The html is the webpage, I guess, with some technologies contained inside.

          I suspect you may want to try something more like this:

          /* BaseTemplate Code from book */

          <html>
              <head>
                  <title>[[++site_name]] - [[*pagetitle]]</title>
                  <base href="[[++site_url]]" />
              </head>
          <body>
          [[$header_jk_html]]
              <h2>[[*longtitle]]</h2>
              <!-- [[Wayfinder? &startId=`0` &level=`2`]] -->
              [[*content]]
          [[$footer_jk_html]]
          </body>
          </html>
          


          And if it works, then take the comments off of Wayfinder and change the call to the right ID, see if it works, but you might need to make a <div> or a <li> for wayfinder

          It takes time, but you will learn to distinguish the characteristics of the different code. Like, html has stuff like

          You might want to read a bit about the CSS box model https://hackernoon.com/css-box-model-45ecf4ac219e

          What I think you will do finally is make a <div>, place it where you want it, and let the wayfinder output sit right inside
            • 53414
            • 34 Posts
            Quote from: nuan88 at May 11, 2018, 08:33 PM
            You do have some pages working right?
            Yes, using the a Template called "Home_mangeled" I finally got the Home page to load. I know there are 2 good Youtubes out there by Alienbuild and Jesse Showalter on Modx Templates & I've watched them many times. They tend to import a large Theme into a modx Template, copy over all the css and java files & things and with a few clicks get it working in Modx. I however, would like to know exactly what everything in my Template does.

            The Header and Footer Chunks seem to work even when called from outside of the Body. I did change the name of the Header & Footer in this version tho. From my experience, it seems that Templates do not like the comment command <!-- comment -->

            I am now trying to get the Wayfinder menu to work. My template {works !} now looks like:
            <!DOCTYPE html>
            <html>
            <!-- BaseTemplate Code from book -->
            [[$header_NN_html]]
             <head> 
                  <title>[[++site_name]] - [[*pagetitle]]</title>
                  <!-- this displays the name and title in the small browser tab -->
                   <base href="[[++site_url]]" />
            </head>
            <body>
                <width = 80>
                <h2>[[*longtitle]]</h2>
                </width>
                [[*content]]
                
            <nav id="menu_top">
               [[pdoMenu?
                &parents=`40`
                &depth=`2`
                &tpl=`@INLINE <a href="[[~[[+id]]]]>[[+pagetitle]]</a>`
               ]]
            </nav>
            
            </body>
              [[$footer_NN_html]]
            </html>
            


            I'm going back to Wayfinder from pdoMenu. I believe I need a Chunk called rowTpl & a Chunk called outerTpl wf.wrapper & wf.class stuff in it. Also my webpage runs the full width of the screen with 0 margins. Thus there may be no room for a menu even if I get one working. I'll attach a screenshot. I need to know how to put the content into something (not a table) so it doesn't run full width.


              • 3749
              • 24,544 Posts
              The $header tag should be below the opening body tag.

              Then you can do something like this in your CSS:

              body {
                  width:80%;
                  margin:auto;
              }
                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
                • 17301
                • 932 Posts
                Rather than trying to design, develop and integrate into CMS all at the same time you're best off adopting a more professional approach.

                Design -> Front End -> Integration -> Back End

                Once you have your website designed or wireframed you can go ahead and start developing the front end. If you're new to HTML/CSS then i'd strongly suggest checking out a framework like bootstrap which will help you setup columns and containers quickly, along with a bunch of helpful classes.

                When you have your website coded and looking and working statically how you want it to then follow the youtube tutorial of templating the html markup into MODX.

                By following this process you'll find the entire thing a lot easier and quicker.
                  ■ email: [email protected] | ■ website: https://alienbuild.uk

                  The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
                  • 46886
                  • 1,154 Posts
                  Well LK, we all get there at our own speeds, but its still good advice smiley

                  But, he may be better for now working with the existing template himself. He will want to understand a bit about how bootstrap works and what it does, his site is using something like bootstrap, I couldn't say which framework exactly.

                   I however, would like to know exactly what everything in my Template does.


                  Absolutely, 100%. I was at that stage once myself. Go ahead and get used to the CSS, its mostly readable once you get used to it. Keep in mind for anything with a color, you could check the color and perhaps know where that element is.

                  CSS is where you can do things like make it all look right, including stuff like color and shading, but also positioning. Keep in mind usually we need a site that will reduce to a phone size but also look nice on a wide monitor, so there have to be rules (called media queries) for different sizes. That's where bootstrap comes in, it lets us do that fairly easily.

                  HTML is about making divisions in certain places and putting stuff in the "boxes", but CSS will help with positioning them right and making them look decent. The box model will be important to understand, that's the link I gave you in my last comment.

                  You can think of the html/css as building your page like a house of cards, well, an upside-down house actually because it starts from the top. When html gets the next card, it has rules for what it does with that in the CSS, and default rules that HTML will use otherwise. For instance CSS has a rule
                  display:none
                  and then html would simply not display the element.

                  JS will also be necessary for at least a few functions, especially stuff with movement I guess, I don't know how to describe it exactly, fancy stuff for the most part. And we use Ajax for one thing, I believe its login.
                    • 53414
                    • 34 Posts
                    Quote from: nuan88 at May 11, 2018, 08:33 PM
                    You do have some pages working right? You could start with that template (you can duplicate it and play with the copy), attach a resource to it, and open the resource to see how things are working.

                    You might want to read a bit about the CSS box model https://hackernoon.com/css-box-model-45ecf4ac219e

                    Actually that how I got the original HTML version on my website working years ago. However, I never really used css stylesheets or the full power of css so people told me that my site was cartoonish. Hence I turned to CMS; first Adobe Dreamweaver, then WordPress.

                    I'm reading the w3schools.com things about html and css and plan to integrate them into Modx Templates. I'll also try the link you have above on the css box model. I don't think I can use the css framework systems like w3.css and Bootstrap as they don't have some of the capability I need.

                      • 17301
                      • 932 Posts
                      Boostrap is pretty comprehensive and its to serve as a foundation to build upon anyway.

                      You can include it using a CDN too just by sticking this in your <head>:

                      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">


                      Then you can create your own stylesheet underneath to build upon the framework to get it to look and work exactly how you want it to.

                      <link rel="stylesheet" href="style.css">


                      But I do still think you'll find the entire process easier by adopting the aforementioned workflow. It's very overwhelming and sluggish to try and do everything all at once, you should learn to crawl before you walk.
                        ■ email: [email protected] | ■ website: https://alienbuild.uk

                        The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.