Probably CSS style override, use google chrome developer tools (F12) to inspect elements, that will help to understand what happen.

Thanks! That seems to be happening, indeed. The field has a second class in addition to the one I made. The form has a style 'From (default)'. That sounds strange for me, I thought in styles always the lowest level overrides higher levels.

If I change the style of the form to 'None' the text is now red, but the form functionality of clearing entered data no longer works, so that is also not a good idea.

So any thoughts on how I can keep the form style, but override it for the text fields?

Hi,

I don't know what you mean my lowest-level with CSS, but CSS is a strange beast.

Please provide an example otherwise it's just guessing.

for example you could do .Form div.MyRed { color: #f00;}, but I don't know the whole CSS of you.

With lowest level I mean that definitions on a page override definitions for the whole app, which in turn override default definitions for the theme. So the page is the lowest level and the standard theme the highest.

I think you should be able to access my application (haven't implemented any security yet). The table where the section headers are colored is at:

https://pitchingacademy.outsystemscloud.com/PlayerDevelopment/HittingPassport.aspx?PlayerId=1&(Not.Licensed.For.Production)=

If you click on the text 'Nieuwe momentopname' in the top right corner you get to the form where the section headers are not colored.

My style is called 'HittingPassportGroupHeader', the extra class is called 'ThemeGrid_Width4', but that class is also applied to other fields in the form, so I can not change that class, I think.

".Form Label" class is override color attribute https://screencast.com/t/S3zLTwAme

Try to put the label inside a container and set style as "HittingPassportGroupHeader", also remove this class from label. This should work.

Thanks, but it did not work. I guess I'll give up for now, it's not that important, I just hoped it was something easy to fix. I tried a few of your suggestions and found that even the width setting has impact:

Add container, give it style HittingPassportGroupHeader, width=fill parent. No change

Removed the style HittingPassportGroupHeader from the label as you suggested. Now the text is large and bold, still grey, but the underline option is gone.

Changed the Label width to Fill parent and now the underline came back and it was red, but the text is still grey.

in the css (Either your own theme css or the page css) just add

.Form label.HittingPassportGroupHeader {
    color: #f00;
    text-decoration: none;
}

Hi Joost,

Try adding !important to the styles, that will make sure that this style is prioritized. So, something like: 

.Form label{

color: #000000 !important; 

}

should work, but you might need to make sure that all of your target browsers support it.

Regards,

Gurvinder  

Thanks guys! Actually both of the last two solutions work. Since I can't  mark both as solution, I marked J. suggestion as solution because it is not dependent on browser support.

Learned quite a bit about CSS :-)

@gurvinder you simply have to prevent !important unless you really don't see any other way to fix the css.

and what if you have to classes with !important...