Menu
Create alternating color rows and a hover effect in the Reports Module
Last Post 11/24/2015 6:23 AM by Deleted User. 0 Replies.
Sort:
PrevPrev NextNext
Author Messages
Deleted User
New Member
New Member
Posts:62


--
11/24/2015 6: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);}
</style>
<script type="text/javascript">
$(function(){
$("table tr").addClass("HoverRow");
});
</script>

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.
Add Reply

Quick Reply
toggle
  Username:
Subject:
Body:
Security Code:
CAPTCHA image
Enter the code shown above in the box below.