i
iamt_ps
·Posted in Smart HMI - WebIQ Designer and Server

Font Color of Recipe Editor

Hello,

I have a project where I need to put a Recipe Editor in a popup window. The problem is that the Recipe Editor changes the color of the fonts to white when it is put in the popup window. I want to ask if there is a way to change the color manually or if there is some other way to solve this problem?

 

I recreated the problem in a new project and attached a screenshot of the popup window with a grey background color as well as the project itself. To open the popup window just press the button labeled "popup".

Thanks for the Help.

 

Best reply by webiq-sk

When working with any website, familiarizing yourself with how CSS debugging works in a browser is highly recommended.

If you press F12 in the preview or in a browser with the HMI loaded and select the label you'll see why this happens:

It happens, because all labels inside a popup are by default shown in white, so you can override this CSS by creating a custom CSS by selecting the "Recipe Edit" widget in Code Manager:

If you name this CSS "my_recipe" you can use the exact same code as shown above.

The in the popup select the Recipe Edit widget and simply add the CSS modifier "my_recipe" there:

The solution would be the same on any other website as WebIQ only uses HTML5, CSS3 and JavaScript in the browser.

View original
recipe_test.zip
4.72MB
1 reply