Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
themes [2018/11/18 13:48]
admin
themes [2018/11/18 14:06] (current)
admin [Themes]
Line 1: Line 1:
 ====== Themes ====== ====== 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 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 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 ..+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";​ $q->​theme = "​my_theme_folder_name";​
 +
  
 ====== Theme Folders ====== ====== Theme Folders ======
Line 121: Line 122:
 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. 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 ​... like so+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 ​
  
 +{{:​execute-tickbox.png|}}
  
 +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">​
  
-  
-  
-======= Example Style Changes ======= 
  
 +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.1542548923.txt.gz
  • Last modified: 2018/11/18 13:48
  • by admin