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

    New to MODx - have read the PACKT book from front to back and have potentially clouded what I am sure is a relatively easy matter, the PACKT book is a fantastic resource but seems to inform using many examples of snippets and a single template that as a pretty fixed layout structure, whereby all the elements appear on ever page.

    In my experience this is often not the case and sites will have multiple layouts for each "section" with different content throughout. My question is how do you produce a page with multiple areas that are editable with MODx using the WYSIWYG.

    For example - the following reference site http://gistcreate.com/ has 2 columns with images and text in each, followed by 3 columns of text and bullets. This obviously couldn’t be achieved in a single content area as it required additional markup to allow the columns to float via CSS. So how would one achieve this type of layout on a homepage? I appreciate the need for multiple templates for each section but it is how to get the several editable areas into those templates that I am struggling with...

    Apologies if this a little basic - I have searched the site and can’t find an answer, I have plenty of knowledge about snippets, chunks, PHx etc and thing that I have simply missed something obvious.

    I am using version 1.0.1,

    Many thanks
      • 34193
      • 330 Posts
      Personally I would use TV’s (Template Variables) for this set one up for each of the columns, Set it to rich text to allow WYSIWYG. Then within the template replace the content in that column with the TV place holder.
        • 34193
        • 330 Posts
        OK cause i’m generous I’ve looked at the code of the site and run up a quick template

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
        <head>
        
        </head>
        <body>
        	
        	<div class="wrapper">
        
        		<div id="header">
        	<div id="header-inner">
        		<h1 class="logo"><a href="/">Gist Create</a></h1>
        		<ul class="nav">
        			<li><a  class="active" href="/">Home</a></li>
        
        			<li><a  href="/projects/">Projects</a></li>
        			<li><a  href="/services/">Services</a></li>
        			<li><a  href="/about/">About</a></li>
        			<li><a  href="/contact/">Contact</a></li>
        		</ul>
        	</div><!-- header-inner -->
        </div><!-- header -->
        
        		
        		
        		<div class="wrap">
        
        			<div class="slogan">
        				<h2>Helping Businesses Succeed Online</h2>
        				<p>by passionately providing <a href="/projects/">hand-crafted websites</a> & <a href="/projects/#email">email campaigns</a>.</p>
        			</div><!-- slogan -->
        
        				
        
        			<div class="featured-nav">
        				<h3>Featured Project</h3>
        			</div><!-- featured-nav -->
        
        
        	
        					
        			<div id="featured-right">
        				[*FeaturedRight*] 
        																		<li><a href="http://charlesmartinbooks.com">Visit the Website</a></li>
        															</ul>
        			</div><!-- featured-right-->
        
        						
        			<div id="featured-left">
        				[*FeaturedLeft*] 
        						
        			
        			
        						
        			<div class="hr"><hr /></div>
        
        			<div id="about-gist">
        				[*column1*] 
        			</div><!-- about-gist -->
        					
        			<div id="let-us-help">
        				<h3><a href="/services/"><strong>Let Us Help You...</strong></a></h3>
        					<div class="list">
        						<ul>
        						[*column2*]
        					</div>
        					<div class="list">
        						<ul>		
        						[*column3*]
        						</ul>
        					</div>
        			</div><!-- let-us-help -->
        
        			<div class="hr"><hr /></div>
        
        			
        				<div id="footer">
        	<div id="footer-left">
        		<h3><a type="application/msword" href="/docs/web-project-planner.rtf">Let's Get Started!</a></h3>
        		<p><a type="application/msword" href="/docs/web-project-planner.rtf">Download</a>, fill-out & <a href="mailto:[email protected]">email</a>.</p>
        	</div><!-- footer-left -->
        						
        	<div id="footer-right">
        
        		<p>Need help? <strong><a type="application/msword" href="/docs/web-project-planner.rtf">Download our Client Project Planner</a></strong> or give us a call at 904.638.8880 and let us know about your project.</p>
        	</div><!-- footer-right -->
        	
        	<div class="hr-footer"><hr /></div>				
        				
        	<div class="vcard">
          		<p>© 2009 <a class="fn org url" href="http://gistcreate.com/">Gist Create</a> — A Jacksonville Web Design & Email Marketing Studio. All Rights Reserved.
          		<span class="adr">
        
            	    <span class="type">Work</span>
            	    <span class="street-address">1335 Lakewood Road</span>
            	    <span class="locality">Jacksonville</span>,  
            	    <abbr class="region" title="Florida">FL</abbr>, 
            	    <span class="postal-code">32207</span>.
            	    <span class="country-name">USA</span>
          		</span>
        
          		</p>
        
          		<span class="tel">
          			Call:<span class="type">Work</span> (904) 638-8880</span>, 
          			<span>or Email Us: <a href="mailto:[email protected]"><span class="email">[email protected]</span></a>.
           		</span>
        	</div>
        
        </div><!-- footer -->
        			
        
        </div><!-- wrap -->
        </div><!-- wrapper -->
        </body>
        </html>


        This is quick rough and ready could be pasted into a new template new TV’s defined as I said above and should work, still needs a lot of work to get it just right but should point you in the right direction.

        Also take a look here
        http://svn.modxcms.com/docs/display/MODx096/Creating+a+Template+Variable
        and here for more help
        http://svn.modxcms.com/docs/display/MODx096/Home

        this is assuming you are using the current branch of modx if you are using revo then things are much the same slight changes in symantics
          • 23505
          • 2 Posts
          WOW thanks peteedley thanks fantastic.

          Clearly this Forum is great I was half expecting a RTFM response but this beats all.

          Thanks again. not only does MODx rock so does it’s users.
            • 34193
            • 330 Posts
            What can I say, the forums here where a fantastic help to me when I started and still are. I found I could never ask a question that was too stupid. I just try and put back where I can.