Best way of styling Ditto? [Solved]

I seem to be fighting with Ditto again...

I can get it to function and do its thing just fine. If I create a container document and place a ditto call to display that document’s child pages then it does so just fine.

The issue is I want to change the presentation of how the Ditto content gets displayed. I have CSS rules for headings and paragraphs, etc in the column that this content gets displayed in. But the Ditto links, headline and summary text is not rendering well.

This is what the generated code in the Ditto area looks like:


The whole Ditto content is getting wrapped in a paragraph tag. Inside that are H3 tags and inside those are anchor tags for the articles themselves. This seems odd for some reason.

Do folks have a good approach for customizing the appearance of Ditto content? Do you add extra CSS for the code that Ditto outputs? Any tips on doing this? Or do you add some code to a template or chunk? Some of the snippets in MODx have its own CSS which comes in handy. Not so with Ditto? Or am I missing something?

Thanks!

do you use reset.css (or alike)?
do you order the css embedding right?
CSS order and rules matters.

What’s your template for ditto?

I can’t see why it would output the P tags unless you have them in the template. If they are around all posts did you turn off Rich Text on the page with the ditto call?

I tried using the tutorial shown here:
http://codingpad.maryspad.com/2009/05/01/building-a-website-with-modx-for-newbies-part-8-more-ditto/

I used the following template for the Ditto call:


This works: the unwanted post date and the "Default admin account" reference is removed. But the Ditto content is still wrapped in a paragraph tag. There is nothing to attach CSS to. I have other paragraphs that are not Ditto generated on the same document that are styled correctly. If I try to target the styles in the column all this Ditto content goes in it messes with the presentation of the non Ditto content. I also want these pages to validate and the Ditto content does not validate.

I also tried not using a template for Ditto and used a very minimal snippet call. In this case there is some generated Ditto anchors to style with CSS. But in this case its hard to customize the snippet call: adding the "read more" link and dropping "Default admin account" reference. So far both methods have pluses and minuses. But I want to create custom styling to the Ditto content without it messing with the other non Ditto content in the same page column?

I did some digging around the Ditto pages in the forum. Most of the links, wiki, and stickies are broken links or outdated. I wish there was a decent guide to using Ditto with actual samples like we now have for Wayfinder.

My number one complaint with MODx snippet documentation is that there are very few examples shown. The one Ditto page has a long list of parameters but no clues as to what they do or what happens when you alter them.

I guess one of the main things I need to style is the Summary text that gets filled out in the child documents. Even though this content is generated on my Ditto page it is not using the paragraph and link styles that is being used in the same column.

There is an example of the various ditto css styling in assets/templates/modxhost/modx.css which may shed some light on the issue. (lines 262 - 361)

Breezer,

Thanks. I looked those Ditto styles. I do not see any of these in the code that my Ditto pages produces though? Would adding any of these to my style sheet do anything?

What my Ditto call produces in each instance is a H3 tag that is also a anchor tag, lines of summary text that comes from the Summary box in the child documents and the "read more" anchor tag at the end. All of this gets wrapped in a paragraph tag for some reason. All my other pages validate as STRICT but the Ditto pages fail.

I wonder if I should just wrap that Ditto template in a unique div? That way I could target the div, its anchor tags and the text block width my own CSS. This seems like it could work, but is a bit of a hack though...

Putting a wrapper with an id on the ditto output should work, and at this point sounds like the easiest approach (maybe you can at least keep your sanity a while longer lol) - as far as the <p> </p> around the current output, are you adding the snippet call in the tinymce editor? If so it may be adding the <p> wrapper.

Quote from: Photowebmax at Jan 15, 2010, 12:33 AM

I used the following template for the Ditto call:

<h3><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
[+introtext+]
<a href="[+url+]"> read more...</a>

I think you can do this with parameters in the Ditto tag, but I usually just do something like this in the Tpl chunk:



Your CSS can then control each of the parts individually without affecting the rest of the page.

Thanks guys!

This looks like a good solution. Its a fresh day with a rested brain etc. I will report back on how this goes...

Bob, I think that code should be: