CSS and Layout Relationship

Hello, I am trying to find out how exactly the layouts in Mendix correspond to the CSS files. I know that the HTML code for the application is generated based on the position of the layouts and the widgets in the Mendix modeler, but I would like to know if there is a mapping between the layouts in Mendix and the CSS files. The reason I am asking is because I am trying to transfer an application to the Mendix 5 layout theme and I wanted to try to do this without distorting the layouts of my application. Another question I had is what files are generating this code, are these javascript files, if so, do I have access to them? I am thinking maybe it would be helpful if I took a look at those first. I know that Mendix uses the dojo toolkit, should I look at this as a starting point? Thank you for your help, any suggestions would be greatly appreciated.
1 answers

Hi Monique,

I can discern three topics from your question and will try to answer them as best as I can.

  1. transfering layouts from Mendix < 5 to Mendix 5+ version: Your best way forward is to recreate your layouts in Mendix 5+. The newly introduced layout containers are so much different from the old system that the most quickest way is to actually redo the basic layout work. (I interpreted your transfer statement as going from 4 to 5)

  2. mapping between layouts and CSS files: If you inspect your generated page in any web inspector tool you'll find div containers with classnames like: "mx-layoutcontainer-top", "mx-layoutcontainer-middle", "mx-layoutcontainer-bottom" etc. These containers and classnames correspond to the type of layout container / page you've created in the modeller. All of these will have standard styling rules in the core that can be extended / overwritten in your theme. I suggest playing around with them in your theme css file to see what you can and can't do with them.

  3. changing generated code: This is not possible for any standard Mendix component. And for a good reason as well. It would mean that every time the platform changes or receives an update, your work will be nullified. Custom widgets and basic index.html / login.html files will however give you the ability to alter some bits in your html output.

The dojo you refer to actually hooks into the custom widget creation topic. I'd not recommend using custom widgets for subjects like layouts though: You'll want a workable Modeller environment. Putting a lot of greyed out 'black' boxes in there (representation of a custom widget) will obscure what your doing in the modeller views.

In certain cases revolving around small interface issues you can however use add-on widgets like HTML-snippet or Format-string. You can type HTML or Javascript in these. Be careful though with javascript, you need to know what you're doing if you want to tackle any issues. A custom widget will in almost every case be a better solution then.

If you want to learn how to create a widget. We have a widget workshop and a web seminar is coming up next week.

I hope this helps.