Custom CSS theme background image change on condition

0
I have the follwoing CSS snippet from custom theme .zip file: .MxClientlogoPane { position: absolute; top: 2px; left: 15px; width: 159px; height: 60px; background: url(images/rememberlevsortboks.png) no-repeat top center; } What I would like to achive is to have the image (.png) file to be changed on condition in Mendix (depending on the different providers we have).
asked
4 answers
4

I would model the logos within Mendix as Image entity. Then retrieve them based on the user or page context within the layout.

Else you have to look into CSS injection but that would involve some custom widget/javascript work.

answered
1

If you want to apply a background on a per user role basis you can use the classes that are applied to the body to change the background. Every user role that a user has will be applied as a class to the body: 

<body dir="ltr" class="profile-desktop role-member">

You can then adjust your css like so, changing member for the role name:

.role-member .MxClientlogoPane { position: absolute; top: 2px; left: 15px; width: 159px; height: 60px; background: url(images/rememberlevsortboks.png) no-repeat top center; }

The other answer are also valid, but require some javascript or building in logic into the Mendix app. If you need to apply the logo based on things other than the role I would use the other methods suggested.

answered
0

Therese like maybe two ways I can think of doing exactly what you want.

For the first one, you need JQuery Javascript library for the following. You can build a string with microflows of the following form:

$(".MxClientlogoPane").css("background","/path/to/image.png");

Insead of building a custom widget I took the html snippet thing and modified it that it reads from a microflow so you have the option of building the content in a microflow and render as html or execute as javascript (which is what you will do in this case). If you want you can try make a widget like that, or ill email you JSLabel.mpk (ockert8080@gmail.com) and you can try it out.

Secondly, you can use a mendix image, but the problem is that maybe you dont want the entire <img src="..."></img>, just the path. For that you can actually let the image retrieve using that image viewer thing in the modeler (just give it a nice unique class name), and then put a htmlsnippet rendering as javascript at the bottom of the page and then extract the image path (using that unique class name to home in on the image). It actually does work, and ive used that to make paralax sliders and stuff like that where i just want the background source path, not the entire <img></img> thing.

answered
0

Thank you all for the answers. What I did, though, is to create two separate .css files with different images for each translation page. Very simple and it did work in my case.

answered