I'm trying to achieve a 5px gradient around all edges. I've found multiple ways to do this in all browsers except for IE (-mos-border-colors and apply 5 separate colors, border-image, etc...).
I've tried CSS3 Pie, but can't seem to get it to function at all in IE (any version). There are multiple sizes for this column, so images would be a hassle.
Any one have any solutions for this?
.col {
border: 5px solid;
-moz-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
-webkit-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
behavior: url(/htc/Support/assets/css/PIE.htc);
}
Maybe box-shadow is an option for you, enabling monochrome gradients/shades…
header {
box-shadow: 0 1em 2em #fff;
-webkit-box-shadow: 0 1em 2em #fff;
-moz-box-shadow: 0 1em 2em #fff; }
Does it really need to look identical in every browser?
Some cross browser solutions: http://webdesignerwall.com/tutorials/cross-browser-css-gradient
Please note not all browsers support CSS gradient. To be safe, you shouldn't rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
I've tried CSS3 Pie, but can't seem to get it to function at all in IE
(any version).
CSS3-Pie is a bit tricky. Try adding position:relative; to the element you want to apply border image to.
csspie cannot resolve relative paths from your stylesheet to your images. If you do not specify absolute paths from document root to your images, css pie cannot find them.
See this issue here:
http://css3pie.com/documentation/known-issues/#relative-paths
Related
I am currently working to replicate a design and I am using css grid for the layout.
I applied the css gap attribute and gutters were created between the rows and columns. However, a gutter was created outside the last row and I have been battling to fix it. from what I know about grid gap and also from css Tricks,the gutters are only created between the columns/rows, not on the outer edges.
Following is a screenshot of how it looks like after my implementation current look You can notice the gutter at the bottom of the last row on the right. I do not want the gutter there, I just want the row to take up the space at the bottom. This is the code for the grid container.
.App {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 25px;
width: 70%;
height: 55%;
background-color: var(--pry-blue);
}
I want to create a grid which will contain action buttons. The final layout should be something like this:
| 5 | 3 | 1 |
| 4 | 2 |
I'm discovering this but, let apart the fact that it starts from the right, I thought that the code should be as simple as this:
display: grid;
grid-template-rows: 30px 30px;
grid-auto-columns: 30px;
So we say we have 2 rows of 30px height, and that the auto-added colums will be 30px width. But actually that doesn't render as expected at all:
https://codepen.io/Flaburgan/pen/NWXggyd
What am I misunderstanding?
So, I finally found how to control that, the property I was looking for is grid-auto-flow: column dense;
I want to make the pictures of the product smaller. I also want to add another product per each row so it is 4 products instead of 3 products per row.
My Website:
http://www.notsomefantasy.com/
You can set 4 products per row on the desktop view for this particular theme by adding the following piece of code to the bottom of Customize Design > Advanced > CSS:
#media screen and (min-width: 1025px) {
.product-card {
width: 25%;
}
.product-link .product-image {
height: 50%;
}
}
In my application im having a table widget , by using stylesheet i tried to change header border and cells background colors.refer my code below,
//to set cell background color as white
tableWidget->setStyleSheet(" QTableWidget::item { border: 1px solid white; }" );
//to set header background as white
tableWidget->setStyleSheet("QHeaderView::section{background-color: black;color:white;border: 1px solid white;}");
now i want to combine both in style sheet. Guide me how to combine above two stylesheets into 1 stylesheet.
//to set cell background color as white
QString styleSheet = " QTableWidget::item { border: 1px solid white; }";
//to set header background as white
styleSheet += "QHeaderView::section{background-color: black;color:white;border: 1px solid white;}";
tableWidget->setStyleSheet(stylesheet);
However, you can just put everything in a single line, there is no need to split your stylesheet into two parts like this.
This question already has answers here:
QComboBox text colour won't change with style sheet
(3 answers)
Closed 8 years ago.
I have a simple QComboBox but I cannot figure out how to change the text color of the selected item. It stays black but it should be white. I used the color:white; properties but it seems to affect only the color of the popup item list.
this is my current stylesheet:
background: rgb(61,61,61);
color: rgb(255,255,255);
selection-color: rgb(255, 255, 255);
the QComboBox keeps having this behaviour:
as you can see the selected item still has an unspecified black color.
I have solved this by including the padding property:
QComboBox { combobox-popup: 0;
color: white;
padding: 0px 0px 0px 0px; }
It seems setting the padding property (with any value) on the combobox in the style sheet makes it properly obey the colour styling.
See for reference:
https://stackoverflow.com/a/24824810/4022402