How to do CSS page styling on data driven event

Hi All, I want to develop a page where a container within the page will have a different background colour (and perhaps other CSS styling) when a certain event occurs. The idea is to highlight to the user that this container needs their attention when the event is triggered withing the db data. So basically, the container will be white when the data is present and red with the data is missing and needs the users input. Can anyone advise me on the best way/practice how this should be done within the code/pages please? Thanks in advance   Regards Adrian
4 answers

Hi Adrian,

You can use the CSS Selector Helper Widget for this.

What you can do is provide an extra attribute for the entity your container refers to. Make this some kind of status attribute with 2 statusses, filled and empty or whatever names you prefer.

Then use the css selector helper widget to provide an extra tag as css class on the container. Then in css in your theme directory you can provide styling for this class.

Documentation on the following link will help you get it done:




Hmm, I've looked at the CssSelectorHelperWidget it looks like the Widget I need to use but I don't know how to configure it.


As usual the documentation is wofully inadequate for the newbie. @ Mendix, would it too much to ask for each Widget on the App Store to come with a working example!


Can anyone help me with the config please? I have the following group setup:

I have an attribute on an entity:


The group box has been named storeDefinedGroupBox:

and in my custom.css file I have the following entry:

div[cssselectorhelper=storeDefinedGroupBox]>div {
    background-color: paleturquoise; 


I'm not sure if I'm nearly there of the config is totally wrong, does anyone know where I'm going wrong?

Thanks for you help.




Hi Adrian, 

  You are quite close on this one.  The most important thing to know is that is an example project configured for most Mendix Github projects.  If you follow Corne's link, you can get to the github page where the sample app can be found in the 'Test' folder.  Just download the repository, extract the zip file, and open up the CssSelectorWidgetDemo.mpk found in the 'Test' folder.  This will give you a working example that you can use as a reference.

I'd recommend opening up the demo project and checking out the pages SomeEntity_InquiryCustomStyling...

 As to your specific example, there are a few things you can check:

1) In your CssSelectorHelper widget, make sure your 'Render As' boolean is set to Sibling and not Parent

2) The group box name isn't the thing that drives the CSS.  You need to set the attribute value of the CSSSelectorHelper widget value for 'attribute.' The widget is linked to the group by by placement on the page alone.  The value you put in your custom Css (cssselectorhelper=storeDefinedGroupBox) should match the attribute value set in the CSSSelectorHelperWidget

3) Make sure that you have the Attribute Value of the CssSelectorWidget set up to be either 'storeDefinedGroupBox' as a static if you are using the CSS selector helper without context OR if you are using CssSelectorHelper with context, select the enumeration statusStoreDefined as the attribute.

3) it looks like statusStoreDefined may be a boolean, so in that case you want your CSS to reference the boolean value, so maybe you want to set that to be an enumeration 

div[cssselectorhelper=true]>div {
    background-color: paleturquoise; 

I'm not 100% sure booleans would render in this way, so perhaps change that to an enumeration if it doesn't work?


I hope this helps.  I think you will get the most mileage out of opening up that test project.




How to add css to div tags those are not available or not visible or not showing in Mendix platform ?