Customizing Sidemenu Background Color

Support
#1

Hello everybody

I am pretty new to jmix and Java development and “suffering” from almost 30 years desktop application development. So please excuse my question if it is far too simple or somewhere explained already. At least I have not found the path to success.

I simply wan’t to change the appearance of the sidemenu - especially the background color. Playing around with helium theme editor, extending styles etc. brought partially success but not for the background color.

Is there any straight way to do so? My thx to you in advance.

best regards

Michael

#2

Hi Michael,

no worries, we are all new to something at some point. Every question is welcome. And you can be sure: behind one person asking there are at least ten people having the same problem :slight_smile:

Basic Settings for the colors you can find here in the Helium Editor: https://demo.jmix.io/helium-editor/#main (you have to check the Advanced Mode)

CleanShot 2022-07-08 at 20.54.43@2x

If you go ahead and want to do further adjustments, you can take a look at the Jmix Petclinic example. There in the custom Theme configuration, you can find a lot of custom definitions of the side menu including the background colors: jmix-petclinic/src/main/themes/petclinic at main · jmix-framework/jmix-petclinic · GitHub

For all of those, you will have to create a custom Theme (see: Creating a Custom Theme :: Jmix Documentation).

Cheers
Mario

3 Likes
#3

Thx a lot Mario. Sorry for the late reply and late appreciation. Now I am back on track and will continue my journey as Rookie.

Best regards, Michael

#4

hello Mario, I followed the documentation to build a custom theme but my customizations to the sidemenu do not appear.

My helium-extended.scss looks like this:

@import “…/helium/helium”;

@mixin helium-extended {
@include helium;

/* Main Window */

–maintabsheet-tabcontainer-background-color: #E3F7FF;

/* SideMenu */

–sidemenu-background-color: #68EFFF;
–sidemenu-collapsible-submenu-background-color: #80F8FF;
–sidemenu-title-background-color: #61BAFF;
}

In my main-screen.xml the sidemenu is defined as below:

            <sideMenu id="sideMenu"
                      width="100%"
                      stylename="jmix-drawer-content"/>

Did I missed something?

Thx for any hint in this issue.

best regards,

Michael

#5

hi all - update to my previous post. All of a sudden the changes / settings appeared in the application. BUT … changes do not always seem to show their effect right away. I. e. changing the applications background color worked but changing it back (deleting the reference in my customized theme) does not have any effect and the background color remains despite the fact, that no actual setting in the project refers to this setting.

I watch the compile steps and I get the information, that the themes are rebuild.

Any idea? I am really stucked here.

best regards

Michael

#6

… found the cause - the changes in themes will only appear after clearing the browser cache completely. And I need to clear it each time.

Any idea how to work around this issue?

thx a lot

Michael

#7

Hi Michael,

You shouldn’t have to completely clear your browser cache. After I make a change to my stylesheet, I restart the application and when the login screen loads, fully reload the page by holding down shift and clicking the refresh button in your browser. The shift key basically tells the browser to reload the screen’s cached elements. If the screens all use the same stylesheet, reloading one screen should load it for all. CSS is a pain in the back side, but this works for me.

Cheers,
Adam

1 Like
#8

Thx Adam, I will try this out!

It looks like I have found on more way which seem to work without refreshing the browser. After making changes to the scss-file, I use Strg+F5 which means “rerun the application”. I have no clue what actually is responsible that it works now but it works.

Cheers,

Michael