Getting CSS layout into modx

Hi everyone, this is my first post in a forum...tell me my faults, I will learn!
I’m trying to get a css layot into Modx. All tutorial have an example of a simple content-div with no nested div blocks. But my layout has. I cannot simply replace the content-div with [*#content*], because of the other divs. The structure is like this:

<div id="wrapper-inner">
<div class="row">
<div class="row-element">
<h1>...</h1>
<p>...<a href="#">...<a></p><
</div><!-- end .row-element -->
<div class="row-element">
<h1>...</h1>
<p>...<a href="#">...<a></p><
</div><!-- end .row-element -->
<div class="row-element">
<h1>...</h1>
<p>...<a href="#">...<a></p><
</div><!-- end .row-element -->

<div class="row-element-last">
<h1>...</h1>
<p>...<a href="#">...<a></p><
</div><!-- end .row-element-last -->

<div class="row"><!-- end .row -->
<div id="wrapper-inner"><!-- end #wrapper-inner -->

The row-elements are teasers, their links link to special pages. I got a maximum of three rows. I thougth, I could edit each row-element as a single document, but then I did not know, how to tell MODx to gather all this documents and render one single webpage. I’m lost somehow. Can anyone help me? Got the book from Antano Solar John since yesterday, but it did not help me in making a Template for nested divs.

Thanks for your help and sorry, if I made some major forum posting faults ;o)

P. S.: What are the options 1 and 2 for when posting a new poll?

You are looking for Ditto to gather data from nested pages and creating a "list" of documents.

Take a look at this tutorial and scroll down to the section title "Ditto: Repurposing Content".

You can also check out the Ditto support site: http://ditto.modxcms.com/

There are a few other Ditto resources around but I just don’t have them bookmarked on this computer.

Oh here is a great support site for Ditto as well: http://www.pogwatch.com/ditto.html

that was actually a pretty useful tutorial thank dev_cw. I’ve been in this place where I don’t know where to start with my site but that gave me a pretty good spring board to jump off.

Hi everyone, thank you for your replys. Actually I already know these tutorials, except "pogwatch". I read the one fromt nettuts several times and in his layout code is a passage, which is the one I’m interested in---but he doesn’t use that for the example. Instead it is a single div which gets filled with one snippet. The (for me) really interesting part is something similar to this code (from nettuts example)

<!-- Footer -->
<div class="grid_12" id="footer">
<div class="grid_4 alpha">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>

</div>

<div class="grid_4">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
</div>

<div class="grid_4 omega">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
</div>
</div>

<div class="clear"> </div>

Here we have three different divs between the #footer. So I cannot just replace <div class="grid_4 alpha">,<div class="grid_4"> and <div class="grid_4 omega"> with one snippet or chunk, they are all different! How do I make a template to fill theses three with content?

If anyone could show me, that would be one hell of a help.

Thank you all! You make me feel not beeing alone ;o)

In this case you would use Ditto and use the &tplFirst to define the first item template, then use &tpl to define the second item and finally use &tplLast for the final item template.

That is a good question since that is not covered in the tutorial (the author is not as bright as he thinks he is )

In practice you would have the &tplFirst be something like:


The &tpl like this:


And the &tplLast like this:


Then you would put the ditto call in the footer div:


Edit: I had mislabeled the tpls, corrected to read &tplFirst and &tplLast

Yeah, that makes sense. Why didn’t I come up with this? ;o) Thanks a lot. And how would I do this, if I had more than on footer row (ok, let’s call it #teaser-row or something like that)
Maybe three rows of #teaser-row...

You are a great help! Really, thanks. I think that slowly I start to understand how MODx works...

Hi, one more question concerning ditto. I played with it, nested documents but I did not quite get it. I first make a "container" document (parent) in the root. There I place the ditto calls you described.

Beneath this parent document I create three new children, who do not appear in the menue. They get the contain the html which is then placed into the [*content*] placeholders in the parent document. Am I right?

Qestion: How do I specify the order of appearance of these children? By naming them "tplChunk","firstTplChunk" etc. Am I right?

How would that work for a second row? Just the same, but with other named children?

I think ditto is a veeeery vital part of MODx. At least it’s beginning to feel so.

Thanks for your support!