====== Overriding Reportico CSS and javascript ======

===== CSS =====

Most of reportico's output uses CSS to format the pages. These files are stored in 
REPORTICO_ROOT/vendor/reportico-web/reportico/themes/THEME_NAME/css
There are a lot of other CSS files in the project, but I'm unclear if they are used or not.

Many of these can be overridden with the !important tag in your own CSS, though there are some that are marked that way in reportico's CSS files, so they can not be overridden.

I needed to turn off the default date picker as it was not working on my client's system, so I put the following two items in my css file.

<code css>
/* hide any id's which have reportico-date-label in them (using regex's) */
[id^="reportico-date-label"], .ranges {
     display: none !important;
} 

/* hide daterangepicker */
.daterangepicker {
display: none !important;
}
</code>

===== Javascript =====

Reportico also uses a lot of javascript, and in some cases, this can be modified in your calling script also. The following code inserted into the bottom of [[software:reportico:calling|reports_run.php]] appears to work, but not really sure.

<code javascript>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elementsToHide = [
      'reportico-date-label-startdate',
      'reportico-date-label-enddate'
    ];
    
    var elementsWithClass = document.getElementsByClassName('ranges');
    
    for (var i = 0; i < elementsToHide.length; i++) {
      var element = document.getElementById(elementsToHide[i]);
      if (element) {
        element.style.display = 'none';
      }
    }
    
    for (var j = 0; j < elementsWithClass.length; j++) {
      elementsWithClass[j].style.display = 'none';
    }
  });
</script>
</code>