A little too big for a comment so another reply.

With a some more CSS experimenting, I found that the following will style any output element but not real labels. In this case, the text will turn blue.

div[data-mendix-id]>label,

div[data-mendix-id]>div>label{

 color: blue;

}

The first selector works on normal input elements, the second on selectors.

For those who are new to this please note that Chrome and Firefox/Firebug allow you to change files so you can open your application in the browser, and try this without deployment and without affecting others. Just find css/theme.css and put it in.

Mendix improved the way html nodes are called and changed the whole html layout in a cleaner and simpler one. This way bootstrap is supported. You need to rebuild your theme to run in Mendix 5, but things will get better.

Anyway it should be possible to recognize the css class of your non-editable data. Did you try to inspect it with Google Chrome / Firebug?

Edit after comment:

I see that the default class for the non-editable input data is removed. You could easily apply your class by adding a custom css class to the non-editable input field or the table cell. That way you can still style everything what you want. But you need to repeat this for every attribute.

Would like to bump this post because it is still / again relevant in Mendix 5.1.1

I am having another attempt at re-styling an upgraded application and specifically (but not limited to) running into two things:

• I can't style NON-editable fields anymore. They appear as labels, but I don't want that. How do I fix this?
• There seems to be no more use for Render Mode = Title, as it does not apply a class to use

Question directly for Mendix: your default themes are all the same in this aspect. They don't offer any insight, because none of them use these classes.

Essentially, this means that we have to guess what the classes are (impossible) if they even exist, or dig deep into the bootstrap etc. Why not just add the classes into the CSS, even if you do not actually make them do anything? At least then I can identify what is being used where.

Does anyone know how to deal with the two main issues I am having above?

EDIT: Sorry, I meant Render mode Title instead of Header

Ouch! I missed out on a search attribute that is a reference to another entity. I tried using a generic selector, a little too generic.

Here is a more specific CSS selector attempt. I tested with the most recent versions of Chrome, FireFox and IE.

Please give this a try:

div[id^=mxui_widget_TextInput]>label,
div[id^=mxui_widget_NumberInput]>label,
div[id^=mxui_widget_DateInput]>label,
div[id^=mxui_widget_EnumSelect]>label,
div.mx-referenceselector-input-wrapper>label{
    background-color: #EEEEEE;
    border: 2px solid #DCE4EC;
    border-radius: 3px;
    display: block;
    padding: 2px 4px;
}

Still, it does seem that the DOM tree of a Mendix application has been trimmed a bit too far. A few more CSS classes would be nice, even if the default implementation does not actually supply them in the CSS. Or, to stick with CSS selection, put a custom attribute on each element, like mendix-widget-type, containing the actual widget type, like TextInput. Prefixed with readOnly if applicable.

Issue 1: non-editable fields: I suppose that they appear as labels is just how Mendix 5 works. But I was able to style these, either by putting a class on an individual element in the designer or styling all labels by putting a label { ... } in theme.css

Issue 2: Render mode=header basically changes a td into a th. No classes are put on any of these directly, but there are CSS selectors like th > label { } defined. I placed an overriding CSS selector in theme.css and changed the default appearance of all table headers in one go.

Rather than putting a class on every element, the Mendix 5 / Bootstrap styling heavily uses CSS selection.

Because of the order in which the CSS files are referenced, anything you put in theme.css will override the default.

So just inspect the page using Chrome or Firefox with Firebug, find what you need and override it by using the same CSS selector in your CSS file.

Or go all the way and create a custom theme. (I have not yet done that though.)

That being said, I still miss the possibility to grab elements by ID. IDs change everytime a page is displayed. I can understand that because that avoids duplicate IDs.

It would be nice if the name of the element we set in the page designer ends up in the HTML somewhere. CSS can select on any attribute so if the ID is off limits, any custom attribute will do.

As an example, I could then grab all th elements under a specific DataView or GroupBox and style these differently than any other th element in the application.

@Marcel Groeneweg - Unfortunately, the accepted answer from Marcel is again too generic a solution.

In my situation, rather than just setting a text color, I add this to my CSS:

div[data-mendix-id]>label,
div[data-mendix-id]>div>label{
    background-color: #EEEEEE;
    border: 2px solid #DCE4EC;
    border-radius: 3px;
    display: block;
    padding: 2px 4px;
}

Once again my feeling is that Mendix have been too agressive in simplifying the generated code and have removed Class identifiers where they are still needed to provide the hooks to control the UI appearance.