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.
Related
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 .
Visual Studio Code has a built-in Markdown previewer. A theme can be selected in the preview window by right-clicking and choosing Preview Theme and selecting from various CSS options such as github-light.css, none.css, etc.
I would like to use some of these CSS files as a starting point for my own Markdown preview CSS. Where are these CSS files located and how may one access them?
On my Windows machine, it looks like the CSS file that controls the styling is in C:\Program Files\Microsoft VS Code\resources\app\extensions\markdown-language-features\media. The file is called markdown.css. Sure enough, when I change some of the values around, I see the preview window (after closing and reopening it, or switching tabs) update with the specified changes.
Within this file are multiple "Theming" classes, which I suspect are what get referenced when you switch themes, rather than having multiple .css files per theme:
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark td {
border-color: rgba(255, 255, 255, 0.18);
}
I have an ion list that is contained in an ion content like so:
<IonContent class="sub-list-container" scrollY={true} style={{ "background": "red" }}>
<IonList class="sub-list">
<IonMenuToggle autoHide={false} key={p.title}>
{
p.children.map(el => el)
}
</IonMenuToggle>
</IonList>
</IonContent>
The styles for this are:
.sub-list-container {
--background: var(--primary-dark);
}
Inside the list is of course some ion items. I have customised their separator line to be a gradient of white to transparent like this:
border-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0) 100%) 1 1;
This is so the line will blend into any background colour that I put it on. This works fine for a list on a different page however on the list I showed above, it goes from white to black. The issue isn't the gradient but the colour of the background behind it. I've tried setting every list, every ion content in the menu to the colour I need the background to be but it still looks like this:
As you can see, even though background is grey (and even the ion content's background is grey too), the line still blends to black.
After doing some digging in chrome, I found that this:
.list-ios {
background: var(--ion-item-background, var(--ion-background-color, #fff));
}
is causing that. If I disable that style then I can see whatever background colour I set instead of the black like so:
Unfortunately I have not found a way to disable this style. The mode of the ion list can only be ios or md so it will always have to have one of these styles. Even setting the background colours to !important does not work.
Is there anyway I can override this list-ios style?
Is there a way to use CSS variables when specifying gradient colors with transparency, e.g.
:root {
--accent-color: #dfd0a5;
}
h1{
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(red(var(--accent-color)), green(var(--accent-color)), blue(var(--accent-color)), 1));
}
You can use variables, but you can't sample the individual red, green and blue components from a single hex value in CSS.
If you're simply looking to apply an alpha component to an existing RGB triplet, you can specify the entire triplet as a comma-separated list of decimal values instead of a hex value, and substitute it directly into the rgba() function as a single opaque token:
:root {
--accent-color: 223, 208, 165;
}
h1 {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-color), 1));
}
If you want to specify and control individual R, G and B values with rgba(), you will need to specify a variable for each color component as a decimal value, and reference each variable within the rgba() function like so:
:root {
--accent-red: 223;
--accent-green: 208;
--accent-blue: 165;
}
h1 {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-red), var(--accent-green), var(--accent-blue), 1));
}
#boltclock said it all, but you can save a bit of time if your project has a scss preprocessor.
You can do a little tweak to achieve what you want :
// Scss
#mixin defineColorRGB ($color, $red, $green, $blue) {
#{$color}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
#{$color}-r: #{$red};
#{$color}-g: #{$green};
#{$color}-b: #{$blue};
}
Then in you css, you can do this:
::root {
#include defineColorRGB(--accentColor, red(#dfd0a5), green(#dfd0a5), blue(#dfd0a5));
}
You will end up with 4 different css variables, one for your color, and one for each color channel.
Then you can use it almost like you wrote it:
h1{
background: linear-gradient(
to right, rgba(255, 255, 255, 0),
rgba(var(--accent-color-r), var(--accent-color-g), var(--accent-color-b), 1)
);
}
I find it a very convenient way to initialize my css variables, and use it in most of my projects.
I want to change the color of bootstrap textbox from the default blue. tried:
.input-small,
.input-medium {
border-color: #E56717;
}
Not of much help. Also tried ":focus"
I presume you're speaking about the blue glow on focus? Try this:
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
outline: 0 none;
}
If you are using bootstrap 3 with LESS, you can set the variable #input-border-focus. This variable can be found in variables.less.
To whom visited this page and didn't find a solution, what I did is replacing -webkit-focus-ring-color with desired color and it works just fine!
change box-shadow color
input[type]:focus{ box-shadow: none; }