I have slide where I set the paginationStyle="progress" how can I change the color of the progressbar?
<ion-slides #exercisesSlider pager paginationType="progress">
Could somebody provide me a way to change the color of the progressbar?
Ionic uses Swiper API slides. So you can select using class names swiper-pagination-progress and swiper-pagination-progressbar like this:
.swiper-pagination-progress .swiper-pagination-progressbar {
background:red;
}
Using only the CSS borders worked for me :
.swiper-pagination-progressbar-fill {
border: 2px solid rgba(175, 240, 122, 0.719);
border-radius: 5px;
}
.swiper-pagination-progressbar {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
}
Simple and maybe obvious follow up from the answer from #Surya Teja . If you separate the classes you can control which color for each part of the progress bar.
.swiper.pagination-progress {
background-color: red
}
.swiper-pagination-progressbar {
background-color: white
}
Related
Trying to update look and feel of jqgrid.
I am trying to increase the font size of the data in the grid as well as of the column header.
Here is my jsfiddle
https://jsfiddle.net/4ga1ekh3/69/
Using the code at
How to change the font size in jqGrid?
.ui-jqgrid {font-size:0.8em}
But this did not work.
I would also like to know how to increase the font of the various fields when of the edit form
Since no one answered here, I resolved this by using the below code:
.ui-jqgrid tr.jqgroup td {
font-weight: bold;
font-size: 12px;
}
.ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable {
font-size: 15px;
}
span.ui-jqgrid-cell-wrapper {
font-size: 16px;
}
td.jqgrid-rownum {
font-size: 15px;
}
I have following stylesheet for table.
QHeaderView::section, *[role="mockheader"]
{
min-width:80px;
background-color:#3949ab;
color:#FFFFFF;
border:0px;
outline:none;
height:40px;
}
QHeaderView::section:checked, QHeaderView::section:hover
{
background-color: #3949ab;
color:white;
}
QTableView
{
show-decoration-selected: 1;
border:0px;
background-color: rgba(0, 0, 0, 0);
gridline-color:#454545;
color: #FFFFF8;
}
QTableView::item
{
border: 0px;
min-height:35px;
padding:5px;
color:#FFFFFF;
}
QTableView::item:hover
{
background-color: rgba(255,255,255, 50);
}
QTableView::item:selected
{
background-color: #3949ab;
}
Ideally it should paint header in blue color. it is seems unaffected. see attached snap.
*Left blue space is label, which i added for filling left space. Its not a part of table. Just leave it.
I am not able to figure out any problem in my stylehseet. Please let me know what I am doing wrong here.
I'm working with QT and I have a menu. I have the follwing css for the menu:
QMenu {
/* background-color: #0F7070;*/
background-color:rgb(44,63,80);
border-top: none;
border-left:none;
border-right:none;
border-bottom:4px solid rgb(44,205,112);;
color:#fff;;
}
QMenu::item {
spacing: 3px; /* spacing between menu bar items */
padding: 10px 85px 10px 20px;
background: transparent;
}
/*Does not work*/
QMenu::item:hover {
background-color: rgb(52,73,94);
border-top: none;
border-left:none;
border-bottom:none;
border-left:3px solid rgb(44,205,112);;
}
How can I set the :hover to the item? Thank you.
I had same issue few years ago with a QT project.
Even if it may look like conterintuitive i solved changing:
item:hover
to
item:selected
I was advised so on QT forum, in that contest :selected acted as :hover, i didn't get deeper in the question, maybe won't work, but it worth a try.
I intend to set the background color of the QWidget
QWidget {
background-color: white;
}
But later, when the menu QAction is selected, the font is white, and the background is also white.The menu button font and background can be reset in the following ways
QMenu::item:hover {}
to
QMenu::item:selected {}
This way works, thanks
I'm writing an app for a touchscreen, and the default handle is too small to grab reliably, so I want to make it bigger. According to the official documentation, several answers on SE, and a couple of other forums, this ought to work in a QWidget's constructor:
sliderGrandMaster = new QSlider(Qt::Vertical, panelRight);
sliderGrandMaster->setGeometry( appdata->buttonBorder , //Left
buttonTopRight + appdata->buttonBorder , //Top
halfwidth - (2 * appdata->buttonBorder), //Width
buttonRemainingHeight - (2 * appdata->buttonBorder)); //Height
sliderGrandMaster->setRange(0, RANGE_MAX);
sliderGrandMaster->setTickInterval(RANGE_MAX / 10);
sliderGrandMaster->setTickPosition(QSlider::TicksBothSides);
QString temp = QString("handle:vertical { background: green; height: %1px; margin: 0 -%2px; }")
.arg(buttonRemainingHeight / 5)
.arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);
But it seems to have no effect. The handle is the same small size regardless of what values I put in the stylesheet, and it's not even green.
With my values at runtime, temp ends up being handle:vertical { background: green; height: 66px; margin: 0 -32px; }. The size of the slider is 94px wide by 331px tall.
Am I missing something?
Edit:
This:
QString temp = QString("QSlider::handle { background: green; height: %1px; width: %1px; margin: 0 -%2px; }")
.arg(buttonRemainingHeight / 5)
.arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);
at least got it green. But the size is still wrong. Qt version 5.4.2
You can change the size of the handle just with a simple stylesheet. Example :
Is done with the following stylesheet :
QSlider::groove:horizontal
{
border:none;
margin-top: 10px;
margin-bottom: 10px;
height: 10px;
}
QSlider::sub-page
{
background: rgb(164, 192, 2);
}
QSlider::add-page
{
background: rgb(70, 70, 70);
}
QSlider::handle
{
background: white;
border: 3px solid black;
width: 60px; // **Change the width here**
margin: -30px 0;
}
Ok, using Qt 5.6.1 I got some progress on this. The following code
QSlider* slider = new QSlider(this);
slider->setOrientation(Qt::Horizontal);
slider->setStyleSheet("QSlider::groove:horizontal { "
"border: 1px solid #999999; "
"height: 20px; "
"background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); "
"margin: 2px 0; "
"} "
"QSlider::handle:horizontal { "
"background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f); "
"border: 1px solid #5c5c5c; "
"width: 30px; "
"margin: -2px 0px; "
"} ");
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(slider);
layout->addWidget(new QSlider(Qt::Horizontal, this));
setLayout(layout);
may be placed into an emty QWidget to work. It simply adds two QSliders, one of which is modified using a style sheet.
As you may see, I used to change the groove too and it is working as intended. But there are strange issues which could be a bug at all. Try commenting out some properties of the groove style sheet, like border, background and margin. If there are no effective properties, the width property of the handle is dropped. As I cannot find any constraint in the documentation, I wonder why this happens.
Also note the issues drawing the border around the handle. Seems to need some more fine tuning. ;)
Summing things up the quick solution for you should be added some default properties for the groove.
I use a css file in my Qt Projets, with Visual Studio 2010.
main.cpp :
QApplication app(argc, argv);
// Mise en place du style CSS
QFile File("Resources/style.css");
File.open(QFile::ReadOnly);
QString styleSheet = File.readAll();
File.close();
app.setStyleSheet(styleSheet);
A part of my css file :
QWidget#contenuDescription {
background-color: rgb(0, 150, 255);
border: 2px solid rgb(0, 0, 255);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
QLabel#nom1 {
background-color: rgb(0, 150, 255);
font-size: 36px;
}
QLabel#nom2 {
background-color: rgb(0, 150, 255);
font-size: 24px;
}
QLabel#nom3 {
background-color: rgb(0, 150, 255);
font-size: 20px;
}
I want to change the color to my QLabels : nom1, nom2 and nom3 when bool m_changeColor == true.
I know we can use ::hover if we want to change the style sheet when the mouse is on the QLabel. Something like this does it exist for my problem ?
Thank you in advance for your answer.
You need to use properties:
Q_PROPERTY(bool changeColor ...)
Os set a property dynamically:
nom1Label->setProperty("changeColor", true);
Then in CSS:
QLabel#nom1[changeColor="true"] {
...
}
Also note:
Warning: If the value of the Qt property changes after the style sheet
has been set, it might be necessary to force a style sheet
recomputation. One way to achieve this is to unset the style sheet and
set it again.