myDBR offers a wide variety of options to customize the look and feel of the application.
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 the 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.
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 the user's extension's setting.
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 include 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&u1=1&m=60&h=83e484f935d7b1d02d1fa07ca1b280a7ef9e1062&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.
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
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
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.
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 allows you to white label 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.
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 files is inserted into div with class oem_login_bg into the login screens.
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">