Customization

myDBR offers wide variety of options to customize the look and feel of the application.

Customize the Main Screen

The Main Screen offers a starting point for report launching.

Customizable items include:

Top header / dashboard
Fully customizable using user/main_top.html file. Can include dynamic content (full reports, included image reports etc)
Sidebar
Meant for company logo / general greeting area. Fully customizable.
Notifications
For short term notifications for users. Can be set inside the application without changing any files.
Report categorization
In addition to folders, myDBR can categorize reports / folders within one folder. User selectable colors.

Customize the report

If you want to customize the report header and the footer, you can do it by changing the content of the user-directory. Files in the directory are:

interface/themes
Stylesheet defining the UI elements throughout the application.
user/reportheader.html
Report header can include a reference to a company logo / text one wishes to include in the report header.
user/images/companylogo.png
A file for your company logo. The logo size is defined in the user/reportheader.html file.
user/defaults.php
Override the myDBR's default values originally defined in mydbr/defaults.php
user/userstyle.css
Stylesheet to override / define own styles used in the application.
user/extension_init.php
Extension initialization for user's extension's setting.

Customize the Top header / dashboard

The main view's top header (the dashboard) can include report content / single report elements like charts or any HTML / JavaScript you want. The content to be shown will be placed to the user/main_top.html file.

To inlude a full report to the dashboard, you can use a predefined embed_url-JavaScript call which will take the report URL as a parameter. When a report is embedded, add &embed=2 to the URL so that only the report content is embedded.

<script type="text/javascript">
  embed_url("http://myserver.com/mydbr/report.php?r=59&m=45&h=84410e9a181a9f93ca85b1a1811351c415f1be85&embed=2");
</script>

If you want to just include images, you can include them directly using img-tag Use getchart-parameter to choose which image to show. If the report just includes one image, use getchart=1.

<img src="report.php?r=496&amp;u1=1&amp;m=60&amp;h=83e484f935d7b1d02d1fa07ca1b280a7ef9e1062&amp;getchart=1" style="width:320px;height:150px;" alt="first" />

If you want to include different content with different language, you can use the localization featured. To do this, put #{DASHBOARD} into the user/main_top.html, and define the desired content in the localization at top banner.

Customize the PDF output

You can include your own logo into PDF output by adding the following lines to the user/defaults.php

$mydbr_defaults['export']['pdf']['logo'] = 'filename.jpg'; // where filename.jpg is an image in user/images
$mydbr_defaults['export']['pdf']['logo_width'] = xx; // where xx is the logo width in pixels

Using CSS for customization

myDBR allows report customization with your own css. Options for CSS customization include:

  • Creating your own theme
  • Adding own CSS definitions to user/userstyle.css
  • Adding CSS inside a report

Creating your own theme

myDBR offers UI customization with themes. A theme is a CSS definition which defines UI elements for all myDBR layouts. Creating a new css-file in interface/themes makes it available as a theme in the myDBR. To create a new theme, use the existing ones as basis.

Adding own CSS definitions to user/userstyle.css

The file user/userstyle.css is used to define commonly used styles often shared with multiple reports. These can be result set, row column and etc. styles.

A report with reportID (r parameter in URL) has a DIV with classes "content report_519". "content" is shared with all reports, "report_XXX" class allows styling an individual report in userstyle.css.

OEM customization

OEM customization allows you to whitelabel myDBR as your own solution. Branding allows you to add/replace myDBR logos/texts with your own.

The application logo, application name, visibility of the header and the footer can be controlled from the Environmental settings. Additionally, with OEM license, many of the customizable objects have additional 'oem_*' classes so you can style them with CSS.

Customizing OEM login screen

In addition to login notifications and userstyle.css, one can add HTML/JavaScript into the OEM login screen by modifying the user/oem/login_bg.html and google_login_bg.html-files. The content of these file is inserted into div with class oem_login_bg into the login screens.

Customizing OEM favicons

You can customize the application's favicons by overriding the default icons defined in defaults.php $mydbr_defaults['oem']['favicons']

Definitions:

/* Create new link-headers  */
$mydbr_defaults['oem']['favicons']['icons'] = array(
  array('type' => 'image/png', 'rel' => 'apple-touch-icon', 'href' => 'oem-touch-icon-iphone.png'),
  array('type' => 'image/png', 'rel' => 'apple-touch-icon', 'href' => 'oem-touch-icon-ipad.png', 'sizes' => '152x152'),
  array('type' => 'image/png', 'rel' => 'apple-touch-icon', 'href' => 'oem-touch-icon-ipad-retina.png', 'sizes' => '167x167'),
  array('type' => 'image/png', 'rel' => 'apple-touch-icon', 'href' => 'oem-touch-icon-iphone-retina.png', 'sizes' => '180x180'),
  array('type' => 'image/x-icon', 'rel' => 'shortcut icon', 'href' => 'oem-favicon.ico'),
);
Will create favicon headers like:
<link rel="apple-touch-icon" type="image/png" href="oem-touch-icon-iphone.png">
<link rel="apple-touch-icon" type="image/png" href="oem-touch-icon-ipad.png" sizes="152x152">
<link rel="apple-touch-icon" type="image/png" href="oem-touch-icon-ipad-retina.png" sizes="167x167">
<link rel="apple-touch-icon" type="image/png" href="oem-touch-icon-iphone-retina.png" sizes="180x180">
<link rel="shortcut icon" type="image/x-icon" href="oem-favicon.ico">