Good question!
Great thing about MODx is how it’s so easy to adapt templates - the one I’ve used for this site is actually about the fifth version of a site I downloaded via Theme Forrest - and over the course of developing those sites I’ve continually tweaked it so it will cater for the Modx functionality - hence that’s meant using Ajax Search, Maxi Gallery, Jot, Ditto, Image Resizer, Eform and a whole lot more!
The key to doing the above is to be able to understand the various CSS files, not only for the main site, but navigation, slider as well as the search.
Once you understand rhe "template layout" so you can then configure various TV’s for the pages and create extra templates for additional sections of the site.
Some sites I use a Wayfinder Menu I configured myself others I sue a hard coded version
I would not classify myself as a designer, but one who can build a good looking site - so in effect I do every thing myself including graphics / logos...
What I find interesting is that I go through various templates with clients and they all like this style of site - ok it’s a fashion thing, but if you look at the code these are so SEO friendly with loads of H1 tags and the like.
So taking that template here are a some sites more or less configured around the original
http://www.gavinbaylis.com/ my own site!
http://www.elainedeed.com/ wife’s site
http://www.carnemill.com/
http://www.a-r-t-photography.co.uk/
http://www.worthing-surveyors.co.uk/ just about to launch
http://www.whitenoiseaudio.co.uk/
So this is what the template code is of one site
{{Header1}}
{{Navigation}}
{{Slideshow}}
<div id="content">
<div id="content-left">
<div id="maintext">
[*#content*]
<hr class="dotted" />
<br />
<ul class="inline">
<li>
[*#Box1*]
</li>
<li>
[*#Box2*]
</li>
<li class="nomargin">
[*#Box3*]
</li>
</ul>
<p> </p>
<p> </p>
<ul class="inline">
<li>
[*#Box4*]
</li>
<li>
[*#Box5*]
</li>
<li class="nomargin">
[*#Box6*]
</li>
</ul>
</div>
<!-- end #maintext -->
</div>
<!-- end #content-left -->
<div id="content-right">
<div id="sideright">
<div class="news-container">
<div class="box">
<h2>Latest News</h2>
<p>
{{Ditto}}
<p> </p>
</p></div><!-- end box -->
</div><!-- end news-container -->
<p> </p>
<div id="rics">
{{Rics}}
</div>
<p> </p>
</div><!-- end #sideright -->
</div><!-- end #content-right -->
<div class="clr"></div><!-- end clear float -->
</div><!-- end #content -->
{{Footer}}
<!-- end #footer-text -->
</div><!-- end #footer -->
</div><!-- end #container -->
</div><!-- end #wrapper -->
</body>
</html>
