create custom theme

0
Hi, I want to create completely customized theme like background, content font, menu colors, button font,colors etc..in Mendix 5.15 version. I have created a sample project and got default theme class file. But am not able to follow all the classes in it(as there are so many classes) and if i tried changing somethings it didnt work then i have added new class and selected it in layouts, but this is difficult to do for each layout. So i want to everything in theme class file and use it as default theme. Is this possible ? and Where can i get the documentaion for me to understand all the classes like .btn, .aap-topbar etc..that can be used in Themes.
asked
3 answers
1

Hi Repala,

Or use this url for CSS documentation (this is for new UI framework but still this might help you to understand)

https://world.mendix.com/display/public/howto50/Setup+Mendix+UI+Framework+with+just+CSS

Yes your folder structure will be different to new UI framework but basic fundamentals are still the same. You can go to your custom.css file and for instance to change top navigation background color, search for class .mx-layoutcontainer-top and if you cannot find then add a new class as .mx-layoutcontainer-top and change the background color to whatever you want and this will change across all the layouts. To change CSS for buttons default class is .btn or .mx-button, there are default bootstrap classes defined for all the elements and you can find the class for the element that you want to change and add them to your custom.css file and style however you like.

To find the default class you can use inspect element in google chrome, that is right click on the element you want to find class for and select inspect element. In the screenshot below you can see the class for button. You can inspect element in almost all the latest browsers.

Hope this helps. I would recommend you to upgrade your project and use the latest UI framework if you are starting from scratch.

Happy Styling!!

alt text

If you are interested then this will be a nice article to read about using bootstrap CSS helper classes.

answered
3

You can find documentation here: https://world.mendix.com/display/public/howto50/Create+a+custom+theme+with+the+Mendix+UI+Framework

Regards,

Ronald

answered
0

Or you can use my tutorial on how to customize the current theme completely.

Get the link: Go to Document (adfly click in the right corner of the page on "Skip Ad")

answered