CODEWITHSUNDEEP
pythonqtpyqtqwebviewpyside
swanson
swanson

Reputation: 7472

QWebView not loading external CSS

I am using a QWebView to display some content and I want to use custom CSS to spruce up the output. I found that I can use the QWebSettings.setUserStyleSheetUrl() method to load my own CSS into the view. The .css file is in the same directory as my main program.

self.webview = QWebView(MainWindow)
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile("myCustom.css"))

However, the custom stylings don't load when I add the content to the page using setHtml(). I have tested that the CSS is properly applying to the HTML in a standard browser.

Any idea what I am doing wrong?

Upvotes: 4

Views: 7683

Answers (3)

sdaau
sdaau

Reputation: 38619

I just ran into this, so I'll post my test snippet here; the snippet generates its own .html and .css file in the same directory as the python script; and the script was called from the same directory for testing.

At least in python/PyQt4, it seems that - indeed - it is only absolute paths that work with setHtml.

The test code can either:

compare_qtwebkit-test.py

The setHtml method seems to show styled text only with specification c3, where file:// + absolute path is used. (EDIT: just wanted to note that the suggestion in this post, to "try arora (a very simple wrapping on top of QtWebKit); if it works, its your code. if it doesn't, its the website." was very helpful for double-checking behaviour)

This is the setup the script was tested on:

$ lsb_release --description --codename 
Description:    Ubuntu 11.04
Codename:   natty

$ apt-show-versions -r python-qt4
python-qt4/natty uptodate 4.8.3-2
python-qt4-dbus/natty uptodate 4.8.3-2

$ apt-show-versions -r libqtwebkit4
libqtwebkit4/natty uptodate 2.1~really2.0.2-0ubuntu1

$ python --version
Python 2.7.1+

The script is:

qtwebkit-test.py

#!/usr/bin/env python

# portions from:
# http://pysnippet.blogspot.com/2010/01/more-fun-with-qwebkit.html

import sys
import os
from PyQt4 import QtCore
from PyQt4 import QtGui
from PyQt4 import QtWebKit

global htmltext

def GenerateFiles():
  global htmltext

  print "GenerateFiles running"

  csstext = """
  body {
    background-color: #058;
    margin: 0px;
    color: red;
  }
  """

  css_file = open("test.css", "w")
  css_file.write(csstext)
  css_file.close()


  htmltextTop = """
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  """

  htmltextBottom = """
  <title>qtwebkit-test</title>
  </head>
  <body>
  <h1>HEADING</h1>
  <p>Just to test ....</p>
  <p>.... and test some more</p>
  </body>
  </html>
  """

  cssopen = '<link rel="stylesheet" type="text/css" href="'
  cssclose = '">'

  # c1
  cssfile = "test.css"
  # c2
  #~ cssfile = os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
  # c3
  #~ cssfile = "file://" + os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
  # c4
  #~ cssfile = "qrc://" + os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
  # c5 (empty)
  #~ cssfile = ""

  cssline = cssopen + cssfile + cssclose

  #~ htmltext = htmltextTop + htmltextBottom      # without css
  htmltext = htmltextTop + cssline + htmltextBottom

  html_file = open("test.html", "w")
  html_file.write(htmltext)
  html_file.close()


def main():
  global htmltext

  GenerateFiles()
  qApp = QtGui.QApplication(sys.argv)

  webView = QtWebKit.QWebView()

  # l1
  #~ webView.load(QtCore.QUrl.fromLocalFile("test.html")) # fails

  # l2
  #~ webView.load(QtCore.QUrl.fromLocalFile("./test.html")) # fails

  # l3
  #~ webView.load(QtCore.QUrl.fromLocalFile(os.path.abspath(os.path.dirname(__file__)) + "/" + "test.html")) # this works with #c1-#c3

  # setHtml
  #print htmltext
  webView.setHtml(htmltext) # works with #c3 (rest are unstyled)

  webView.show()
  webView.resize(500, 400)
  webView.setWindowTitle(__file__)
  sys.exit(qApp.exec_())


if __name__ == "__main__":
    main()

Upvotes: 1

Piotr Dobrogost
Piotr Dobrogost

Reputation: 42425

In Qt, all paths to external files need to be ABSOLUTE paths, not relative ones.

That's not true. The code below works for me.

#include <QtCore>
#include <QtGui>
#include <QtWebKit>

int main(int argc, char ** argv)
{
    QApplication app(argc, argv);

    QMainWindow mainWindow;

    QWebView* webView = new QWebView(&mainWindow);
    webView->settings()->setUserStyleSheetUrl(QUrl::fromLocalFile("google.css"));

    QFile source("google.html");
    source.open(QIODevice::ReadOnly);
    webView->page()->mainFrame()->setHtml(QString::fromUtf8(source.readAll().constData()));

    mainWindow.setCentralWidget(webView);
    mainWindow.show();

    return app.exec();
}

The .css file is in the same directory as my main program.

Relative paths are interpreted relative to the current working directory which need not be the same as executable's directory.

Upvotes: 1

swanson
swanson

Reputation: 7472

In Qt, all paths to external files need to be ABSOLUTE paths, not relative ones.

To fix the problem, I add to make the following change:

path = os.getcwd()
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile(path + "/myCustom.css"))

And everything worked correctly. Hopefully this will help someone in the future and save them a few hours debugging.

Upvotes: 8

Related Questions