Péricles Lopes Machado Péricles Lopes Machado - 5 months ago 119
CSS Question

QWebView::settings()->setUserStyleSheetUrl() from QtWebKit to QtWebEngine?

I'm upgrading my code from Qt 5.5 to Qt 5.6, but I didn't find a way to port the following code:

QWebEngineView *qwebview = new QWebEngineView(this);
qwebview->settings()->setUserStyleSheetUrl(QUrl("qrc:/about.css"));
qwebview->setHtml(fileContentStr);


What is the best way to insert a user CSS using the new Qt Web Engine?

Answer

If you read here : Bug Report on QWebEngine, you'll see that :

The only opportunity to inject CSS code into the WebEngineView is using JavaScript. It would be nice to have an appropriate API for this and it could look like our already existing UserScripts API.

It seems pretty clear : you can't use the WebSettings anymore to insert CSS. Instead, you will have to use HTML/JavaScript to do that.

I don't know if it will help you, but here is an extract of what I have done .

In my .cpp :

m_pView = new QWebEngineView(this);

QUrl startURL = QUrl("path/to/index.html");

m_pView->setUrl(startURL);

And in the index.html :

<html>
    <head>
        <title>TITLE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Many JS scripts here -->

        <link href="./css/style.css" rel="stylesheet">

    </head>
    <body ng-app="myApp" >
      <div ui-view class="page"></div>
    </body>
</html>

Hope that helps.