Add custom css to html code with jsoup

Question

I'm working on an Android app, which loads a HTML page and shows it in a webview. The problem is I want to add my custom css (the loaded HTML hasn't any CSS or link to a css). How do I add the custom css to the HTML code using jsoup? I cant modify the html. And how does the webview can open it afterwards? Thank you

Answer 1

Several ways. You can use Element#append() to append some piece of HTML to the element.

Document document = Jsoup.connect(url).get();
Element head = document.head();
head.append("<link rel=\"stylesheet\" href=\"http://example.com/your.css\">");

Or, use Element#attr(name, value) to add attributes to existing elements. Here's an example which adds style="color:pink;" to all links.

Document document = Jsoup.connect(url).get();
Elements links = document.select("a");
links.attr("style", "color:pink;");

Either way, after modification get the final HTML string by Document#html().

String html = document.html();

Write it to file by PrintWriter#write() (with the right charset).

String charset = Jsoup.connect(url).response().charset();
// ...
Writer writer = new PrintWriter("/file.html", charset);
writer.write(html);
writer.close();

Finally open it in the webview. Since I can't tell it from top of head, here's just a link with an example which I think is helpful: WebViewDemo.java. I found the link on this blog by the way (which I in turn found by Google).