Trying to customize responsive main window with side menu.
If you look at attached screenshots, I would like to
have topmenu items with a bar above like they have a bar below
have submenu items tabbed by 2 or 4 spaces for each submenu level
have the magnifying glass of FTS field to the right (alt. left) of the fts field
How can I do that in my halo extended CSS ?
Also I suggest that when using this template the ‘application.welcomeText’ property is added by Studio in the message pack following ‘application.caption’ and ‘application.logoImage’ ones.
Same for ‘application.logoLabel’.
And these should also be taken care of in the ‘branding’ submenu of the project properties.
To add a border for top menu items you can add the following styles:
// Add top border for all menu roots
.c-sidemenu-item-header {
border-top: valo-border($color: $valo-menu-background-color, $strength: 0.5, $border: first-number($v-border) solid v-tone);
}
// Remove top border for nested menu roots, i.e. for sub menus
.c-sidemenu-submenu-open .c-sidemenu-item-header {
border-top: none;
}
In order to add indents for sub menus you can add the following styles:
// Add padding for sub menus
.c-sidemenu-submenu-open {
padding-left: 20px;
margin-left: 5px;
}
As for the FtsField issue, it has already been fixed and will be published in the very next bugfix release of the platform. Alternatively, if you want to provide a completely different layout for the FtsField, you can override its web implementation - com.haulmont.cuba.web.gui.components.mainwindow.WebFtsField.
Also, I’ve created an issue with your idea about application.welcomeText.
See the following issue in our bug tracker: