This is an old revision of the document!


Themes

Reportico 6 introduces themes 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 called, unsurprisingly default, that resides under the Reportico theme folder. To create your theme just copy the default folder it to another name and in the Reportico start script, whether it is the default start.php ( run.php prior to 6.0.9 ) 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

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 Theme Changes

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.

  • themes.1542545154.txt.gz
  • Last modified: 2018/11/18 12:45
  • by admin