[!Ditto?startID=`8` &display=`3` &dateFormat=`%d-%b-%y %I:%M %p` &tpl=`MyNewsItemChunk` &extenders=`summary` !]
<item>
<div class="ditto_summaryPost">
<h3>[+title+]</h3>
<div class="ditto_summary">[+summary+]</div>
<div class="seemore"> <a href="[~[+id+]~]" title="[+title+]">See more about this story . . .</a> </div>
<div class="postedby">» Posted by [+author+] on [+date+]</div>
</div>
<hr/>
</item>
. I am especially impressed with BobRays example though. I am still learning the ins and outs of Modx but I think I am just about able to make sense of the supplied code. There are some parts I can need to be clarified:
Cheers fellers, between the two suggestions I should be able to sort things out. I am especially impressed with BobRays example though. I am still learning the ins and outs of Modx but I think I am just about able to make sense of the supplied code. There are some parts I can need to be clarified:
2. Those three css classes in the Chunk "ditto_summary", "seemore" and "postedby" where have they been defined? Are they part of Ditto or do I have to create them in my template’s css file use them in the template?
Regarding my second question (displaying several article opening lines plus "read more" on the front page in blog format), I did not see any reference to it in the responses. Is there a solution to this in the Ditto documentation?
div.ditto_summaryPost {
color:#ffffff;
font-family:"Times New Roman", Times, serif;
font-size:12px;
margin-bottom:0px;
font-weight:bold;
padding:5px 30px 5px 30px;
}
div.ditto_summaryPost a:hover {
color:#000000;
background-color:#bbbbbb;
}
div.ditto_summary {
color:#000000;
font-family:"Times New Roman", Times, serif;
font-size:16px;
font-weight:normal;
}
div.ditto_summaryPost h3 {
text-decoration:none;
text-transform:uppercase;
font-size:14px;
color:#336699;
}
div.postedby {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
div.ditto_summaryPost ul {
padding-left:0px;
margin-left:0px;
list-style-image: url(bullet.gif);
list-style-type:none;
list-style-position:outside;
margin-bottom:5px;
}
div.seemore {
margin-top:0px;
padding-top:0px;
margin-bottom:10px;
text-align:right;
font-style:italic;
color:#000066;
}