Sharperlight – Web Channel Branding with Custom Headers, Styling and Images
Summary of the types of branding and customisation possible
- Web page tab and shortcut icon
- User Logon headers and CSS styling
- Global Report CSS styling
Custom Folder Location
Relative URL reference example
<img src=”File/Custom/Sharperlight.png” height=”100%” width=”100%”>
Studio Datamodel Browser Content Folder
Relative URL reference example
<img src=”File/Content/DataModelCode/Web/Logo.png” height=”50px” width=”100px”>
User Logon Branding and Styling
The UserLogonHeader file will usually contain the CSS styling for example
<img src=’File/Custom/Sharperlight.png’ style=’width:400px;height:100%;’>
The favicon.ico file will override the icon that is displayed on the tabs and when a shortcut is created to the web page. This file like the others is optional.
See the online help for more details
Adding CSS styling and custom HTML to published reports
The Publisher Options tab allows custom CSS styling and Header / Footer html content to be added to any report. Active one of the sections and place the inline HTML or place links file resources in your Custom folder or Datamodel Browser Content.
If you customise the colours of your main landing page you can have all other reports with a matching group prefix also inherit that colour set. This is done by using the &glColor=groupGrefix1,groupPrefix2,..groupPrefix(n) URL parameter. In this way you can have one published report that acts as a template determining the styling for one group or many groups of reports that. When defining the groups to apply the styling to it is possible to shorten the groups codes if required. For example if you had two published groups of DEP-HR and DEP-FIN you could use &glColor=DEP-HR,DEP-FIN or &glColor=DEP- for the same results. Generally you would put these parameters on the main landing page to ensure they are run before browsing to the sub reports. The service records these parameter values in memory and then applies the styling to any published report that has a group that starts with the values listed with priority given to the best match. When a target report already has a CSS, Header or Footer section then the global template is appended to the target reports existing section. When there is a overlap in the groups due to there being more than one published template then the one that has the more specific group match is applied. It is possible to change the groups in the parameters many times, however to disable the logic completely the service will need to be restarted.
There are five types of group styling template parameters as follows
- &glColor=g1,g2,..group(n) – Apply the Publisher general colour palate to all groups starting with
- &glChartColor=g1,g2,..group(n) – Apply the Publisher chart colour palate to all groups starting with
- &glCSS=g1,g2,..group(n) – Apply the Publisher CSS section to all groups starting with
- &glHeader=g1,g2,..group(n) – Apply the Publisher header section to all groups starting with
- &glFooter=g1,g2,..group(n) – Apply the Publisher footer section to all groups starting with
The other URL parameter that is quite useful is &layout=auto which transforms the web page depending on if it’s a mobile or tablet device or not.
Example of a report custom header where the a header template is obtained from the Reference button and then selecting the Custom Report Header HTML template. Notice the Logo.jpg image is referenced in the section <img src=’File/Custom/Logo.jpg’ height=’48’ width=’64’ style=”border-style: none” /> Normally you would just have a custom header like this on the main landing page which has a menu of some kind to assist with navigating to the various reports so that you’re not putting the header on every report.
This example shows how to apply custom CSS styling to a report. The browser developer mode F12 can be used to discover the elements of the HTML web page you want to change. Once you have tried the various changes they can then be placed in the Publisher / Options / CSS button window. It should be noted that most of the basic colour styling and font sizing can already be done in publisher using the settings on the various tabs.
If you want to centralise your CSS styling into the Custom folder then change the CSS content in Publisher to import/link the CSS file from the Custom folder like this.
<link rel=”stylesheet” type=”text/css” href=”File/Custom/Report.css” />
If you use this link to import the CSS styling make sure you don’t wrap the styling with the tags <style> and </style> as this type of link already assumes the content will be CSS styling.
Adding CSS styling globally to all published reports
This the online RESTful service help on Custom CSS styling
Custom CSS files can be applied to all Reports or for individual Report based on their Published Group.Code.
See the samples in the CustomCSS.zip file which can be unzipped to Folder
Remove the $ from the sample file name to activate them
Note: You will need to restart the Sharperlight Windows Service for these changes to take affect if you have just unzipped or renamed a file.
Data Entry Forms
See online RESTful service help on Data Entry Forms for addition details
Individual Data Entry Forms can already have basic styling applied by using the various URL parameters to set the colours, font size number or items per row etc