Add custom css to html code with jsoup

14,421

Solution 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).

Solution 2

Probably the easiest way is to search and replace on the HTML text to insert your custom styles, before loading it into your WebView. I do this in my app BBC News to restyle the news article page slightly. My code looks like this:

text = text.replace("</head>",
        "<style>h1 {font-size: x-large;} h1, div.date, div.storybody, img {margin:4px; padding:4px; line-height:1.25;}</style></head>");

See how I search and replace on the end head tag (including my own </head> tag in the replaced segment. This ensures that the new snippet goes in the right pace on the page.

Solution 3

There a a few ways to include ccs in html

Tis i use if you have it stored as a external file:

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

If You want to put it stight i the html file:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Or if you wnat to modify a singel tag:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

*Edit

Any of thees examples shouldn't have any problem whit displaying.

Ref: W3 Schools CSS

14,421

PixelPW

Updated on April 14, 2020

Comments

PixelPW about 4 years

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
PixelPW about 13 years

The problem is that I load the HTML form a webpage, so I can't change the HTML. I want to add code with jsoup and then load my own css.
KilledKenny about 13 years

I see, Your question was misleading sounded like you had control over the html. I edited the question to point others in the right way. I myself don't have any exp. whit jsoup
PixelPW about 13 years

Whats is the right charset? What I have to put in there "//..." ?
BalusC about 13 years

The right charset is the Jsoup.connect(url).response().charset();. The //... is just the code you need to get the html.
PixelPW about 13 years

Thank you but when I put this to eclipse it says: "Add throws decleration" ... public void main(String... args) throws FileNotFoundException, UnsupportedEncodingException{ try{ ... What I have to do?
BalusC about 13 years

Just add throws IOException to the method signature or put it in try-catch. Did you explore the suggestions which Eclipse gave when you click the red bullet?
PixelPW about 13 years

Okay I've put a try-catch. But now It says in the webview: The Web page at file:///android_asset/file.html could not be loaded as: The request file was not found. file.html
BalusC about 13 years

You keep posting unrelated questions as comments. Your initial question of adding custom CSS is been answered. I'd suggest to press Ask Question button for new questions.
PixelPW about 13 years

This is my code after the writer: public void onCreate(Bundle savedInstanceState) { main(); super.onCreate(savedInstanceState); setContentView(R.layout.main); mWebView = (WebView) findViewById(R.id.webView); mWebView.setWebViewClient(new WebViewClient()); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setDomStorageEnabled(true); mWebView.loadUrl("file:///android_asset/file.html");