Editing Ditto presentation?

1,161 Posts

Photowebmax Reply #1, 18 years, 6 months ago

Please forgive this newbie question.

How do you edit some of the Ditto presentation? Other snippets have a CSS folder which you can dig into etc.

I have just started using Ditto. Specifically I want to experiment/change the styling (make smaller) of the following:

h3.ditto_pageTitle
div.ditto_document
div.ditto_intro text etc.

So far I have not found how to access these. So I am looking for a safe procedure here. I know some CSS but very little PHP...

Thanks!

2,310 Posts

bunk58 Reply #2, 18 years, 6 months ago

The CSS is usually built into one of the shipped or ported templates.
This is the ditto CSS from one of the templates:

.ditto_summaryPost h3 {
    border-bottom: 1px solid #ccc;
    margin: 0px !important;
    padding: 5px !important;
    color: black;
}
.ditto_summaryPost .ditto_info {
    background-color: #F8F8F8;
    padding: 5px !important;
    font-size: 0.8em;
    color: black;
}
.ditto_link {
    font-size: 76%;
    text-align: right;
}
.ditto_paging {
    border-top: 1px solid #ccc;
    padding: 10px; 
    font-size: 86%;
    color: #618100;
}
#ditto_pages .ditto_currentpage {
    border: 1px solid #618100;
    padding: 1px 5px 2px; 
    margin-right: 1px;
    background-color: #9c0; 
    color: #fff;
} 
#ditto_pages .ditto_off {
    border: 1px solid #ccc;
    padding: 1px 5px 2px; 
    margin-right: 1px;
    color: #ccc;
}
#ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited {
    border: 1px solid #9c0; 
    padding: 1px 5px 2px; 
    margin-right: 1px; 
    text-decoration: none !important; 
    color: #618100;
} 
#ditto_pages a:hover {
    background-color: #fff;
    color: #000;
}
#ditto_archivelist ul {
    list-style-type: none; 
    margin-left: 15px; 
    padding-left: 0;
}
#ditto_archivelist ul ul{
    list-style-type: square;
    margin-left: 35px;
} 
#ditto_archivelist .ditto_month {
    font-weight: bold;
}

Edit away!
David

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 18 years, 6 months ago

You can style Ditto’s parts any way you like; you can even make up your own template to display the listing. Just put the css in your site’s css file. As far as I know, the default ditto template isn’t styled at all. You can find the default template in the lang files.

When creating custom template chunks, I always copy the default template into a chunk and specify it in the snippet’s &tpl parameter, then modify the template to my liking. That way I start with a known good template!

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,161 Posts

Photowebmax Reply #4, 18 years, 6 months ago

Thanks Guys,

So, to get my head around this a little clearer: What I should do is copy the above CSS and add it to my custom template CSS and then mess around with it until I have the fields in question the way I want them to look? If so then I am excited with the prospect as CSS is within my "comfort zone". Following the cryptic snippet calls, variables, and PHP code etc is where I usually get lost...

Max

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 18 years, 6 months ago

Exactly. And your browser’s "view source" will be your friend, as will Firebug or some other dev plugin to Firefox to work with CSS wink

Unless you want to do something really exotic, you should never have to mess with the core code in the main snippets (wayfinder, ditto). Making a custom template chunk is simply HTML with placeholders, and it’s all styled with CSS.

If you find the snippet parameters get overwhelming, look into using a config file instead. Just set the desired parameters in a very straightforward manner; you can even add comments so you know what each one is at a glance:

$parents = '43,34'; // parent documents to get individual items from
$tpl = 'mychunk'; // chunk to use for the output of each summary item

Then the only parameter you need in the snippet tags is &config=`configfile`

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,161 Posts

Photowebmax Reply #6, 18 years, 6 months ago

Thanks Susan,

I added the CSS from the code that David posted. But I did not see the specific CSS classes that I was encountering on my Ditto created page. In the end I added the specific classes to the CSS file in my own main Template CSS and was able to adjust the presentation with ease from then on.

What sent me off course was my previous encounters with actual CSS files that were packaged with other snippets. In essence I as a newbie would have been lost without this wonderful forum. Without this forum how would a new user know how to modify the appearance of some of these snippets? To my untrained eye there seems to be different approaches with the various snippets. But the more you play with MOD the more you learn!

As to your suggestion to using the config files as an alternative to snippet parameters I am afraid I am not getting what you saying. This is not your fault. Rather it is mine. The gaping holes in my knowledge of scripting, code language and PHP is wide enough to drive a large truck though. I am simply lacking here. I know photography, Photoshop, InDesign, layout, XHTML, CSS and a few other gems. When I read insightful suggestions by yourself, Ryan, Doze and others and it feels like I have been hit by one of those "phases on stun" blasts we used to see on the old Star Trek TV show. A short statement that might seem as direct as spelling the word "cat" to some folks is a mere mirage to an unenlightened idiot like myself.

Still, I am enjoying MODx in my spare time, peeling off one layer at a time. The fact remains I need to read some text so I can begin to understand what everyone here is actually talking about...

Thanks,

Max