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 12:31]
admin [Example Style Changes]
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 11: Line 12:
 Each theme folder contains three sub-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 +  ​* **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 +  * **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+  * **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 ====== ====== Theme Caching ======
Line 24: Line 41:
    ​$q->​disableThemeCaching = true|false;    ​$q->​disableThemeCaching = true|false;
 ``` ```
- 
-====== Example Theme Changes ====== 
  
 ======= Example Style Changes ======= ======= Example Style Changes =======
Line 31: Line 46:
 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. 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 reportico-title-bar ​tag and the +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 :-
  
 {{:​theme-criteria.png|}} {{:​theme-criteria.png|}}
 +
 +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 ​
 +
 +{{:​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">​
 +
 +
 +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.1542544293.txt.gz
  • Last modified: 2018/11/18 12:31
  • by admin