In this how-to we will go through how to setup the Mendix UI Framework and do our first styling changes by just using CSS.
After completing this how-to you will know:
- How to create a new App
- How to create your own theme with just CSS
- How to make your first styling changes
Before you can start with this how-to, make sure you have completed the following prerequisites.
3 Creating a New App in the Mendix Desktop Modeler
In this chapter we will create a new app and select a theme from the New App selector.
- Open the Mendix Desktop Modeler.
Create a New App from the My Apps screen in the Mendix Desktop Modeler.
Select a theme for your app.
You can now deploy your app (F5)
4 Opening Your Project in the Text Editor
- Open your App Project Folder in your text editor by choice.
Navigate to the folder theme and you will find the css files in the folder styles\css.
There are two subfolders in our styles\css folder.
a. Lib, this folder contains our library file that contains all the default styling from the Mendix UI Framework. It’s best practise to not alter this file.
b. Custom, the custom file contains a preset of CSS elements and a copy of the library file but empty. Here we want to make our custom changes
Let’s open up the custom.css file. We always want to work from this file so we can always look back at the library.css file to see how the original theme used to be.
Let’s change the color of our topbar. Find the CSS element .**region-topbar **as you can see in the screenshot below.
Let’s do a simple change by making the topbar red. Insert the following line as in the example below:
Let’s redeploy our application and look at the result!
Congratulations, you made your first theme change.
5 Related Content
- How to Create Your First Two Overview & Detail Pages
- How to Filter Data on an Overview Page
- How to Find the Root Cause of Runtime Errors
- How to Use Layouts and Snippets
- How to Perform the Scout and Windows 10 Workaround
- How to Set Up the Navigation Structure
- How to Set Up the Mendix UI Framework with Koala
- How to Set Up the Mendix UI Framework with Scout