PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Background color of alternate rows

Gravity Support Forums » Plugin Support » Gravity Forms

  1. yannibmbr
    Member

    So I'm using gravity forms as a directory listing. I'd like to know how to style the directory output such that every other row is a different color. How would I accomplish that?

    Thanks.

    http://yoga.digisavvy.com/teachers-directory

    Posted 13 years ago on Sunday March 6, 2011 | Permalink

  2. Kevin Flahaut
    Administrator

    You'd need to use jQuery to dynamically add alternate row styles.. something like this added to your page template.

    jQuery(document).ready(function() {

	// add odd and even classes to table rows
	jQuery('table tbody.user-list > tr:odd').addClass('oddrow');
	jQuery('table tbody.user-list > tr:even').addClass('evenrow');

});

    then add the new classes to your theme stylesheet

    tr.oddrow {background-color:#fff}
tr.evenrow {background-color:#eee}
    Posted 13 years ago on Sunday March 6, 2011 | Permalink

  3. yannibmbr
    Member

    Hey Kevin,
    Thanks so much for the feedback. I wasn't able to implement your exact suggestion successfully, but it lead me to finding out how I could. I saw similar documentation on jquery.com and saw the following example:

    <!DOCTYPE html>
<html>
<head>
  <style>

  table {
    background:#f3f7f5;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>

    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>$("tr:odd").css("background-color", "#bbbbff");</script>

</body>
</html>
    Posted 13 years ago on Monday March 7, 2011 | Permalink