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!
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;
}