Menu

Branding with Custom Headers, Styling and Images

With the release of version 4.7 it is now easier to brand and style the Web Channel content with custom HTML headers, images and CSS styling.  To assist with adding customised content to the Web Channel you can now create a Custom folder under the Metadata Folder on the Application Server.  This Custom folder is where all your HTML, images, JavaScript and other file assets can be stored.  This folder will not be cleared down like the Resources folder when upgrading to newer versions of Sharperlight so it is recommended that this Custom folder be used for all on site additions. (Related another post)

Summary of the types of branding and customisation possible

  • Web page tab and shortcut icon
  • User Logon headers and CSS styling
  • Report custom content like HTML headers, JavaScript and CSS styling
  • Global Report CSS styling
  • Add custom content like html, images, JavaScript and web content folders

Custom Folder Location

Folder Location

C:\ProgramData\SharperLight\Metadata\Custom

Relative URL reference example

<img src=”File/Custom/Sharperlight.png” height=”100%” width=”100%”>

Studio Datamodel Browser Content Folder

It is possible for a Datamodel to also have their own HTML content like html, JavaScript and Images too.  These are embedded in the Datamodel by using the Studio Include Files view Browser Content folder.

Relative URL reference example

<img src=”File/Content/DataModelCode/Web/Logo.png” height=”50px” width=”100px”>

Reference the online help

User Logon Branding and Styling

The Web Channel user logon and related pages like password change can be changed to display your own custom header and CSS styling.  It is possible to run your own JavaScript as well.  There are two reserved file names that if created under the Custom folder will merged with the User Logon pages.  The Service will need to be restarted if you have just created these three files. – See also “Branding & Styling – User Logon Screen“

UserLogonHeader.html

UserLogonBody.html

favicon.ico

The UserLogonHeader file will usually contain the CSS styling for example

<style>
h2 {
  background-color: #740a0a;
  background-image: none;
  color: white;
}
</style>

While the UserLogonBody.html file will usually contain a logo image, html or JavaScript

<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.

See also “Branding & Styling – Menu for the Published Reports“.

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.

<style type=”text/css”>
#ReportTitle {
  font-family:fantasy;
  font-size:24px;
}
</style>

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

C:\ProgramData\SharperLight\ClientSettings\CustomCss\

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

For example

&fontSize=24&bcolor=black&fcolor=white&fieldsPerLine=2

To inject your own HTML, CSS and JavaScript you can use the URL parameter customHTML=[group.code] where the group.code is the Published report that you want to inherit the CSS, Header and Footer details from

&customHTML=Styling.EntryForm

Related Posts