The goal of any Content Managements System (CMS) should be to allow the content managers to create as many pages as they like without deviating from the original website design. Much of this can be done with carefully planned out cascading style sheets (css) and restricting the wysiwyg editor to the standard html formats such as paragraph, heading 1 (h1) etc. Sometimes a little javascript can further remove the formatting burden from content maintainers.

Recently I was implementing a design in Drupal 7 which called for tables of alternating colors known variously as zebra striping, alternate row striping etc. While this design technique has been around for years it has been approached in various ways largely due to evolving standards. The challenge stems from their being no direct way to stripe or style one particular row differently from another in html without adding a class to it until CSS version 3. One article I liked advocates the use of CSS3 to do this which results in cleaner markup and and works without any javascript.  The downside of this is that CSS3 has patchy support across older browsers which many site visitors still use. In the end a combination of the CSS3 definitions and the jQuery (natively supported in Drupal) method outlined here maximized the number of users who would come to the site and see the table formatting at its best.

<script type=”text/javascript”>

$(document).ready(function(){

$(“table tr:nth-child(even)”).addClass(“alt”);

}); </script>

I hope you find this a useful example of the efforts we at Accella go to in order to keep clients, users and our design team happy!