Hi Simpy,
Inline style is not the recommended way to style an app.
Add CSS class to the component for example “input-alert” and add the class to the theme file, and use CSS selector to target the input and style the background.
https://docs.mendix.com/howto/front-end/atlas-ui
Cheers,
Andries
Hi,
In your browser, right click the element, and inspect (chrome DevTools).
The element will likely have a class, if it doesn’t, utilize css selectors to specifically target the element.
make your changes in the theme/custom/custom.css file.
ie) in this fake html, if I wanted to target input, because it has no class, i need to target it like this in my CSS.
CSS
div.outside > span.spanClass > input {
background-color: red;
}
HTML
<div class="outside">
<span class="spanClass">
<input value="target me">
</span>
</div>
Devtools is your friend! Utilize it and know it well.
You can make css/style changes to elements to test what works, and then implement those changes in your custom.css file.
Thank you Andries and Andrew for you comments. As you suggested i was able to achieve this by adding a custom scss file and all the stylings to it.
Thank you,
Guru