Create alternating color rows and a hover effect in the Reports Module
Last Post 24 Nov 2015 05:23 AM by Mark Buelsing. 0 Replies.
Printer Friendly
PrevPrev NextNext
Author Messages
Mark BuelsingUser is Offline
New Member
New Member

24 Nov 2015 05:23 AM Quote Reply  
DNN is already applying a class to the alternating rows, .DNN_Reports_Grid_AlternatingRow

Just add this to the header of the reports module:

<style type="text/css">
.DNN_Reports_Grid_AlternatingRow {background-color:rgba(235, 234, 234, 0.51);}
.HoverRow:hover{background-color: rgba(18, 169, 98, 0.48);}
<script type="text/javascript">
$("table tr").addClass("HoverRow");

Note, if you add this css into your module header, it will apply only to reports on the same page. This allows you to have different css for different pages.

Alternatively, you could add this css to your Site Settings / stylesheet editor if you wanted the alternating rows colors to apply to all reports on all pages.

Quick Reply
Security Code:
Enter the code shown above in the box below.


Powered by Active Forums

Welcome Photographers!

We would like to make connections with amateur photographers who would like to see their beautiful images used on the Internet.

If you are interested, leave your name and email and we'll contact you when a particular photo is needed for one of our website projects. If you have a photo that fits the need, then send it to us. At the very least, you will get credit for the photo. Some projects will pay for your photo. It is an opportunity to get your work published!

Thank you

Mark Buelsing