Customizing the MDI

Adding a Custom Logo

Prerequisite: You have to be familiar with Lycia themes loading rules from this page: Themes Usage and Precedence.

Every Menu added using the Palette items of Form Builder has a default logo at its top. You can customize this logo, replacing the default one with a custom logo of your choice. The recommended file format is SVG.

To make a logo replacement, use one of the CSS capabilities:

add the appropriate selectors to the <application_theme>.css;
create a separate CSS file and import it to the UserTheme.css or <application_theme>.css with the @import statement.

For the importing option, the CSS file must reside in one of the following locations:

the public directory or its child directories:

@import url("/public/_css_menu_logo.css");

the root directory of the program or its child directories:

@import url("_css_menu_logo.css")

@import url("myfolder/_css_menu_logo.css")

Note: For the application CSS file to be loaded at runtime, deploy it to the same location where your application is deployed.

The CSS selectors to use are the following:

/*use this one for the Material Design-based apps*/

.qx-material-design .qx-layout > aside > .qx-info-area > div {

background-image: url("custom_logo.svg");

background-size: auto !important;

}

/*use this one for the jQuery-based apps*/

.qx-jquery-ui.cmsfb:root .qx-menu-type-tree.qx-mdi div#qx-container-menu::before {

background-image: url("custom_logo.svg");

background-size: auto !important;

}

There are three options for specifying the logo location:

local folder : background-image: url("custom_logo.svg");
static resource (for instance, the /public folder): background-image: url("/public/<deployment_path>/custom_logo.svg");
web resource: background-image: url("http://somedomen.com/<path>/custom_logo.svg");

Note: For the locally-based resource to be available to the program at runtime, it has to be added to the <program>.tr2 or UserResources.tr2.

Return to top

Hiding Tabs

Your app's MDI container may contain tabs. In case there’s a tabs bar with a single upper-level tab button, there’s a way of hiding it by uncommenting the following:

#qx-tc-button-0 {

display: none;

}.qx-tabco-buttons:has(.qx-tabco-scrollable-wrapper > :only-child) {

display: none;

}

Return to top