Creating New Themes

Applies to: Kyvos Reporting

Kyvos Reporting provides support for portal-wide themes, allowing administrators to tailor the look and feel of the application to match corporate branding or user preferences. Themes control the visual elements such as logos, colors, styles, and layout components across the portal.

What You Can Customize

You can change the appearance of the following elements using themes:

Logo and branding images
Home and logout images
Menu pads
Colors and background
UI components via stylesheets

Default Theme Configuration

Kyvos Reporting is shipped with a default theme, which serves as the base for any customization.

Default image location:

<Install_Dir>\Kyvos Reporting\Jakarta\webapps\kyvos reporting\common\images\Default

Default stylesheets location:

<Install_Dir>\Kyvos Reporting\Jakarta\webapps\kyvos reporting\common\stylesheets\Default

Note

File and folder names are case-sensitive.

Steps to Create a New Theme

To create a custom theme (for example, Ocean), copy the relevant Default folders to a new folder named Ocean, adjacent to their original locations.

Example folder structure:

Kyvos Reporting\common\images\Ocean
Kyvos Reporting\common\stylesheets\Ocean
Kyvos Reporting\custom\templates\grids\dhtmlx\Ocean
Kyvos Reporting\custom\templates\matrix\Kyvos Reporting\Ocean
Kyvos Reporting\tools\dhtmlx\Ocean
Kyvos Reporting\tools\dojo\Ocean
Kyvos Reporting\tools\editarea\Ocean
Kyvos Reporting\tools\editarea\images\Ocean
Kyvos Reporting\tools\jquery\Ocean
Kyvos Reporting\webdesigner\images\Ocean
Kyvos Reporting\webdesigner\stylesheets\Ocean

Once the new folders are in place, customize the images and CSS files as needed.

Tip
To make a theme the default (including the login screen), rename the new theme folder to Default. Back up the original Default folder if needed.

Logo Customization

Kyvos Reporting uses a specific logo image located here:

<Install_Dir>\Kyvos Reporting\Jakarta\webapps\Kyvos Reporting\common\images\Default\Logo\logo.png

Logo specifications:

Name	Dimensions

Name	Dimensions
logo.png	Width: Any, Height: 44px

Replace the logo.png file with your custom image using the same name and dimensions.

Modifying Stylesheets

Use the following stylesheet files to modify UI components:

Kyvos Reporting.css
viewer.css

To update a theme (e.g., Natural), open the theme-specific stylesheet and update the relevant classes. For instance:

<Install_Dir>\Kyvos Reporting\Jakarta\webapps\Kyvos Reporting\common\stylesheets\Natural\Kyvos Reporting.css

Edit the CSS classes to control the appearance of buttons, panels, and other UI elements.

Notes

Theme changes are visible after login.
You can maintain multiple themes and allow users to select a preferred theme.
Changes in themes do not impact report design but only portal appearance.