To achieve this:
1. Since the link is contained inside a container with an id#, you’ll need to wrap it in a container with an id too so it will accept a style, so create a chunk with the following code (in this example I named mine ReadMoreLink)
<div id="myclass"><a href="[+url+]" title="[+text+]" id="myclass">[+text+]</a></div>
2. To change the "Read More..." text and the link template, add the following params to your ditto snippet call, replacing "More.." with your link text and "ReadMoreLink" with the name of the chunk you created:
&truncText=`More...` &tplTrunc=`ReadMoreLink`
3. You’ll need to add the styles to your css file, in this example I added this to my stylesheet:
#myclass {
margin-right: 20px;
float:right;
clear:both;
}
#myclass a, #myclass a:visited{
text-align: right;
color: #618200;
border: dotted 1px #444444;
}
#myclass a:hover{
color: #618200;
border: dotted 4px #444444;
}
That should get you going, and it is a good idea to browse through the .css stylesheets in the assets/templates/modxhost/XXX.css folder as they have the examples for all the snippets.
