Forum Xamarin.Android
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Is it possible to add CSS style to a web page?

Hi everyone,
I am trying to make an app that would load an web page (not stored on device, it's from the web) using Web View, then apply local CSS (to, for example, disable some parts of the website). I have already searched on the internet and forums to find a way to do this but I can't find anything that describes what I am trying to achieve. Is it even possible to do this? If it is, how?
Thank you in advance :smiley: !

Answers

  • SAthukoraleSAthukorale USMember ✭✭
    edited May 2017

    Haven't done something similar, so don't know whether this will work in Android. But I guess you could do something like,

    1. Load the web page (as data/text)
    2. Modify data to include the custom style
    3. And load that modified web page data to your WebView (myWebView.loadData())

    Check the following answer. Look related : http://stackoverflow.com/questions/4950729/rendering-html-in-a-webview-with-custom-css

  • NikolaIlicNikolaIlic USMember

    @SAthukorale said:
    Haven't done something similar, so don't know whether this will work in Android. But I guess you could do something like,

    1. Load the web page (as data/text)
    2. Modify data to include the custom style
    3. And load that modified web page data to your WebView (myWebView.loadData())

    Check the following answer. Look related : http://stackoverflow.com/questions/4950729/rendering-html-in-a-webview-with-custom-css

    Thank you Saranga!
    I will try what you suggested!

  • SuplanusSuplanus Member ✭✭

    Here is my solution:

    public HtmlWebViewSource GetHtmlSourceWithCustomCss(string url)
    {
        var htmlSource = new HtmlWebViewSource();
        string htmlCode;
        using (WebClient client = new WebClient())
        {
            htmlCode = client.DownloadString(url);
        }
    
        // Replace css
        var customCss = @"
        <head>
            <style>
            header { display: none !important; }
            .title   { display: none !important; }
            </style>
        ";
        htmlCode = htmlCode.Replace("<head>", customCss);
    
        htmlSource.Html = htmlCode;
        return htmlSource;
    }
    

    Simple call this:

    WebView.Source = GetHtmlSourceWithCustomCss(url);
    
  • ExoskeletorExoskeletor Member ✭✭✭

    How we should modify this function if we only want to add some css rules without removing the existing ones? thanks

  • PacodosoPacodoso FRUniversity ✭✭✭

    Hi @Suplanus
    I've tried your code but it doesn't work with the URL I use.
    When I use my URL in a navigator, or if I pass the URL directly to the WebView, I can see in Fiddler / Charles Proxy that many files are loaded: the corresponding html, and other files (.css, .js, data).
    When I use your sample, only the HTML is loaded, so the rendering of the page is not correct.
    Is there something that I've forgotten?

  • SuplanusSuplanus Member ✭✭

    @Pacodoso:
    Some websites don't allow manipulation of their code (like Facebook). So they block the requests.

  • PacodosoPacodoso FRUniversity ✭✭✭

    How could I know if it's the case for this URL?

Sign In or Register to comment.