<![CDATA[ Template help needed - My Forums]]> https://forums.modx.com/thread/?thread=103839 <![CDATA[Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=3#dis-post-558478
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]]]]> julius nepos May 10, 2018, 09:43 PM https://forums.modx.com/thread/103839/template-help-needed?page=3#dis-post-558478 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558769
If you got an output of links, it worked! you haven't styled that place or those links yet, that's why its just plain text.

Try putting the wayfinder call inside a <div>, and let's add a bit of color to it, and then just for fun let's try to float it to the left side of the page:

<div style="float:left;border: 1px black;"> [[Wayfinder call]] </div>


I don't know if the border will work to be honest.

You can always change the css on the fly using in-line css in a number of places, like I just did above. It takes some getting used to but you can control every little space if you want. Generally in-line isn't so great because its better to assign classes, but personally I will just throw some in-line rules whenever I want to adjust something.

For the header, yes a navigation bar is useful, and this isn't too hard but can be a bit tricky. Remember it needs to adjust properly for different sized devices.

The one you choose is based on your preference, but of course you have to worry about what you can implement.

Personally I think you could stick with the bootstrap template, it will work well and you can customize it, you can ask here and we can help you find where.

I agree about the naming in bootstrap, it can be hard to know how to change things. Each of those terms is pulling in classes, like "navbar". In the bootstrap there is just class after class, like navbar-fluid or navbar-wrap and so on.

In-line styles are one way to change these, in-line always supersedes other css, although some classes will come from the parent element, but that's a more advanced subject.

For two vertical menus, do you want them one on top of the other, on the left or the right? Many typical styles have like a box to the left or right with various info, and then the page content on the other side.
]]> nuan88 May 28, 2018, 12:25 AM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558769 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558766 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.

]]> julius nepos May 27, 2018, 08:12 PM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558766 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558711
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.]]> BobRay May 24, 2018, 04:50 AM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558711 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558708
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]]> nuan88 May 23, 2018, 11:44 PM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558708 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558706 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?]]> julius nepos May 23, 2018, 09:34 PM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558706 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558700
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.

]]> nuan88 May 23, 2018, 04:35 PM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558700 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558698 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?]]> julius nepos May 23, 2018, 03:05 PM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558698 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558681
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.]]> nuan88 May 22, 2018, 03:03 PM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558681 <![CDATA[Re: Template help needed]]> https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558679 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.



]]> julius nepos May 22, 2018, 02:00 PM https://forums.modx.com/thread/103839/template-help-needed?page=2#dis-post-558679