Closed tiotrom closed 3 years ago
To answer the progress bar color:
QProgressBar::chunk {
background-color: #a80030;
}
Setting this in the branding stylesheet should change the color.
Thank you that worked. However I cannot change the background for the sliders. I spent the entire day today digging into calamares. I managed to pretty much change everything, except that. I'll share the code here in case anyone is interested.
#mainText{
font : bold 18px;
}
#logoApp {
min-height: 80px;
margin-bottom: 50px;
}
QVBoxLayout {
background-color: #313338;
color: #e4e4e4;
}
QProgressBar::chunk {
background-color: #2eb398;
}
#textBoxVerifiedRootPassword
{
padding: 10px;
margin:20px;
width:100%;
min-width:300px;
max-width:2000px;
border:1px solid;
display:inline-box;
text-transform: lowercase;
color: #ccc;
}
#textBoxRootPassword
{
padding: 10px;
margin:20px;
width:100%;
min-width:300px;
max-width:2000px;
border:1px solid;
display:inline-box;
text-transform: lowercase;
color: #ccc;
}
#checkBoxReusePassword
{
margin-top: 0px;
margin-left: 20px;
width:750px;
text-align:center;
text-transform: uppercase;
}
#labelChooseRootPassword
{
margin-top: 20px;
margin-left: 20px;
width:750px;
text-align:center;
text-transform: uppercase;
}
#checkBoxDoAutoLogin
{
margin-top: 0px;
margin-left: 20px;
width:750px;
text-align:center;
text-transform: uppercase;
}
#password_label_2
{
margin-top: 0px;
margin-left: 20px;
width:750px;
text-align:center;
text-transform: uppercase;
}
#textBoxUserVerifiedPassword
{
padding: 10px;
margin:20px;
width:100%;
min-width:300px;
max-width:2000px;
border:1px solid;
display:inline-box;
text-transform: lowercase;
color: #ccc;
}
#textBoxUserPassword
{
padding: 10px;
margin:20px;
width:100%;
min-width:300px;
max-width:2000px;
border:1px solid;
display:inline-box;
text-transform: lowercase;
color: #ccc;
}
#hostname_label_2
{
margin-top: 0px;
margin-left: 20px;
width:750px;
text-align:center;
text-transform: uppercase;
}
#textBoxHostName
{
padding: 10px;
margin:20px;
width:100%;
min-width:750px;
max-width:2000px;
border:1px solid;
display:inline-box;
text-transform: lowercase;
color: #ccc;
}
#username_label_2
{
margin-top: 0px;
margin-left: 20px;
width:750px;
text-align:center;
text-transform: uppercase;
}
#textBoxLoginName
{
padding: 10px;
margin:20px;
width:100%;
min-width:750px;
max-width:2000px;
border:1px solid;
display:inline-box;
text-transform: lowercase;
color: #ccc;
}
#labelWhatIsYourName
{
margin-top: 30px;
margin-left: 20px;
width:750px;
text-align:center;
text-transform: uppercase;
}
#textBoxFullName
{
padding: 10px;
margin:20px;
width:100%;
min-width:750px;
max-width:2000px;
border:1px solid;
display:inline-box;
text-transform: lowercase;
color: #ccc;
}
#sidebarMenuApp
{
text-transform: uppercase;
font: bold;
}
#aboutButton:hover
{
width:0px;
font: 0px;
color: #313338;
background-color: #313338;
border: 0px;
}
#aboutButton
{
border: 0px;
width:0px;
font: 0px;
color: #313338;
}
QComboBox::drop-down
{
width: 30px;
font-weight: bold;color: #5E749C;
font: bold 15px #ffffff;
selection-background-color: #fff;
}
QComboBox QAbstractItemView
{
border: 1px solid;
selection-background-color: #2eb398;
}
QComboBox
{
color: #fff;
border: 1px solid rgb(54, 57, 62,0);
padding: 10px;
selection-background-color: #fff;
}
QAbstractItemView::item:hover {
background-color: rgb(46, 179, 152);
color: #fff;
}
QAbstractItemView::item {
padding: 10px;
color: #2eb398;
border-bottom: 1px solid #1e1e1e;
}
#view-button-back {
background-color: rgb(54, 57, 62);
color: #bcbcbc;
text-transform: uppercase;
border: 1px;
padding:10px;
margin: 5px;
font : bold 15px;
width: 100%;
}
#view-button-back:hover {
background-color: #272727;
color: #bcbcbc;
}
#view-button-next:hover {
background-color: rgb(46, 179, 152,0.3);
color: #bcbcbc;
}
#view-button-cancel:hover {
background-color: rgb(169, 65, 80,0.3);
color: #bcbcbc;
}
#view-button-next {
background-color: rgb(46, 179, 152);
color: #fff;
text-transform: uppercase;
border: 1px;
padding:10px;
margin: 5px;
font : bold 15px;
width: 100%;
}
#view-button-cancel {
background-color: rgb(169, 65, 80);
color: #fff;
text-transform: uppercase;
border: 1px;
padding:10px;
margin-right: 5px;
font : bold 15px;
width: 100%;
}
#restartCheckBox
{
font: bold;
text-transform: uppercase;
}
#mainApp {
background-color: #313338;
}
#mainText{
font : bold 11px;
}
#logoApp {
min-height: 80px;
margin-bottom: 50px;
}
#physicalModelSelector {
color: #ffffff;
background-color: #2eb398;
text-transform: uppercase;
}
#label {
color: #ffffff;
text-transform: uppercase;
font: bold;
margin-left: 20px;
}
#viewManagerStack {
margin: 20px;
}
#summaryStep {
background-color: #313338;
}
#m_drivesLabel {
color: #ffffff;
background-color: #2eb398;
font: 15px;
width:300px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
}
#hLine
{
background-color: #2eb398;
}
#m_encryptCheckBox {
color: #ffffff;
background-color: rgb(169, 65, 80);
text-transform: uppercase;
padding: 20px;
font: bold 13px;
margin-top: 5px;
border: 2px #fff;
}
#m_itemsScrollArea {
color: #ffffff;
background-color: #36393e;
padding: 20px;
margin-top: 20px;
}
#m_iconLabel {
color: #ffffff;
width: 20px;
height:10px;
}
#partitionLabel {
color: #fff;
background-color: #313338;
text-transform: uppercase;
}
#m_previewAfterLabel {
color: #fff;
padding:10px;
text-transform: uppercase;
}
#m_previewBeforeLabel {
color: #fff;
padding:10px;
text-transform: uppercase;
}
#partitionBarView {
color: #ffffff;
background-color: #33363a;
}
#partitionLabel {
color: #ffffff;
}
#bootInfoLabel {
color: #ffffff;
background-color: rgb(169, 65, 80);
}
#deviceInfoLabel {
color: #ffffff;
background-color: rgb(169, 65, 80);
}
QPushButton:hover {
color: #ffffff;
background-color: #272727;
padding:10px;
text-transform: uppercase;
border: 1px solid;
}
QPushButton {
margin:5px;
color: #ffffff;
background-color: #33363a;
padding:10px;
text-transform: uppercase;
border: 1px solid;
}
#backgroundWidget
{background-color: #313338;
}
#debugButton {
color: #ffffff;
background-color: rgb(169, 65, 80);
}
See the example option https://github.com/calamares/calamares-extensions/tree/calamares/branding/kaos_branding It uses .svg for slides, thus full control of background
We use images for the slider too, and they are " anchors.fill: parent" which means they fill the entire area, like it is the case for kaos. See https://gitlab.com/tromsite/tromjaro/calamares-settings/-/blob/master/calamares/branding/manjaro/show.qml - but the issue is that it distorts them if you resize the calamares window...and if I set them up to keep the original resolution so to not distort, then I get that white background...I do not see how kaos changed the background color....
They are set to resize with the window, so make sure the svg is not a real image (thus no issue with distorting).
So you mean I should use svg and not pdn for the image sliders?
@tiotrom unrelated, but .. since you have put in a lot of effort into styling / coloring via the CSS method, perhaps you'd consider adding some comments / documentation to your CSS and then filing a PR for this repo, so that it can serve as an example?
I really like the styling, by the way: well done! shows off how flexible it can be, and that it was worth it to create and support the CSS styling (most of the work was done by Qt, but still ..).
anchors.fill: parent
in show.qml leaves big white gaps around the image (and they still resize and distort) which is what this issue describesSo: confirmed, and debugging.
For what it's worth, if you have only images, Calamares also supports a slideshow of images: no QML, just a collection of image paths. That might be easier to deal with. See https://github.com/calamares/calamares/blob/calamares/src/branding/default/branding.desc#L188 for some details -- I know it says QML is recommended, but there are various trade-offs.
( I was going to say something about the debug-window and the widget-tree button, but its output is not very useful for this particular bit of debugging )
In the end this comes down to QML-wranging. I don't think there's a good way to use stylesheets to set the background of a QML widget when the QML inside doesn't cooperate. You'll need to add to the QML instead.
For the "standard" slides and presentation QML,
Rectangle {
id: mybackground
anchors.fill: parent
color: "orange" // probably some other color
z: -1 // **behind** other elements which default to z=0
}
However, there are probably better ways of doing this in QML itself; looking at your show.qml
seems that you're fighting the existing system, rather than building what you need (which is fine, QML can be a real pain in the nadgers and I only half-understand it myself).
Coming 'round to the end of this: you can create a custom item type (e.g. ImageSlide) which has the declarative API that Presentation expects, but that loads just images; you can create a show.qml
that uses Presentation, has a background, and uses the custom ImageSlide to do the work. I'll add an example branding bit to this repo.
QML-wrangling: there is now an example, here, of slideshows with a background and images with a fixed size. You could copy ImageSlide.qml
into your own repo alongside show.qml
and modify that file (and branding.desc
too) accordingly.
Thank you very much! I am super busy these days but I will get back to this as soon as possible!
Hi. I cannot figure how to change the background color of the image slider...everything else I could change, but not that. Any help please?
Also, the color of this:
And while we are at it, what about the color of the progress bar :D ?
![image](https://user-images.githubusercontent.com/34804533/103603795-bc77be80-4f0f-11eb-96b3-3ac722a92d83.png)
Thanks a lot. I would not bother you, but I spent many days trying to change those and I simply could not find how...