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

--
24 Nov 2015 06: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.


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

Submit

Powered by Active Forums