How can I change the text color in a QTextBrowser using HTML in PyQt?

I've been attempting to customize the font color of HTML text within a created QTextBrowser. While I have successfully used basic HTML commands to adjust paragraphs and change font size, I am facing difficulties with setting font color.

Below is the code snippet that I utilized:

self.key = QtGui.QTextBrowser(self)
        self.key.setHtml(
            """<h1>Key</h1>
            <body>
            <font colour="red">
            GREEN = Overall Progress is 80% or above
            YELLOW = Overall Progress between 65%-79%
            Orange = Overall Progress is 64% or below
            </font>
            </body>"""
            )

While utilizing <h1> successfully stylized "Key" as a bold and enlarged header, my attempts to utilize color tags or even color codes (e.g. #00ff00) appear ineffective.

htmlcsspyqtpyqt4qtextbrowser

Answer №1

After reading through the comments, I realized that the correct property is actually called color instead of colour. Keeping this in mind, it would be best to completely remove the font element from your code since it has been deprecated for quite some time now. You can update your code like this:

self.key = QtGui.QTextBrowser(self)
        self.key.setHtml(
            """<body>
            <h1>Key</h1>
            <div style='color:red;'>
            GREEN = Overall Progress is 80% or above
            YELLOW = Overall Progress between 65%-79%
            Orange = Overall Progress is 64% or below
            </div>
            </body>"""
            )

It would be even better to utilize an external stylesheet to keep your CSS separate and then assign a class to the div. It's also important to ensure that all elements are nested within the body tags, so you may want to move your h1 tag below the body.

Just a note, I'm not very familiar with how QTextBrowser works.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Off-center alignment in left margin with Bootstrap 3

When using bootstrap 3, I have noticed that the left margin starts to indent gradually with each row. Here is a screenshot demonstrating the issue: please see here The code for the first two rows in the image looks like this: <div class="row"> ...

twitter-bootstrap-3htmlmargins

Ways to compel links to open in Internet Explorer

In one of my chatbot messages, I have included a link to a web app that is only compatible with Internet Explorer. My chatbot runs on Google Chrome, so when the user clicks on the link, it opens in a new Chrome tab instead of in IE, where it should open f ...

htmlinternet-explorer

I am experiencing a problem with my Dynamic Table where it duplicates the titles every time a new entry

Attempting to generate dynamic tables using the Repeat Region feature in Dreamweaver CS5 is causing an issue where each new record entry also repeats the table titles when viewed in a browser. COMPANY REF DATE highbury 223333 2014- ...

phphtmlmysqlcontent-management-systemdreamweaver

Error: Invalid syntax detected: /blog

I am encountering an issue with jQuery while trying to add a blog section to my existing single-page site. The new blog will be located in a separate /blog directory, causing the menu item for it to differ from the other href="#" tags on the index.html pag ...

javascriptjqueryhtml

Canvas Frustratingly Covers Headline

Several months ago, I successfully created my portfolio. However, upon revisiting the code after six months, I encountered issues with its functionality. Previously, text would display above a canvas using scrollmagic.js, and while the inspector shows that ...

javascripthtmlcssscrollmagic

Does JSX have an API that can handle self-closing tags, such as <br>, if they are not closed properly?

For my latest project, I've been working on a ReactJS component using JSX and it looks something like this: <script type="text/jsx"> var HelloWorld = React.createClass({ render: function() { return ( < ...

javascripthtmlreactjs

Position text on the background image without using positioning techniques

I need to center my text precisely on top of my background image without resorting to the use of relative or absolute positioning. Many solutions online rely on using absolute positioning for the text along with a specified top value, but I prefer not to e ...

htmlcsscss-position

URL for Database Query String

I need help figuring out how to extract database information using a URL. On the page, each event entry should have a hyperlink that leads to a new form where administrators can record results for that specific event. The EventID is passed as a query st ...

phpmysqlhtml

HTML text not lining up with SVG text

Why is the positioning of SVG Text slightly off when compared to CSS text with the same settings? The alignment seems awkwardly offset. Any help in understanding this would be much appreciated! Even with x: 50% and the relevant text-anchor property set to ...

javascripthtmlreactjssvg

Styling a specific element in Svelte without needing a globally unique identifier

How can I target just the outer div using a css selector? <div> <div>...</div> <div>...</div> </div> <style> OUTER.DIV.ONLY { background: url(outer.png); } </style> Alternatively, I& ...

csssvelte

Control the playback of multiple HTML5 videos with the ability to pause and resume, while also adding a

Trying to achieve the functionality of playing and pausing multiple videos. When one video is played, the others should automatically pause. The videos should appear blurred, except when actively playing. Does this make sense? http://jsfiddle.net/1frjov8e ...

jqueryhtmlvideo

Monitor the incoming POST request

Is there a way to monitor incoming post requests in a form? I have the following form: <form method='post'> <input type='text' name'test' /> <input type='submit' name'submit' /> </for ...

phphtmlforms

Utilizing and transmitting contextual information to the tooltip component in ngx-bootstrap

I am currently working on integrating tooltips in ngx-bootstrap and trying to figure out how to pass data to the ng-template within the tooltip. The documentation mentions using [tooltipContext], but it doesn't seem to be functioning as expected. Belo ...

javascripthtmlangulartooltipngx-bootstrap

Matching CSS attribute values with another attribute

Can CSS be used to target elements based on the value of another attribute? For instance: <div data-attr1="abc" data-attr2="def"></div> <div data-attr1="abc" data-attr2="abc"></div> I am looking for something like this (although i ...

jqueryhtmlcss

Is it common for functions to be outlined in standard CSS practices?

I am curious if the CSS standard includes definitions for "functions"; I have not come across any information about them on w3schools or other sources. When I refer to "functions," I am talking about calls such as rgb(int, int, int) or url(string) that ar ...

csssyntaxsemantics

Maintaining the dropdown in the open position after choosing a dropdown item

The dropdown menu in use is from a bootstrap framework. See the code snippet below: <li id="changethis" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown>LINK</a> <ul class="dropdown-menu"> <li id ...

javascriptjqueryhtmltwitter-bootstrap

Swap out a portion of HTML content with the value from an input using JavaScript

I am currently working on updating a section of the header based on user input from a text field. If a user enters their zip code, the message will dynamically change to: "GREAT NEWS! WE HAVE A LOCATION IN 12345". <h4>GREAT NEWS! WE HAVE A LOCATIO ...

javascriptjqueryhtml

When scrolling on an IOS mobile device, the .on(click) event is triggered for fixed position elements

Whenever I click on an li element or menu, a function is triggered that moves the nav container to the left by the width of the window. However, on my iPhone, after I click to slide the container off the screen, the event gets triggered repeatedly every ti ...

javascriptjqueryhtmlioscss

How can I retrieve the index of an element within a 2D array using JavaScript when the array is displayed on a webpage?

https://i.stack.imgur.com/GHx9p.png I am currently working on developing an Othello game board within an HTML page using Angular. The board itself is constructed from a 2D number array which I then display using the <table> tag on the webpage. Below ...

htmlarraysangular

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome