Newbie question about divs in the content.

So, I’m pretty new to ModX but am very excited about what it could provide me.

I found a nice template to use on the internet after following the tutorial on thecodingpad.com. I got that working perfectly so figured I had enough base knowledge to proceed. The new template has a front which has three columns. The left is a "news" piece. The center is the main content. The right is links.

I want to be able to edit all three. I’ve tried simply taking that entire section and slapping it in the body. And it kind of works. This layout is a div, with a div, with a div all layered in. It works right up until I make ANY changes. Once ModX cleans up, the page is thrown off. I’ve compared the code before and after and it’s the exact same, so I’m confused what could be happening.

I searched the forums and think my answer is to use TVs, but if anyone has any experience here or needs more description to help, I’d appreciate the advice.

I’m using the newest version of Evolution, not the 2.0 Revolution.

Not sure I understand what you mean. Do you mean that you want to be able to edit all the sections from the front end using the quick manager?

What have you set as the template of the page when put your code in the body?

Here’s the code for the main content I’m working with.


<div id="content">
<div class="wrapper">
<div class="col-1">
<h3>News</h3>
<ul class="list1 p2">
<li><img src="assets/templates/mytemplates/base2/images/1page-img1.jpg" alt="" />
<h4><a href="#">November 4, 2009</a></h4>
<p class="zoom">At vero eos et accusamus et iusto odio dignissimos quidem rerum facui praesentium.</p>
</li>
<li><img src="assets/templates/mytemplates/base2/images/1page-img2.jpg" alt="" />
<h4><a href="#">November 1, 2009</a></h4>
<p class="zoom">Voluptatum deleniti atque corrupti quos dolores et quidem rerum facilis est et expedita distincti.</p>
</li>
<li><img src="assets/templates/mytemplates/base2/images/1page-img3.jpg" alt="" />
<h4><a href="#">October 23, 2009</a></h4>
<p class="zoom">Sint occaecati cupiditate non provi- dent, similique animi, id est laborum et dolorum fuga. Et harum sunt in culpa qui officia.</p>
</li>
</ul>
<div class="wrapper"><a href="#" class="link1"><em><b>News Archive<span>News Archive</span></b></em></a></div>
</div>
<div class="col-2">
<h3>Welcome!</h3>
<p class="p1">IT World is a free websites template created by Templates.com team. This website template is optimized for 1024X768 screen resolution. It is also XHTML &amp; CSS valid.</p>
<p class="p1">The website template goes with two packages – with PSD source files and without them. PSD source files are available for free for the registered members of Templates.com. The basic package (without PSD is available for anyone without registration).</p>
<p class="p1">This website template has several pages: <a href="home.html">Home</a>, <a href="about-us.html">About Us</a>, <a href="services.html">Services</a>, <a href="support.html">Support</a>, <a href="contact-us.html">Contact Us</a> (note that contact us form – doesn’t work), <a href="sitemap.html">Site Map</a>.</p>
<div class="wrapper"><a href="#" class="link1"><em><b>Read More<span>Read More</span></b></em></a></div>
</div>
<div class="col-3">
<h3>Articles</h3>
<ul class="list1 p2">
<li><img src="assets/templates/mytemplates/base2/images/icon4.jpg" alt="" />
<h4><a href="#">Welcome To our Company</a></h4>
<p class="zoom">If you are looking for perfect IT services for your business, you will find them here!</p>
</li>
<li><img src="assets/templates/mytemplates/base2/images/icon5.jpg" alt="" />
<h4><a href="#">Our services</a></h4>
<p class="zoom">The complete information regarding our services you will find on the "Service" page.</p>
</li>
<li><img src="assets/templates/mytemplates/base2/images/icon6.jpg" alt="" />
<h4><a href="#">About "IT World"</a></h4>
<p class="zoom">Free 1028X768 Optimized Website Template from Templates.com! We hope that you will like this template and then use for your websites.</p>
</li>
</ul>
<div class="wrapper"><a href="#" class="link1"><em><b>News Archive<span>News Archive</span></b></em></a></div>
</div>
</div>
</div>

Quote from: einsteinsboi at Jan 16, 2010, 07:52 PM

Not sure I understand what you mean. Do you mean that you want to be able to edit all the sections from the front end using the quick manager?

What have you set as the template of the page when put your code in the body?

Essentially yes. I posted the code in my last post.

If I put ALL of that into the body, I get a perfect page. If I change ONE letter in that within the editor, using the GUI or raw editing, the format gets hosed up.

I just created two new TVs and assigned them rights to this template, and am trying to figure out how to put the three distinct sections in and make it work. So far, not working well .

So, I added two TVs. In one I put the following code:

<div class="wrapper">
<div class="col-1">
<h3>News</h3>
<ul class="list1 p2">
<li><img src="assets/templates/mytemplates/base2/images/1page-img1.jpg" alt="" />
<h4><a href="#">November 4, 2009</a></h4>
<p class="zoom">At vero eos et accusamus et iusto odio dignissimos quidem rerum facui praesentium.</p>
</li>
<li><img src="assets/templates/mytemplates/base2/images/1page-img2.jpg" alt="" />
<h4><a href="#">November 1, 2009</a></h4>
<p class="zoom">Voluptatum deleniti atque corrupti quos dolores et quidem rerum facilis est et expedita distincti.</p>
</li>
<li><img src="assets/templates/mytemplates/base2/images/1page-img3.jpg" alt="" />
<h4><a href="#">October 23, 2009</a></h4>
<p class="zoom">Sint occaecati cupiditate non provi- dent, similique animi, id est laborum et dolorum fuga. Et harum sunt in culpa qui officia.</p>
</li>
</ul>
<div class="wrapper"><a href="#" class="link1"><em><b>News Archive<span>News Archive</span></b></em></a></div>
</div>

Then ModX adds a </div> at the end for me. I delete and update, and it adds again. It’s that additional thing that is hurting the format.

Is your RTE disabled?

Not sure what you mean.

I have the rich text editor -- in fact both TVs are rich text by choice.

Within the three sections, I’m selecting the edit HTML source option directly, rather than using the editor itself.

Ok. I’ve figured out where the format problem is.

<div class="wrapper"><a href="#" class="link1"><em><b>News Archive<span>News Archive</span></b></em></a></div>

Every time I save when any change is done anywhere else, that line changes to:

<div class="wrapper"><a class="link1" href="#"><em><strong>News Archive<span>News Archive</span></strong></em></a></div>

Whether I put that in a TV or in a main content the switch of this by ModX during cleanup merely changes the appearance I’m expecting.

While I can live with it, I’m wondering how I get ModX not to be helpful in this.

That’s a problem with the RTE (rich text editor) TinyMCE, not with MODx per se. You should probably start a new topic there, as I believe you simply need to turn off the cleanup or some other option in the TinyMCE configuration.

apart from the RTE problem.

I followed Mary’s advice at the coding pad and created seperate chunks for each column and used page [*#content*] for center column. By placing [*#content*] call in center column

Then able to modify main [*#content*] with seperate pages.

Hope this makes sense.

Worked for me.

Seehttp://modxcms.com/forums/index.php/topic,44157.0.html

and follow link to demo site.http://ctsoe.org/modxdemo/

Hope this helps.

If you would like can do same to your code above and post back.

May help others? Who knows???