[SOLVED] Transparent background behind button layout on PNG

M.K.

Hello together,

in the picture you can see a somewhat strange background color behind the buttons.
Imgur

My questions is how can I remove that part or make it transparent. It seems it takes a similiar color to the image. There is no problem with "one color" images.

Current stylesheet:

QPushButton {
color: #333;
border: 2px solid #555;
border-radius: 11px;
padding: 5px;
background: qradialgradient(cx: 0.3, cy: -0.4,
fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #888);
min-width: 80px;
}

QPushButton:hover {
background: qradialgradient(cx: 0.3, cy: -0.4,
fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #bbb);
}

QPushButton:pressed {
background: qradialgradient(cx: 0.4, cy: -0.1,
fx: 0.4, fy: -0.1,
radius: 1.35, stop: 0 #fff, stop: 1 #ddd);
}

I'd like to add that I'm farely new to QT and not a too experienced programer currently learning Python and with no experience in C++ whatsoever.

Thank you for your answers in advance.

mrjj

Hi and welcome
What are the buttons inside of?
It seems they are in a widget or a frame ?

M.K.

@mrjj they are in a QVBoxLayout.
My plan is to make the whole project scalable so I dont have to redo the gui for every resolution or atleast only for 16:9 and 4:3.
Any tips are much appreciated.

mrjj

@M.K.
Ah, that way.
Normally they are pretty transparent.
How do you set the background ?
Is that a QLabel or what you use ?
Im asking to see if I can get same result as you :)

Well using Layouts are a good way to make sure it can scale. Often one has to
use a layout in a layout to get the exact effect but once learned, they are super handy.

M.K.

@mrjj the image is set as background-image on the QWidget:

background-image: url(:/720p/Data/Pictures/Background/1280x720/#4.png);

dont know yet if i create several images for different resolutions or if i resize a high-res image with python. Not sure how I can implement it but i'll figure it out.

Edit:
Ok I fixed it, i applied a grid layout to the form and now it somehow works.

mrjj

@M.K.
Hi , I could get it to do so also.
It seems when the layout/frame/widget is owned by
the background widget, it can use a color from the bg image as its background.
if I move it outside, it will use the background color I specify.
I have only used a QLabel as bg so I learned something new :)

I guess what is happening is that its also a widget so it inherits the bg image.

I pretty sure it can be disabled somehow but not sure how inside the editor.

you can name your bg (double click it) and set bitmap only for that widget
like
QWidget #mybox {
background-image: url(:/Untitled-1.png);
}

here i called bg mybox.

Then it works as expected

M.K.

@mrjj thank you very much.
It also solved my inherit problem on my next "page".

mrjj

@M.K.
Super. :)
I find it works best if I only assign style sheet to MainWindow / dialog
and use the # syntax to address the widgets I want to style by name.
At least I find it easier to control compared to give each widget its own style sheet.
:)

M.K.

@mrjj is it possible to group some widgets? And if so how?
In my new Form I have 10x10 Text Browser to form a table and I'd like to assign a certain stylesheet to it. They are named "Scoreboard_1" to "Scoreboard_100".

I put each row into a separate horizontalLayout so I have the option to hide the last 5 Layouts in a differrent setting.

mrjj

@M.K.
What you mean by group ?
If you put them all in a widget/frame, they all have that as parent and sort of a group then.
And if you then set style on that container, all in will get the style.
If you mean a style group , sort of ?

You can also set it for all Text Browser type. on main if its a global style for those ?

Also note that you can use dynamic properties to target "some" of the widgets
https://wiki.qt.io/Dynamic_Properties_and_Stylesheets

like
QWidget[editFocus="true"]
{
border: 3px solid rgb(20,15,255);
}

so if editFocus is true the style is used. NOTE. changing editFocus from code, does not reapply the style.
Also note that you can easy create own flags like editFocus in the editor.

M.K.

@mrjj
Imgur

The number 1 box in the picture should be a "stylegroup" so i can assign a specific font to these without typing the the stylesheet for every textBrowser. Number 2 shouldnt be influenced by it and have it own font.

Edit:
ok, found the frame widget.

mrjj

@M.K.
just a note so im sure you know.

when you say

QTextBrowser {
....
}

it its for all QTextBrowser instances of the parent where you set stylesheet.
So if on the mainwindow, it will be all.