Change the background color of the sliders

tiotrom commented 3 years ago

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 ?

Thanks a lot. I would not bother you, but I spent many days trying to change those and I simply could not find how...

Undef-a commented 3 years ago

To answer the progress bar color:

QProgressBar::chunk {
    background-color: #a80030;
}

Setting this in the branding stylesheet should change the color.

tiotrom commented 3 years ago

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); 
}

demmm commented 3 years ago

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

tiotrom commented 3 years ago

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....

demmm commented 3 years ago

They are set to resize with the window, so make sure the svg is not a real image (thus no issue with distorting).

tiotrom commented 3 years ago

So you mean I should use svg and not pdn for the image sliders?

adriaandegroot commented 3 years ago

@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?

adriaandegroot commented 3 years ago

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 ..).

with the styling exactly from the repo from @tiotrom , the images resize and while this looks "okay, ish, I guess" there are also funny results if you make the window really tall and narrow, for instance
just commenting out anchors.fill: parent in show.qml leaves big white gaps around the image (and they still resize and distort) which is what this issue describes

So: 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 )

adriaandegroot commented 3 years ago

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,

Presentation is an Item, so it does not have a visual style; there's no background
Slide is an Item, so it does not have a visual style; there's no background

What you can do is add a Rectangle as a background element for the whole presentation, e.g. add a child element to the presentation (as a sibling of the Slides), like this:

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).

adriaandegroot commented 3 years ago

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.

adriaandegroot commented 3 years ago

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.

tiotrom commented 3 years ago

Thank you very much! I am super busy these days but I will get back to this as soon as possible!

calamares / calamares-extensions

Change the background color of the sliders #9