B4J Question [Solved] How to style WebView

jmon · Jan 27, 2014

Hello,

I am trying to style the webview with css. I managed to style all the other controls, except the webview.

This code in the css file doesn't seem to work:

B4X:

.web-view {
    -fx-background-color: linear-gradient(#111111 0%, #222222 25%, #333333 75%, #444444 100%);
    -fx-text-fill: white;
}

I'd like to make at least the default background to black and the default text color to white. I know that I can style the <div> in the LoadHtml function like this:

B4X:

"<div id=""message"" style=""background-color:#FFA500;"">"

But I still get white edges around the div like this:

I have attached an example file for you to try with.

Thanks for your time.
Jmon.

[EDIT] Check post #5 for the answer.

Erel · Jan 27, 2014

See the answer here: https://community.oracle.com/thread/2431826?tstart=0

He suggests to set the body bgcolor attribute.

jmon · Jan 27, 2014

Erel said:
See the answer here: https://community.oracle.com/thread/2431826?tstart=0

He suggests to set the body bgcolor attribute.

Thanks, it works.

jmon · Jan 27, 2014

Ok, here is how I did it:

This is the code HTML that I put in a stringBuilder. So I change the BGColor to Black and the text color to white:

B4X:

Dim s As StringBuilder
s.Initialize
s.Append("<!DOCTYPE html>")
s.Append("<html>")
s.Append("<body bgcolor=#000000>")
s.Append("<div id=""message"" style=""color:#FFFFFF;"">")
s.Append(sMessage.Replace(CRLF, "<br>"))
s.Append("</div>")
s.Append("</body>")
s.Append("</html>")
wvMessage.LoadHtml(s)

Then in JavaFx Scene builder I change the Blend Mode of the WebView to "SCREEN", and that's it! The bg becomes transparent!

jmon · Jan 28, 2014

I modified the project I uploaded earlier to show the result after modification.

I my case, I use the webview control to display the content of a chat conversation. With this method you can style the conversation as needed and the webview will be displayed with a transparent background.

It's important to set the background of the webview to black, and the blending mode of the webview to SCREEN, then you can style the rest as wanted. The issue is that you won't be able to display black text. If you need to display black text, you will need to set the background to #FFFFFF white, then set the blending mode to MULTIPLY. More on blending modes here : https://en.wikipedia.org/wiki/Blend_modes#Screen

Although this method isn't perfect, it fits my needs. I still think java should release an option to make the background transparent.

Thanks Erel for helping me.

B4J Question [Solved] How to style WebView

jmon

Well-Known Member

Attachments

Erel

B4X founder

jmon

Well-Known Member

jmon

Well-Known Member

jmon

Well-Known Member

Attachments

Similar Threads