QT pushbutton with image how to transparent/opacity - qt

I have a pushbutton and was styled in QSS to assign an image like this
QPushButton[type="buttonImgType"] {
image: url(:images/svg/myIcon.svg);
image-position: center;
min-height: 42px;
min-width: 130px;
}
I want this button to display as if it is faded or like say 50% transparent when it is not checked
and show full image when it is. But I cant find a way how to using the properties in QT for buttons.
Anyone have idea how to?

Following #Nejat answer:
You can set transparency of QLabel or QPushbutton by setting the
stylesheet :
ui->label->setStyleSheet("background-color: rgba(255, 255, 255, 0);");
ui->button->setStyleSheet("background-color: rgba(255, 255, 255, 0);");
You can also add background-color: rgba(255, 255, 255, 0); to the styleSheet property of the widget in the designer.
The fourth parameter is alpha. You can also have semi-transparent
widgets by setting alpha to some value more than zero :
ui->button->setStyleSheet("background-color: rgba(255, 255, 255, 50);");
Possible duplicate of
C++ over Qt : Controlling transparency of Labels and Buttons

Try This Style :
QPushButton
{
background-color: transparent;
border: none;
}
QPushButton:pressed
{
background-color:rgba(239, 41, 41,50);
border:2px solid black;
}
until QPushButton has border it didn't transparent .

Related

Change background of disabled material fill input

Using Angular Material I can change the background of this fill-matInput:
<mat-form-field>
<mat-label>Tax-number</mat-label>
<input type="text" matInput [id]="'taxnumber'" [formControl]="controlContainer.control.controls['taxnumber']">
<mat-error>{{controlContainer.control.controls['taxnumber'].errors | bsErrorMessage}}</mat-error>
</mat-form-field>
I can change the background using the following css:
.mat-form-field-appearance-fill
.mat-form-field-flex {
background: rgba(255, 255, 255, 1);
}
Now I want to change the background of the control when it is disabled. My best guess would be
.mat-form-field-appearance-fill:disabled
.mat-form-field-flex:disabled {
background: rgba(255, 15, 15, 1);
}
But this does not work. So how do I change the background of a disabled angular material fill input instead?
I created a stackblitz for this problem:
https://stackblitz.com/edit/angular-bcqsjo
Checking out your stackblitz link I just opened up chrome dev tools and inspected the disabled field. Here is the css being applied:
.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
background-color: rgba(0,0,0,.02);
}
So there is an additional class (mat-form-field-disabled) on the parent. Your updated code would be:
.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
background: rgba(255, 255, 255, 1);
}

How to change side menu background color in ionic 4?

I want to change the side menu background color, I tried a few things but not working.
ion-menu{
ion-content{
background-color: transparent !important;
}
.inner-scroll {
--background: var(--ion-menu-background);
}
}
Does anyone know how I can change background color in ionic 4?.
Try this
.inner-scroll {
background: green;
}
.inner-scroll .item-native{
background: green;
}
In cases where there are gradients and shades of colors, you can try this. This is particularly useful if you want the entire side-menu to have a gradient, without any borders, separating the toolbar, content and items.
// In variable.scss file you can create your Ionic css variables
:root
{
--custom-menu: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(246, 133, 133, 1) 16.3%,
rgba(172, 131, 241, 1) 90%
);
}
// In the app.component.scss file you would need to reference the variable that you created
ion-menu {
--ion-background-color: var(--custom-menu);
ion-toolbar {
--background: transparent;
}
ion-list {
background: transparent;
}
ion-item {
color: rgb(255, 255, 255);
--background: transparent;
}
ion-content {
--background: transparent;
}
}
// In the appcomponent.html file, ensure that you specify the no-border directive
<ion-header no-border>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
This is the output

css background transparency?

So I've been wasting a lot of time trying to do something simple. Using a custom css plugin I've been trying to set my body to be transparent to see the image in the background.
What I first tried using was opacity selector, but that set everything in the body as transparent. I'd like to have my images and text not be transparent. I've been googling this for many hours and each answer I see for other people is to use the rgba (number, number, number, opacity). I can see how this would work, but using this does not make the background transparent at all. I'm really at a loss for what to do, I feel like there is just something really simple I am missing.
Please inspect my code to see where I've gone wrong: [jaredbabinec.com][1]
Also here is my css:
body {
opacity: .9;
}
.site-header {
rgba(255, 255, 255, .9);
}
.site-content {
background-color: rgba(210, 210, 210, 0.9)
}
change the background color of the div with id="page"
for example
#page{
background-color: rgba(185, 178, 178, 0.71);
}
change the color as needed. Hope this will fix ur problem
use this
.site-content {background: rgba(210,210,210,0.9)}
`
.site-header {
rgba(255, 255, 255, .9);
}
`
rgba is not a property, it is a value you left out background:
Give the body the background image with background-size set to cover.
You want to create a site-wrapper div that is height and width 100%.
Make the background for that div transparent

how to add opacity to scss variable?

I am wondering if it is possible to add the opacity element to a sass variable? I am working on a project where I need to create different shades of a color and use them in custom typography file. My problem is when I create a color variable in rdga and implement it into my work the variable changes the code to a CSS opacity element which is written under a color element then this gets ran through the browser and throws and error. Is there a certain way to implement opacity in a variable so you don't get this problem?
Any help would be great, thanks
here are my variables:
$white-text-dh: rgba(255, 255, 255, 0.5);
$white-text-d: rgba(255, 255, 255, 0.12);
here is the typography ex:
.c-title{
font-size:20px;
color: $white-text-d;
font-family: Roboto-Light;
}
here is the html
<span class="c-title">hello</span>
this is what reads in the developer tools with an error going through the color. the color element can not read opacity
.c-title {
font-size: 20px;
color: #ffffff opacity 0.7%;
font-family: Roboto-Light;
}
I tested this and it works for me:
SCSS
$white: #fff;
$white-text-dh: rgba($white, .5);
.c-title {
color: $white-text-dh;
}
HTML
<h1 class="c-title">Test</h1>

Remove button like appearence from headers of QTableView with style sheet

I have a table view that looks like this
Is there any way that I can remove the borders around the headers and make them look plain?
My current style sheet for the table is:
background-color: qlineargradient(spread:pad, x1:0.102273, y1:0.068, x2:0.392318, y2:0.614, stop:0 rgba(200, 200, 200, 255), stop:1 rgba(255, 255, 255, 255));
Yes, headers are "stylable". Just notice that headers are inside the QTableView but are different widgets (They are QHeaderView). What you need to change is the style for the sections of the QHeaderView so you just have to select it correctly in your style sheet.
Following a very basic example so you can have a starting point.
This is what I would set as style sheet of the QTableWidget in order to achieve what you want:
QTableView {
background-color: qlineargradient(spread:pad, x1:0.102273, y1:0.068, x2:0.392318, y2:0.614, stop:0 rgba(200, 200, 200, 255), stop:1 rgba(255, 255, 255, 255));
}
QHeaderView::section {
border: 0px;
}
More info on styling QHeaderViews can be found here.
I hope this helps.

Resources