Customize the appearance of all QProgressBars using Qt stylesheets in your C++ program

Struggling to figure out how to dynamically apply a stylesheet to multiple or all widgets in Qt Creator 4.1 (Qt 5.7) using C++.

For instance, if I have 3 progress bar widgets, currently I am setting the same stylesheet for each one individually with CSS:

ui->c1->setStyleSheet("QProgressBar {"
                          "background-color: #74c8ff;"
                          "color: #0a9dff;"
                          "border-style: outset;"
                          "border-width: 2px;"
                          "border-color: #74c8ff;"
                          "border-radius: 7px;"
                          "text-align: left; }"

                          "QProgressBar::chunk {"
                          "background-color: #010327; }");

// Repeated for ui->c2 and ui->c3 as well

I want to utilize Qt Stylesheets to streamline the process and eliminate repetition of code.

According to the documentation, the syntax should look like this:

QProgressBar
{
    background: #74c8ff;
    color: #0a9dff;
    border-style: outset;
    border-width: 2px;
    border-color: #74c8ff;
    border-radius: 7px;
    text-align: left;
}
QProgressBar::chunk
{
    background-color: #010327;
}

However, you cannot directly adapt parameter names from setStylesheet to the above syntax.

I also attempted something like this:

QProgressBar.setStyleSheet("QProgressBar {"
                           "background-color: #74c8ff;"
                           "color: #0a9dff;"
                           "border-style: outset;"
                           "border-width: 2px;"
                           "border-color: #74c8ff;"
                           "border-radius: 7px;"
                           "text-align: left; }"

                           "QProgressBar::chunk {"
                           "background-color: #010327; }");

Unfortunately, both methods failed due to undeclared identifiers and syntax errors.

Is there an example available on how to define a single stylesheet with these parameters for all widgets? Any resource explaining the available parameters would be greatly appreciated.

Lastly, if a stylesheet is created for all progress bars, how can I exclude one progressBar (or any widget) from that stylesheet and apply a different one instead?

Answer №1

Consider using qApp->setStyleSheet in place of QProgressBar.setStyleSheet to apply stylesheets across all widgets within your application. For additional examples, refer to: http://doc.qt.io/qt-5/stylesheet-examples.html

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

Is there a way to retrieve all CSS styles associated with a specific element?

When I come across a site element that I really like and want to incorporate into my own site, what is a simple way to do so? It can be challenging to navigate through numerous CSS files to find all the necessary styles. ...

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...

Tips for customizing the WooCommerce product page

If you want to customize the layout of a WooCommerce product page, you can override the template by copying the WooCommerce template folder into your theme. You can find step-by-step instructions here. I am looking to change the layout of a WooCommerce pr ...

The coverflow of Swiper is not displaying properly within a Div container

Just to clarify, I am not very experienced and do not know many best practices. I am learning as I go along with projects. I am using Swiper for a game list slider, but when I place it inside another Div, it disappears completely. I can position and size ...

Looking to recreate this style of table using HTML and CSS?

https://i.sstatic.net/nDrxq.png Trying to replicate the layout from this image for my blog, but struggling with the source code. Any suggestions on how to achieve a similar design without using divs within table rows? Looking for a cleaner solution. ...

Having trouble with flickering in rotating card animation in Bootstrap using CSS?

Recently, I worked on a bootstrap website where I implemented a unique feature – a card that flips to show its backside upon hover. You can check out the live website here: Live Site Here's the code snippet for the section with the flipping card: ...

arrange a div inside another div

I'm struggling to grasp the concept of how divs function in HTML. Below is a snippet of my HTML code: <div id="user_p"> <img src="img/pp/djbaptou.jpg"> <div class="followings"> djbaptou </br> Baptiste Arnaud </br> ...

Is there a way to create a new perspective for Ion-Popover?

Looking for a solution: <ion-grid *ngIf="headerService.showSearch()"> <ion-row id="searchbar" class="main-searchbar ion-align-items-center"> <ion-col size="11"> ...

CSS fails to load on DJango platform

I am currently working with two apps in my project: Home and Header. The HTML code for the Home app can be found in project_folder -> home -> templates -> home -> base_home.html {% extends 'header/base_header.html' %} <!doctype h ...

My project is experiencing issues with the execution of JavaScript codes

Greetings, I'm having trouble with my JavaScript codes. The following code works perfectly: function Choice() { var box = document.getElementById('searchh'); if (!count) { var count = 0; } box.onclick = function () ...

issue encountered while attaching css file / css styles not rendering

Here is the css link I am using: <link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" /> Despite trying various solutions such as removing "rel="stylesheet"", changing to "text/html", checking paths, placing it in the pu ...

Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...

What are the advantages and disadvantages of defining or using a Macro within a function?

Working with an STM32 Microcontroller involves a lot of bit shifting, logical operations, and setting/clearing bits in functions, which can be quite cumbersome. For example, imagine needing to turn on a device with multiple sensors, each requiring a specif ...

implementing jquery for dynamic pop up placement

When I click the English button, a pop-up appears, but I can only see the full contents of the pop-up after scrolling down. Is there any way to view the entire pop-up without scrolling? Below is the code that I am using: http://jsfiddle.net/6QXGG/130/ Or ...

The file pyconfig.h could not open because the include file 'io.h' does not exist in the specified directory

Background: I am completely new to python and Cpp, and I am currently attempting to install a python package called python-crfsuite that requires Visual Studio for compilation. To do this, I have installed Anaconda3 and Python 3.6 within the VS2017 c ...

CSS - revealing additional submenu on hover

I'm currently working on customizing a Wordpress menu that includes classic menu items and their respective submenus. The issue I'm facing is that when I hover over an item with children, its submenu will display. However, I want to have a fixed ...

Make sure to keep checkboxes selected after they have been submitted

UPDATE: I'm trying to figure out how to keep all the checkboxes checked even after submitting and reloading the page. Currently, they get reset :/ Below is the form code I am working with: <form action="" method="post" id="filtre_form"> <h ...

Distributing elements evenly across the parent width using Angular FlexLayout for a responsive design

I need to create 3 div squares: div-left, div-middle, and div-right, each with a width of 300px. These squares should be arranged horizontally within the parent div main-section, which will adjust its size based on the screen width, being 1300px if the scr ...

Steps to import shared CSS using Styled-components

In my project using react, I've implemented styled-components for styling. One requirement is to have a shared loading background. Here is the code snippet of how I defined it: const loadingAnimation = keyframes` 0% { background-position: 95% 95%; } ...

Show the nested div when hovering over the containing div using JavaScript

I have a situation where I have multiple divs within a parent div, all using the same class. Here is an example: <div class="deck-content"> <div class="deck-box">TEST< <div class="deck-hidden">< <span class= ...