Quote from: krizz at Aug 20, 2013, 07:59 AMI have a preety simple question
Ah, a simple question, that has multiple solutions:
Solution 1:
I havent tested this solution, but I see no reason why it shouldn't work, as the template parameters are for this type of modification.
Add the following to your Ditto call:
&tpl=`ditto_odd` &tplAlt=`ditto_even`
Create two new chunks:
ditto_odd:
<li class="ditto_odd"><a href="[~[+id+]~]">[+menutitle+]</a></li>
ditto_even:
<li class="ditto_even"><a href="[~[+id+]~]">[+menutitle+]</a></li>
Add the following to your CSS file:
.ditto_odd{color:inherit; background-color:red;}
.ditto_even{color:inherit; background-color:blue;}
Solution 2:
For this solution you need PHX installed
Add the following to your Ditto call:
Create a new chunk:
evenodd:
<li class="[+ditto_iteration:evenodd+]"><a href="[~[+id+]~]">[+menutitle+]</a></li>
Create a new snippet, call it:
phx:evenodd
Paste this content into the snippet code area and save:
<?php
if ($output % 2) {
return 'ditto_even';
} else {
return 'ditto_odd';
}
?>
Add the following to your CSS file:
.ditto_odd{color:inherit; background-color:red;}
.ditto_even{color:inherit; background-color:blue;}
Solution 3:
Simply use CSS - only works in modern browsers.
Add the following to your CSS file:
li:nth-child(odd){color:inherit; background-color:red;}
li:nth-child(even){color:inherit; background-color:blue;}
You will need to specify a parent "ID" or "class" e.g.
#dittowrapper ul li:nth-child(odd){color:inherit; background-color:red;}
#dittowrapper ul li:nth-child(even){color:inherit; background-color:blue;}
Cheers
UPDATE
Just to ensure that there is no misunderstanding.
Ditto uses a default template which is specified in the language file of the language that is in use.
The default template used in the english.inc.php (assets/snippets/ditto/lang/) is:
<div class="ditto_item" id="ditto_item_[+id+]">
<h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
<div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
<div class="ditto_introText">[+introtext+]</div>
</div>
If you are using the default template at the moment, you will need to adjust it as such e.g.
For "Solution 1" the template chunks would be:
ditto_odd:
<div class="ditto_item ditto_odd" id="ditto_item_[+id+]">
<h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
<div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
<div class="ditto_introText">[+introtext+]</div>
</div>
ditto_even:
<div class="ditto_item ditto_even" id="ditto_item_[+id+]">
<h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
<div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
<div class="ditto_introText">[+introtext+]</div>
</div>
[ed. note: iusemodx last edited this post 13 years, 2 months ago.]