Customizing the login form widget

1
I downloaded the login form widget from the app store and I am trying to change the styling of the form in the Mendix modeler. I was using the default login form but I wanted to used a customized login form instead. The problem is that I am running into some problems styling it using the Mendix modeler, it is using styling from the theme.css file. Is there any way to circumvent this issue? Thank you
asked
2 answers
2

Are you trying to style specific elements within the login form? The login form contains a number of elements (I see 3 divs, an input, and a span), so you would need to use a custom CSS file to target these child elements and change their styling.

You can define a custom CSS file in your index.html page by adding a reference like the second line here: 

    <link rel="stylesheet" href="styles/lib/default-theme.css">
    <link rel="stylesheet" href="styles/custom.css">

Then, in the custom.css file, you would give the widget a class name, say "loginForm", and then target the elements in your login form. So, for example, the alert message has a class "messagePane", so you could do the following:

    loginForm messagePane { background-color:green};

Hope that helps!

answered
0

What I did was actually change the CSS of the widget itself. The CSS file LoginForm.CSS is located in:

\widgets\LoginSystem.mpk\loginsystem\widget\ui\

In this CSS file, change the CSS rules to whatever you like.

If you, for instance, want to add a picture or something to the LoginForm, add it from within the modeler and give it a class, let's say 'loginFormLogo', then in the LoginForm.css add a CSS rule for the loginFormLogo, like:

.loginFormLogo {
    width: 30% !important;
    position: relative;
    z-index: 1;
    margin-top:40px;
}
answered