User Tools

Site Tools


themes

Themes

Reportico 6 introduces the themes facility that allows you to easily customise both the layout of Reportico screens and the styling. You may wish to rework or hide certain elements of the report, change the colour of page titles, swap the order of charts and detail, or add your own javascript. All Reportico screens can be changed so you can change the look and feel of report menus, criteria entry screens and the report output.

Reportico ships with a default theme that resides under the Reportico theme folder and is named “default”. To create your own theme just copy the default folder to another name and in the Reportico start script start.php ensure the following is set ..

$q→theme = “my_theme_folder_name”;

Theme Folders

Each theme folder contains three sub-folders

  • css - contains file reportico.css defining styles for Reportico. You can change the look of Reportico output by modifying this. See below
  • templates - contains layout files ( in Twig format ) for the menu, criteria entry and report output
  • images - used for button images, logos picked up by the style sheet

The templates folder contains snippets of template HTML code that make out the final layout. These are some of the key template files which would be useful to change in order to customise Reportico.

header.inc.tpl - the wrapper for all Reportico pages, sets the browser tab title, includes the css and javascript for reportico and required libraries ( eg bootstrap ). You may add your own javascript entries here.

menu.inc.tpl - the layout of report project menus, here you will find a loop which prints the main project menu which you might like to restyle. It also includes the optional dropdown navbar template ).

prepare.inc.tpl - the layout of the report criteria entry screen, it includes the layout of the criteria entry fields, the report description, the lookup area and the report output format options. It would be possible to reengineer this page to change the way criteria items are presented, for example changing the PDF, HTML button icons, making the description appear as a popup.

execute.inc.tpl - the wrapper for report output ( this is used instead of header.inc.tpl for when generating report output directly from a link and not going through the menus ). This wouldbe only rarely be changed, it is the next option that defines the layout of the report output.

execute-content.inc.tpl - the layout for HTML report output, and PDF also when using the default PhantomJS PDF generator. In this file you will see the layout for handling the page titles, page headers, page footers, the criteria summary box, group headers, page blocks, column headers, column values, group trailers. There is a lot of scope for reorganising and restructuring

execute-content-form.inc.tpl - the layout for HTML report output when using the FORM style output as selected from the Page Setup screen. This is the layout showing a page block per row of report data.

Theme Caching

Reportico makes use of the Twig templating library in order to control layouts and styles. Twig has the ability to compile theme template pages underneath the cache folder in order to increase the speed of delivering output to the user. By default, in Reportico 6.0.10 onward, this caching is turned off which means that any changes to theme template files are recompiled each time reflecting immediately in the browser. You would normally turn on caching

In order to enable or disable caching, the parameter disableThemeCaching should be set, which can be found in the Reportico runner function you are using by default start.php or run.php in earlier versions.

```

 $q->disableThemeCaching = true|false;

```

Example Style Changes

Some of the style sheet tags in the theme reportico.css file are more obvious than others in terms of what they control. So it may take some attempts to change this to your requirements.

This example, changes the text and background colors of the prepare screen, by changing the tags .reportico-title-bar, .reportico-prepare-toolbar-pane input, .reportico-prepare-crit-box, #criteriaform .navbar and by adding some dropdown menu navbar styles so that it looks as below :-

In order to produce this we alter the following ( changes in bold ) :-

Change toolbar input buttons to a nice blue

  .reportico-prepare-toolbar-pane input
  {
      float: right;
      font-weight: 700;
      margin: 0px 5px 0px 0px;
      border: 0px solid #888888;
      text-decoration: none;
      background-color: #47E;
      height: 42px !important;
      cursor: pointer;
  }

Change title bar to white on black

  
  .reportico-title-bar 
  { 
      font-size: 18pt;
      text-align: center;
      border-bottom: 1px solid #d0ccc9;
      margin: 0px !important;
      padding-bottom: 2px;
      padding-top: 10px;
      padding-left: 20px;
      background-color: #000;
      color: #fff;
  }
  
  

Change main criteria entry area to white on nice blue

  
  .reportico-prepare-crit-output-options,
  .reportico-prepare-crit-box
  {
      width: 100%;
      border: none;
      border-width: 0px;
      border-color : #FFFFDD;
      background-color: #47E !important;
      color: #fff !important;
  }
  

Change navigation menus to white on turquoise ( important required to overwrite bootstrap )

  #criteriaform .navbar, .reportico-menuForm .navbar
  {
      margin-bottom: 0px;
      background-color: #188 !important;
      color: #fff !important;
      border: none;
  }
  

Change navigation menu text and header label to white text ( note this is new )

  
  .navbar-default .navbar-nav>li>a,
  .navbar-default .navbar-brand
  {
      color: #fff !important;
  }
  

Note instead of changing styles in reportico.cs all the styles can be overridden and changed within the the template files, and new tags can be added to reportico.css which can be referenced in the template. For example you could create a logo style and add a div element referencing your new tag in the header template to show it on each page.

Changing Report Output

The execute.inc.tpl file contains the layout for the default tabular report output. Here it is possible to move content about and restyle it, add in images and run custom javascript.

For example you can change the font to times-roman here or the text color and add an empty box at the end of each row which could be used as a tickbox when printed

This is made possible with modifications to the execute.inc.tpl to change the font family and color ( look at the end of the following ..

  {# Begin new page =============================================== #}
  <div class="reportico-paginated {{ AUTOPAGINATE }} original-page 
       page-size-{{ PAGE_SIZE }} page-orientation-{{ PAGE_ORIENTATION }}" 
       style="zoom1: {{ ZOOM_FACTOR }}; padding-top: 0px; 
              padding-bottom: {{ PAGE_BOTTOM_MARGIN }}; 
              padding-right: {{ PAGE_RIGHT_MARGIN }}; 
              padding-left: {{ PAGE_LEFT_MARGIN }}; 
              font-family: times; 
              color: #008">

The extra tick box and styling for it is done as follows. Note the style for the TH element is taken from the column header style definition of the first column so that it matches.

      {# Start of group/report - new detail block  ======= #}
      {% if row.openrowsection %}
      <TABLE class="{{ CONTENT.classes.page }} reportico-page" style="{{ CONTENT.styles.page }}">
  
          {# Column Headers #}
          <THEAD>
          <TR>
          {% for columnHeader in page.headers %}
              <TH style="{{columnHeader.styles}}">
              {{ columnHeader.content }}
              </TH>
          {% endfor %}
              <TH style="{{page.headers[0].styles}}">
              Tickbox
              </TH>
          </TR>
          </THEAD>
  
      {% endif %}

Now we have the extra column for the tick box header, we can add the extra cell for an empty box.

      {# Report Detail Row  ================================================ #}
      <TR class="reportico-row" style="{{ CONTENT.styles.row }}">
      {% for column in row.data %}
          <TD style="{{column.styles}}">
          {{ column.content }}
          </TD>
      {% endfor %}
          <TD style="{{column.styles}} border: solid 1px black;">
          &nbsp;
          </TD>
      </TR>
themes.txt · Last modified: 2018/11/18 14:06 by admin