We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 46886
    • 1,154 Posts
     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.


    these "frameworks" just make life easier when you understand them, to do what you want to do. they are helpful to ordering information, and helpful to create visual designs that can add to the experience in some way. I am not good with them but understand them conceptually.

    you showed us before a bit of your template with code similar to this, this is from my site but i remember what you posted before, its not too far off

     <div class="col-lg-6 col-md-7 col-xs-12 text-center header-content-inner">


    All that is doing is positioning and styling that <div>, pulling in classes (so your links inside are matching) and so on. That division is in another division and needs to be put in the right place, or colored, or whatever.

    The frameworks just save time. You don't need to style each and every link, you give the class of links as a style. Then, you can override that style on special links.

    So having said that, none of this is about functionality, which is real capability.

    HTH
      • 3749
      • 24,544 Posts
      There is something to be said for getting a good grip on HTML and CSS before trying to implement a framework like Bootstrap or Foundation. Once you understand how CSS works, it will be much easier to understand what the framework is doing.

      In addition, putting content (your header and footer) outside the document body makes your HTML invalid. Browsers will attempt to make sense of it and may render things correctly, but it's bound to cause trouble eventually.

      See this page: https://www.w3.org/TR/html401/struct/global.html

      Here's a quote from the link above: "The body of a document contains the document's content." That means anything that doesn't belong in the head section (title tag, CSS and JS links, and meta tags) goes in the body section.

      <body>
          <!-- all content goes here -->
      </body>


      The best way to get things started right is to view a page using your template in the front end. Do a "view source" (Ctrl-u) on it to see the HTML source code. Copy the whole page to the clipboard (Ctrl-a, then Ctrl-c). Then go here:

      https://validator.w3.org/#validate_by_input

      Paste the code into the textarea with Ctrl-v and click on the "Check" button. Correct any reported errors in your template and try again. Repeat this until there are no errors. Check again periodically as you make changes. Trying to make your page work correctly with invalid HTML will drive you crazy.

      Note: If your page is public (i.e., published and not on localhost), you can simplify the process quite a bit by going here instead:

      https://validator.w3.org/#validate_by_uri

      Just enter the URL of your page and click on the "Check" button.



      [ed. note: BobRay last edited this post 5 years, 11 months ago.]
        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 15, 2018, 04:00 AM
        There is something to be said for getting a good grip on HTML and CSS before...

        See this page: https://www.w3.org/TR/html401/struct/global.html

        Thanks very much Ray for this very helpful post. I'm working on learning html/css better and understand some except for the bits on Classes and Lists. I'm looking at the w3 docs on these subjects.

        I've used your validator (it checks code input OR a published webpage) and have made some html corrections on my working Template. However the Template still does a bunch of stuff I don't understand and I think it's poorly constructed (this I got from my Developer who quit after installing Modx and setting up this Template). I've put it thru the W3 html checker and made some changes and it STILL works as a Modx Template!!! I'll post it below and add my Questions.

        TEMPLATE (works)
        <!DOCTYPE HTML>
        <head>
        <title>Modx Template Developer</title>
        
        [[includeTemplate? &tpl=`header_devel.html`]]
        <main class="site-main page_spacing" id="main">
             <h2>[[*pagetitle]]</h2>
        </head>
                <div class="container no-padding">
                    <div class="content-area content-right col-md-9 col-sm-8 col-sm-8">
                        <div class="post-4 page type-page status-publish hentry" id="post-4">
                            <div class="entry-content">
                                [[*content]]
                            </div>
                        </div>
                    </div>
        [[includeTemplate? &tpl=`footer_devel.html`]]
        


        The CHUNK header_devel.html, the other: footer_devel.html is similar
        <!DOCTYPE html>
        <head>
                this is the header thing of the file header_NN_html, it is a Chunk with html
                <base href="[[!++site_url]]" />
                <title>[[*pagetitle]] - [[++site_name]]</title>
        </head>


        ====================================
        My questions are:
        1) I can find no files called content-area, col-md-9 col-sm-8 & etc. Is this code for some special function or are they class allocations.
        2) what does "post-4" mean for a class? Why can I find this nowhere explained?
        3) Do I need the [[includeTemplate? &tpl=`chunk_name`]] in that spot?
        4) Also I've tried adding a wayfinder call but that always gives a 500 error

        [[Wayfinder? &startId=`40` &level=`1`]]
        	<ul id="topnav"[[+wf.classes]]>[[+wf.wrapper]]</ul>
        

        I put the Wayfinder call in the Header? Resource 40 is where I'd like the menu to start.



        [ed. note: julius nepos last edited this post 5 years, 11 months ago.]
          • 46886
          • 1,154 Posts
          Hi, funny to see your fresh post

          You've let html get into your <head> area, all html goes inside the <body>

          <!DOCTYPE HTML>
          <head>
          <title>Modx Template Developer</title>
           
          [[includeTemplate? &tpl=`header_devel.html`]]
          
          </head>
                  <div class="container no-padding">
                      <div class="content-area content-right col-md-9 col-sm-8 col-sm-8">
          
          <main class="site-main page_spacing" id="main">
               <h2>[[*pagetitle]]</h2>
          
                          <div class="post-4 page type-page status-publish hentry" id="post-4">
          
                              <div class="entry-content">
                                  [[*content]]
                              </div>
                          </div>
                      </div>
          [[includeTemplate? &tpl=`footer_devel.html`]]



          Wayfinder also does not go in header, but in body. Also make sure, for each <div> which is opened, it has to be closed as well. You seem to be missing a couple of closing divs in the above. Also I wasn't sure if it goes in the above div or below, the post-4 div.

          Those terms like "content-area content-right col-md-9 col-sm-8 col-sm-8" are classes I think you are right, its part of the standard bootstrap, and the ones with numbers are controlling the size with small, medium and large devices.

          The post-4 div is obviously where the magic happens, and that should be in your local css file on your system, in files/assets/css. This is where the special styling for your content area is put.

          We make this as a special ID so we can customize it as far as positioning, color and so on.
            • 53414
            • 34 Posts
            Quote from: nuan88 at May 22, 2018, 03:03 PM
            Hi, funny to see your fresh post
            The post-4 div is obviously where the magic happens, and that should be in your local css file on your system, in files/assets/css. This is where the special styling for your content area is put.

            Thanks very much. Actually there are 7 css files are in assets/css. I've searched thru all of them and cannot find any reference to post-4. At this point I think it would be best for me to reinstall either that theme or a fresh theme: at least I'll know where things go.

            I did note that my Devloper used a [[getMenus? &parent_id=`14`]] command in a file under assets. Resource 14 is some sort of unknown resource denoted by 3 horizontal bars which has 4 submenus under it. Of course this doesn't work and no menu is shown on my homepage.

            There are lots of tutorials on adapting various themes to use modx: it just involves changing the css directories and etc. It doesn't seem that it should be that hard with none of the menus working? [ed. note: julius nepos last edited this post 5 years, 11 months ago.]
              • 46886
              • 1,154 Posts
              Hi Julius:

              Yes, totally agree. It would be good to start fresh.

              For the calls to getMenus, that's another extra, check if you uninstalled it.

              But also remember how these work, that call goes to resource number 14 (in your tree) and looks for child resources inside that resource, which will appear in the menu if they are there. Do you get a blank bar on the page? Try making a new resource, name it and save it, and move it into resource 14 by drag and drop probably.

              When resources are also containers some developers like to keep them empty, just so things are laid out well.

              For the includeTemplate, I guess that's another extra, it allows you to customize the header and footer of different pages. Like if you wanted a different map in the header on the South America pages than others, in that case its fairly convenient to customize pages.

              If you don't want to customize a lot of pages as far as header and footer, then we would just use basic code for those parts. Headers of course are important to look right so we usually put some effort into the style there.

              Do you not have the header or footer appearing now?

              I do think it would be ok to start with a new template so you can really control the design. But please realize implementing a new template takes a bit of time.

              This extra looks useful https://modx.com/extras/package/theme.bootstrap

              If you install it it should give you a working basic template, and then you can probably customize that to your needs. It says it already uses pdotools, which will probably be a menu (there are many ways to skin a cat). Why not give it a try, just assign a resource with some content to the new template after installing, and then 'view' that resource

              I did find this super simple Modx template which might be useful


              <html>
              <head>
                  <title>[[*pagetitle]]</title>
                  <meta name="description" content="[[*description]]"/>
              </head>
              <body>
              <h1>[[*longtitle]]</h1>
               
              Page ID: [[*id]]<br/>
              IntroText (Summary): [[*introtext]]<br/>
              MenuTitle: [[*menutitle]]
               
              <hr/>
               
              [[*content]]
               
              </body>
              </html>


              This one should give you a simple page with the following info on every page with this template

              Resource TITLE (from longtitle)

              Resource number

              Introtext from resource (if you have inputted anything, this area in the resource helps google know what your content is so hit the keywords)

              MenuTitle which I don't quite know what it is but its info about the resource.

              Content - the content of that resource.

              If you want, give this a try, and after it works, put the wayfinder link in there, say after [[*content]]. You might want to put the wayfinder link inside <p> </p> tags or <div> </div> tags, not sure about that.

                • 53414
                • 34 Posts
                Quote from: nuan88 at May 23, 2018, 04:35 PM

                For the calls to getMenus, that's another extra, check if you uninstalled it.
                Hi & Thanks for the template file. I'll try this one out.

                I didn't delete any addons, the Devloper installed 11 + I added pdoTools myself, thus giving me now 12.

                The [[getMenus ....]] call is in the file:
                mydomain.com/www/modx/assets/template/template-files/MainSidebar.html

                However, I can see no Resources which call that file.

                Resource 14 is a empty-content Resource which does in fact have 4 menu items under it. It should appear in the Home Page if it worked. However shouldn't that call (to getMenus) then be in the Home Page Template? I see nothing that even calls the file holding it (MainSidebar.html).

                The full content of that MainSidebar.html is
                <div class="container no-padding" >
                   <div class="widget-area col-md-3 col-sm-4 col-xs-12 sidebar-left sidebar-2" >
                <div id="side-nav" class="" >
                  <aside class="widget widget_nav_menu" id="nav_menu-4">
                      <h2 class="widget-title">M-1 The Ancient World & Latin America</h2>
                      <div class="menu-collecting-categories-container">
                          <ul class="menu" id="menu-collecting-categories">
                              [[getMenus? &parent_id=`14`]]
                              <li>
                                 <a href="/">Home</a>
                              </li>
                              <li>
                                <a href="/contact-us">Contact</a>
                              </li>
                          </ul>
                      </div>
                  </aside>
                  <aside class="widget widget_nav_menu" id="nav_menu-6">
                      <h2 class="widget-title">M-2 More Modern Collections</h2>
                      <div class="menu-collecting-comments-recommendations-container">
                          <ul class="menu" id="menu-collecting-comments-recommendations">
                              [[getMenus? &parent_id=`19`]]
                  
                          </ul>
                      </div>
                  </aside>
                </div>
                       </div> 
                


                Do I really need all this ul class stuff to do a menu call? [ed. note: julius nepos last edited this post 5 years, 11 months ago.]
                  • 46886
                  • 1,154 Posts
                  Hmm, would you be willing to give us the whole page, or like the entire <body> section?

                  Also, would you be able to use a normal picture upload website like https://imgbb.com/ to show us what you have and don't have? Our picture attachments aren't working right now.

                  For the resource 14 you mean it has child resources, so are they published, and do they have things like long title and other attributes which may be the ones pushed to the menu. Lacking this info I would think the menu would appear on the page but it would look weird and ugly, as it has no spacing or content. But, it might just blend in and be gone.

                  Else, we can let this go completely and go it with WayFinder, that might be better to chuck it and get Wayfinder working finally. I really think Wayfinder could be a big step in your ability and understanding, once it actually works and you can confirm it. It was a big early hurdle for me and I did not get over the hump at the time, ending up with hardcoded menus...sigh. tongue

                  Ok let me break this down, it is a bit duplicative but not overly so. A lot of the need for multiple divs is that html has a default position it establishes, and that's often a bit ugly. Also, it might be better to sort of isolate each piece you have. So, it is a bit more complicated than it needs to be, but its not unreasonable at all.

                  <container> that's just the basic whole piece, inside we will have


                  <widget area 


                  ok and this will pull in widget area colors and so on, links can be a special style throughout the widget area. Notice widget area is still not the widget itself. So its not that duplicative, you might want a picture of yourself above the widget or an advert below.

                  This part could also contain the key positioning info, with everything below it following suit.

                  <div id="side-nav" class="" >


                  Ok this might be a bit wasteful but its the real sidebar area now. I guess those empty classes are...empty?

                  <aside class="widget widget_nav_menu" id="nav_menu-4">


                  Asides are kind of cool, the idea is you can define the whole website according to where your main info is, your additional info, a little niche somewhere to put info. Its like a <section> that's all I know.

                  And, finally we are getting to the good bits.

                  <h2> this class will make all titles the same style, like color and underline and so on. Previously we saw that Modx can do cool things like [[*longtitle]] and get the data right from the resource, but in this case the title text in there, its hard-coded.

                  <h2> is just your headlines, from the biggest <h1> down to little <h6>, and in your css you could define an <h7> and it would work perfectly. So this is for headings, subheadings and so on. Remember we want to work with classes in special areas, but usually there are basic rules under those classes.

                   <div class="menu-collecting-categories-container">


                  Ok this is where the action is, we have the tool and then links to your homepage and to your contact page under the tool output.

                  <ul> 


                  this is an "unordered list" which just sort of contains the output of the tool, in a line or space, above those two links I just mentioned.

                  <li> 


                  are the lines in the list.

                  I believe you have a coding problem, its too weird and maybe not acceptable to have content (the tool) not in a <li> line. Try changing it to this, where I am putting the output into a line in the list. I added <li> and closed it after the tool is called.
                            <ul class="menu" id="menu-collecting-categories">
                  
                                 <li>
                  
                  [[getMenus? &parent_id=`14`]]
                  
                  </li>
                                <li>
                                   <a href="/">Home</a>
                                </li>
                                <li>
                                  <a href="/contact-us">Contact</a>
                                </li>
                            </ul>



                  Then that aside closes and the next one opens

                    <aside class="widget widget_nav_menu" id="nav_menu-6">
                        <h2 class="widget-title">M-2 More Modern Collections</h2>
                        <div class="menu-collecting-comments-recommendations-container">
                            <ul class="menu" id="menu-collecting-comments-recommendations">
                                [[getMenus? &parent_id=`19`]]
                     
                            </ul>
                        </div>
                    </aside>


                  And thats the other tool, and its got the same problem, unless I am wrong about that.

                  And then everything closes and closes and so on
                    • 3749
                    • 24,544 Posts
                    I agree with nuan88 that you're probably better off ignoring (but no deleting) what's there now.

                    I'd suggest using his simple template with the addition of the simplest possible Wayfinder tag. Be sure it's inside the <body> section of he HTML.

                    <h3>Menu</h3>
                    [[!Wayfinder? &startId=40]]


                    Make sure that Resource 40 and all its children are published and not hidden from menus.

                    So here is the whole template to try:

                    <html>
                    <head>
                        <title>[[*pagetitle]]</title>
                        <meta name="description" content="[[*description]]"/>
                    </head>
                    <body>
                    <h3>Menu</h3>
                    [[!Wayfinder? &startId=40]]
                    
                    <h1>[[*longtitle]]</h1>
                      
                    Page ID: [[*id]]<br/>
                    IntroText (Summary): [[*introtext]]<br/>
                    MenuTitle: [[*menutitle]]
                      
                    <hr/>
                      
                    [[*content]]
                      
                    </body>
                    </html>


                    Under the "Menu" heading, you should see a bulleted list of link that work.

                    -----------------------------
                    FYI

                    It appears that your developer likes working with files, so you have a snippet called includeTemplate. You send it the name of the template file as a property (&tpl=`footer_devel.html) in the getMenus tag. The snippet knows where the files are, completes the path, and pulls in the files. This is handy if you want to use a Version Control System like Git or SVN to track changes to your files, but if you don't intend to do that, a much more convenient method is to paste the content of each file into a chunk and place a chunk tag like this where you want the file's content to appear:

                    [[$chunkName]]


                    You should also have a snippet called getMenus that is supposed to create the menus. If that snippet is missing, it would explain why the getMenus tags don't work. If it does exist, the getMenus snippet may use Wayfinder or pdoMenu to create the menu, in which case not having those installed would explain why the tags don't work. If you have a getMenus snippet, look through its code to see if there's a $modx->runSnippet() call. The snippet it's calling will be inside the parentheses.
                      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 24, 2018, 04:50 AM
                      I agree with nuan88 that you're probably better off ignoring (but no deleting) what's there now. I'd suggest using his simple template with the addition of the simplest possible Wayfinder tag.

                      I tried implementing the Wayfinder Call but didn't get anything than a plain text list of links.

                      Actually what I'm looking for is termed a Navigtion Bar. I'd need 2 different types of these: a Horizontal one across the top of the Home page. Also two Vertical ones along the left side of the Home page. Then I may need a modification of one on some of the different content pages: but with the same links.

                      Still not sure what
                      For example what does
                      <div class="menu-collecting-categories-container"> do? why must it be spelled exactly this way? Is there a file called menu-collecting-categories-container.html which defines this class?
                      Bootstrap Template
                      I tried that Bootstrap Modx template and it does give me the desired top NavBar. If I can customize it that would be good as it's right now semi-functional. I'll try a pix: wierd id doesnit wrok fer sum yeasin.



                      I did get the Header to work but not the footer using your "simplified template Templ Bob Ray Menu 2b. I'm looking for what is called the Bootstrap have an example of a footer that sticks to the bottom of the page here: I can get the Chunk called footer to display but getting it to display at the bottom of the page takes the CSS from that example.

                      [ed. note: julius nepos last edited this post 5 years, 10 months ago.]